PHPackages sourcentis/chartjs-gauge - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. sourcentis/chartjs-gauge ActiveLibrary[Utility & Helpers](/categories/utility) sourcentis/chartjs-gauge ======================== A Chart.js plugin providing a gauge chart type with needle and value label v1.2.0(1mo ago)0622—4.8%MITJavaScriptPHP ^8.1 Since May 25Pushed 1mo ago1 watchersCompare [ Source](https://github.com/sourcentis/chartjs-gauge)[ Packagist](https://packagist.org/packages/sourcentis/chartjs-gauge)[ Docs](https://github.com/sourcentis/chartjs-gauge)[ RSS](/packages/sourcentis-chartjs-gauge/feed)WikiDiscussions main Synced 3w ago READMEChangelogDependencies (1)Versions (5)Used By (0) [![chartjs-gauge logo](./images/logo.svg)](./images/logo.svg) @sourcentis/chartjs-gauge ======================================================================================= [](#-sourcentischartjs-gauge) A [Chart.js](https://www.chartjs.org/) plugin that adds a **gauge chart** type — a half-doughnut with an animated needle and a configurable value label. [![npm version](https://camo.githubusercontent.com/2c4b670cf9a08bbdd8fc9a418640b57f36df08bb6f1800f98d6bf093f635ae17/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f40736f757263656e7469732f63686172746a732d6761756765)](https://www.npmjs.com/package/@sourcentis/chartjs-gauge)[![Packagist version](https://camo.githubusercontent.com/6a12fca1a3032a3b058f1ed84531fa8e4a6a32dcdd54df15693ada5fe03296ca/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f736f757263656e7469732f63686172746a732d6761756765)](https://packagist.org/packages/sourcentis/chartjs-gauge)[![License: MIT](https://camo.githubusercontent.com/fdf2982b9f5d7489dcf44570e714e3a15fce6253e0cc6b5aa61a075aac2ff71b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d79656c6c6f772e737667)](LICENSE)[![Documentation](https://camo.githubusercontent.com/0ec10a8cdfdd7a57ca5dc3aec101911c1cb0b1f641385faac5585295f6836997/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646f63732d736f757263656e7469732e6769746875622e696f2d626c7565)](https://sourcentis.github.io/chartjs-gauge/) [![chartjs-gauge](images/gauge1.png)](images/gauge1.png) --- Features -------- [](#features) - **Gauge chart type** (`type: 'gauge'`) built on Chart.js's doughnut controller - **Animated needle** with configurable radius, width, length, and color - **Value label** with custom formatter, background, border-radius, padding, and color - Supports **`minValue`** to offset the gauge starting point - Compatible with **Chart.js v4** - Works as a **Laravel Composer package** (publishes pre-built assets) or a **standalone npm package** --- Installation ------------ [](#installation) ### npm / yarn [](#npm--yarn) ``` npm install chart.js @sourcentis/chartjs-gauge # or yarn add chart.js @sourcentis/chartjs-gauge ``` ### Composer (Laravel) [](#composer-laravel) ``` composer require sourcentis/chartjs-gauge ``` Then publish the pre-built assets: ``` php artisan vendor:publish --tag=chartjs-gauge-assets ``` This copies the `dist/` files to `public/vendor/chartjs-gauge/`. --- Quick Start ----------- [](#quick-start) ### ES module (Vite / webpack) [](#es-module-vite--webpack) ``` import { Chart } from "chart.js"; import "@sourcentis/chartjs-gauge"; // auto-registers the controller const ctx = document.getElementById("myGauge"); new Chart(ctx, { type: "gauge", data: { datasets: [{ value: 65, // needle position data: [33, 66, 100], // segment boundaries backgroundColor: ["#E15759", "#F28E2B", "#59A14F"], }], }, options: { needle: { radiusPercentage: 2, widthPercentage: 3.2, lengthPercentage: 80, color: "rgba(0, 0, 0, 1)", }, valueLabel: { display: true, formatter: (value) => `${value}%`, color: "rgba(255, 255, 255, 1)", backgroundColor: "rgba(0, 0, 0, 0.8)", }, }, }); ``` ### CDN (UMD) [](#cdn-umd) ``` new Chart(document.getElementById("myGauge"), { type: "gauge", data: { datasets: [{ value: 65, data: [33, 66, 100], backgroundColor: ["#E15759", "#F28E2B", "#59A14F"], }], }, }); ``` --- Dataset Properties ------------------ [](#dataset-properties) PropertyTypeDefaultDescription`value``number`—**Required.** Current needle position.`minValue``number``0`Minimum gauge value (offset starting point).`data``number[]`—**Required.** Segment boundary values (cumulative).`backgroundColor``string[]`—Colors for each segment.### Segments vs. value [](#segments-vs-value) `data` defines the **segment boundaries** on the gauge arc. The `value` property controls where the needle points independently of the segments. ``` // Three segments: 0–33 (red), 33–66 (orange), 66–100 (green) // Needle at 50 (in the orange zone) datasets: [{ value: 50, data: [33, 66, 100], backgroundColor: ["#E15759", "#F28E2B", "#59A14F"], }] ``` ### Using minValue [](#using-minvalue) ``` // Gauge from -20 to +20, needle at +5 datasets: [{ value: 5, minValue: -20, data: [-10, 0, 10, 20], backgroundColor: ["#d32f2f", "#ef5350", "#66bb6a", "#2e7d32"], }] ``` --- Options ------- [](#options) ### Needle [](#needle) Configure via `options.needle`: OptionTypeDefaultDescription`radiusPercentage``number``2`Needle pivot circle radius as % of chart width.`widthPercentage``number``3.2`Needle base width as % of chart width.`lengthPercentage``number``80`Needle length as % of the arc depth (inner→outer radius).`color``string``"rgba(0, 0, 0, 1)"`Needle and pivot circle fill color.``` options: { needle: { radiusPercentage: 2, widthPercentage: 3.2, lengthPercentage: 80, color: "rgba(0, 0, 0, 1)", }, } ``` ### Value Label [](#value-label) Configure via `options.valueLabel`: OptionTypeDefaultDescription`display``boolean``true`Show or hide the label.`formatter``function``(v) => String(v)`Format the displayed value. Receives the raw `value`.`fontSize``number``12`Font size in pixels.`color``string``"rgba(255, 255, 255, 1)"`Text color.`backgroundColor``string``"rgba(0, 0, 0, 0.8)"`Background fill color.`borderRadius``number``5`Background corner radius in pixels.`padding``object``{top:5,right:10,bottom:5,left:10}`Inner padding around the label text.`bottomMarginPercentage``number``5`Vertical offset from gauge center as % of chart width.``` options: { valueLabel: { display: true, formatter: (value) => `${value.toFixed(1)}%`, fontSize: 14, color: "#ffffff", backgroundColor: "rgba(0, 0, 0, 0.8)", borderRadius: 4, padding: { top: 6, right: 12, bottom: 6, left: 12 }, bottomMarginPercentage: 5, }, } ``` #### Formatter examples [](#formatter-examples) ``` // Percentage formatter: (value) => `${value}%` // Currency formatter: (value) => new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" }).format(value) // Score label formatter: (value) => value >= 80 ? "Excellent" : value >= 50 ? "Moyen" : "Faible" // Hide label valueLabel: { display: false } ``` ### Arc (inherited from Doughnut) [](#arc-inherited-from-doughnut) The gauge arc is a 180° half-doughnut by default. You can override these Chart.js options: OptionDefaultDescription`rotation``-90`Start angle in degrees.`circumference``180`Arc span in degrees.`cutout``"50%"`Inner radius as % of outer radius.--- Examples -------- [](#examples) ### Maturity score (0–100, three zones) [](#maturity-score-0100-three-zones) ``` new Chart(ctx, { type: "gauge", data: { datasets: [{ value: 72, data: [40, 80, 100], backgroundColor: ["#E15759", "#F28E2B", "#59A14F"], }], }, options: { needle: { color: "#333" }, valueLabel: { formatter: (v) => `${v} / 100`, backgroundColor: "#333", }, }, }); ``` ### Full-circle gauge (360°) [](#full-circle-gauge-360) ``` new Chart(ctx, { type: "gauge", data: { datasets: [{ value: 270, data: [90, 180, 270, 360], backgroundColor: ["#4e79a7", "#f28e2b", "#e15759", "#76b7b2"], }], }, options: { rotation: -180, circumference: 360, cutout: "70%", valueLabel: { formatter: (v) => `${v}°` }, }, }); ``` ### With Chart.js datalabels plugin [](#with-chartjs-datalabels-plugin) ``` import ChartDataLabels from "chartjs-plugin-datalabels"; Chart.register(ChartDataLabels); options: { plugins: { datalabels: { formatter: () => null, // hide segment labels }, }, } ``` --- Laravel / Vite Integration -------------------------- [](#laravel--vite-integration) If you use this package via Composer and build assets with Vite, add an alias in `vite.config.mjs`: ``` import path from "path"; export default defineConfig({ resolve: { alias: { "@sourcentis/chartjs-gauge": path.resolve( __dirname, "vendor/sourcentis/chartjs-gauge/dist/chartjs-gauge.esm.js" ), }, }, }); ``` Then import normally in your JS: ``` import "@sourcentis/chartjs-gauge"; ``` --- API --- [](#api) ### Named export [](#named-export) ``` import { GaugeController } from "@sourcentis/chartjs-gauge"; // Manual registration (if you don't want auto-registration on import) Chart.register(GaugeController, ArcElement); ``` ### Default export [](#default-export) ``` import ChartjsGauge from "@sourcentis/chartjs-gauge"; ChartjsGauge.install(Chart); // same as Chart.register(GaugeController, ArcElement) ``` --- Browser Support --------------- [](#browser-support) Same as Chart.js v4 — all modern browsers (Chrome, Firefox, Safari, Edge). --- Contributing ------------ [](#contributing) 1. Clone the repo 2. `npm install` 3. `npm run dev` — watch mode 4. `npm run build` — production build --- License ------- [](#license) [MIT](LICENSE) © [Sourcentis](https://github.com/sourcentis) --- Acknowledgements ---------------- [](#acknowledgements) Inspired by [chartjs-gauge](https://github.com/haiiaaa/chartjs-gauge) by haiiaaa. ### Health Score 42 — FairBetter than 88% of packages Maintenance88 Actively maintained with recent releases Popularity19 Limited adoption so far Community7 Small or concentrated contributor base Maturity45 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1 days Total 3 Last Release 58d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/d5ef2ae48c46ad60275c035d717d564f477fcd3801ef467b1cf4aa0f2cd96ea7?d=identicon)[dbarzin](/maintainers/dbarzin) --- Top Contributors [![dbarzin](https://avatars.githubusercontent.com/u/43208232?v=4)](https://github.com/dbarzin "dbarzin (15 commits)") --- Tags chartjsgaugegauge-chartlaraveljavascriptchartchartjsgauge ### Embed Badge ![Health badge](/badges/sourcentis-chartjs-gauge/health.svg) ``` [![Health](https://phpackages.com/badges/sourcentis-chartjs-gauge/health.svg)](https://phpackages.com/packages/sourcentis-chartjs-gauge) ``` ### Alternatives [frenzy/turbolinks Frenzy Turbolinks makes following links in your web application faster with Laravel 16023.3k](/packages/frenzy-turbolinks)[efficiently/jquery-laravel This package provides jQuery and the jQuery-ujs driver for your Laravel >= 6 application. 1411.3k1](/packages/efficiently-jquery-laravel)[antoineaugusti/easyphpcharts A PHP class for chartjs.org charts. 253.1k](/packages/antoineaugusti-easyphpcharts)[bissolli/php-css-js-minifier A PHP Class to merge and minify CSS and JavaScript files. 102.9k4](/packages/bissolli-php-css-js-minifier) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)