junyahiraiwa / chart.lineargauge.js

Linear Gauge chart type for Chart.js

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
}