A linear gauge chart type extension for Chart.js originally conceptualized by A. Scott McCulloch, PhD and coded by Alexander V.
This project is compatible only with Chart.js 1.x.
If you’re interested in compatibility with newer versions of Chart.js, please see A. Scott McCulloch’s repo https://github.com/scottmcculloch/Chart.LinearGauge.js
If you’re simply looking for examples of creating new chart types, please see https://github.com/chartjs/awesome
All options extend any existing default chart.js settings
{
geometry: 'horizontal', // ('horizontal' or 'vertical') orientation of the chart
range: { //range of chart
startValue: 0,
endValue: 100
},
axisColor: '',
axisWidth: '',
majorTicks: {
interval: 100, // if interval is 0 then ticks do not display
customValues: [], // array of custom values
width: 6,
height: 2,
offset: 0, // offset from center of the chart
color: '#fff'
},
minorTicks {}, // see majorTicks above
tickLabels: { // font style and size you may adjust according chart.js settings
units: '%', // will displayed after each label and in tooltips
interval: 100,
customValues: [],
offset: -9,
color: '#777b80'
},
scaleColorRanges: [{
start: -20,
end: 0,
color: '#fe5066' // adds color segments to the axis
}, {
start: 30,
end: 50,
color: '#1224fc'
}],
padding: { // padding of chart
top: 0,
bottom: 0,
left: 0,
right: 0
},
multiTooltipTitles: 'Total' // titles which will displayed on top of multitooltip popup
}
All options extend any existing default chart.js settings
```javascript { value: ‘’, // indicator value indicator: ‘’ // (‘range’ | ‘point’) - indicator type shape: ‘’ // (‘circle’ | ‘rect’ | ‘triangle’ | ‘inverted-triangle’ | ‘bowtie’ | ‘diamond’) - shape for point indicator width: ‘’ height: ‘’ offset: ‘’ color: ‘’ highlightFill: ‘’ // mouse hover change color colorRanges: [{ // change color of indicator according to it’s value startpoint: 0, breakpoint: 20, color: ‘#6154ab’ }, { startpoint: 20, breakpoint: 70, color: ‘#74f40b’ }, { startpoint: 70, breakpoint: 100, color: ‘#fd0902’ }], tooltipRanges: [{ // change tooltip of indicator according to it’s value startpoint: 0, breakpoint: 20, tooltip: ‘low’ }, { startpoint: 20, breakpoint: 70, tooltip: ‘normal’ }, { startpoint: 70, breakpoint: 100, tooltip: ‘high’ }] img: ‘’ // custom image for point indicator label: ‘’ // shows before value in tooltips }