A linear gauge chart type extension for Chart.js originally conceptualized by A. Scott McCulloch, PhD and coded by Alexander V.

No Longer Maintained

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

Options

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
}

Dataset properties

All options extend any existing default chart.js settings

{
    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
}