Gauge chart for chart.js
npm install chartjs-gaugeSimple gauge chart for Chart.js
- Gauge Chart
- Gauge Chart with datalabels plugin
- Gauge Chart with datalabels plugin displaying labels
- yarn install: yarn add chart.js chartjs-gauge
- npm install: npm install --save chart.js chartjs-gauge
The gauge chart is based on the Doughnut type. It defines the following additional configuration options. These options are merged with the global chart configuration options, Chart.defaults.global, to form the options passed to the chart.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| needle.radiusPercentage | number | 2 | Needle circle radius as the percentage of the chart area width.
| needle.widthPercentage | number | 3.2 | Needle width as the percentage of the chart area width.
| needle.lengthPercentage | number | 80 | Needle length as the percentage of the interval between inner radius (0%) and outer radius (100%) of the arc.
| needle.color | Color | 'rgba(0, 0, 0, 1)' | The color of the needle.
| valueLabel.display | boolean | true | If true, display the value label.
| valueLabel.formatter | function | Math.round | Returns the string representation of the value as it should be displayed on the chart.
| valueLabel.fontSize | number | undefined | The font size of the label.
| valueLabel.color | Color | 'rgba(255, 255, 255, 1)' | The text color of the label.
| valueLabel.backgroundColor | Color | 'rgba(0, 0, 0, 1)' | The background color of the label.
| valueLabel.borderRadius | number | 5 | Border radius of the label.
| valueLabel.padding.top | number | 5 | Top padding of the label.
| valueLabel.padding.right | number | 5 | Right padding of the label.
| valueLabel.padding.bottom | number | 5 | Bottom padding of the label.
| valueLabel.padding.left | number | 5 | Left padding of the label.
| valueLabel.bottomMarginPercentage | number | 5 | Bottom margin as the percentage of the chart area width.
It is common to want to apply a configuration setting to all created gauge charts. The global gauge chart settings are stored in Chart.defaults.gauge. Changing the global options only affects charts created after the change. Existing charts are not changed.
For example, to configure all line charts with radiusPercentage = 5 you would do:
``javascript`
Chart.defaults.gauge.needle.radiusPercentage = 5;
The gauge chart requires a value to be specified for the dataset. This is used to draw the needle for the dataset.
| Name | Type | Default | Description
| ---------- | -------- | ----------- | -----------
| value | number | undefined | Value used for the needle.minValue
| | number | 0 | Used to offset the start value.
`javascript
var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx, {
type: 'gauge',
data: {
datasets: [{
value: 0.5,
minValue: 0,
data: [1, 2, 3, 4],
backgroundColor: ['green', 'yellow', 'orange', 'red'],
}]
},
options: {
needle: {
radiusPercentage: 2,
widthPercentage: 3.2,
lengthPercentage: 80,
color: 'rgba(0, 0, 0, 1)'
},
valueLabel: {
display: true,
formatter: (value) => {
return '$' + Math.round(value);
},
color: 'rgba(255, 255, 255, 1)',
backgroundColor: 'rgba(0, 0, 0, 1)',
borderRadius: 5,
padding: {
top: 10,
bottom: 10
}
}
}
});
``
chartjs-gauge is available under the MIT license.