https://github.com/chartjs/chart.lineargauge.js

Linear Gauge chart type for Chart.js
https://github.com/chartjs/chart.lineargauge.js

Last synced: 10 months ago
JSON representation

Linear Gauge chart type for Chart.js

Host: GitHub
URL: https://github.com/chartjs/chart.lineargauge.js
Owner: chartjs
License: mit
Created: 2015-04-27T18:40:59.000Z (almost 11 years ago)
Default Branch: master
Last Pushed: 2020-05-10T14:07:41.000Z (almost 6 years ago)
Last Synced: 2024-04-09T14:30:41.280Z (about 2 years ago)
Language: JavaScript
Homepage: https://chartjs.github.io/Chart.LinearGauge.js/example
Size: 16.6 KB
Stars: 55
Watchers: 13
Forks: 58
Open Issues: 8
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

A linear gauge chart type extension for Chart.js originally conceptualized by [A. Scott McCulloch, PhD](http://www.tapintu.com) and coded by [Alexander V.](https://www.elance.com/s/alexj874/)

# 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

```javascript
{
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

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