A linear gauge chart type extension for Chart.js originally conceptualized by A. Scott McCulloch, PhD and coded by Alexander Vantsov ([email protected]).
Updated to work with Chart.js v2.x
Example page you can see here.
All options extend any existing default chart.js settings
Set scale orientation, false - vertical, true - horizontal
Object, set scale range (max and min for the scale). Containe two fields, startValue and endValue.
Object, set font name and size for scale. Containe two fields, fontName and fontSize.
Set width of axes in pixels.
Set axis color.
Describe scale ticks. There are two type of ticks, major and minor. For each type it is possible to set particular options. If some of them skipped, this type of ticks will not be displayed.
majorTicks, minorTicks:
Describe major/minor ticks for scale. Object, contains following fields:
interval: set interval for ticks repeating according to scale range
customValues: array, set custom values on scale where tick has to be shown
width: width in pixels
height: height in pixels
offset: offset in pixels from scale center
color: color
Describe scale labels. Object, contains following fields:
display: show or hide labels
interval: set interval for scale labels repeating according to scale range
customValues: array, set custom values on scale where label has to be shown
units: mark that will added to each scale label
offset: offset in pixels from scale center
color: color
Set particular colors on the part of scale. Array of objects, contains following fields:
start: start scale range, point from which color range starts, don't set it below or above scale range
end: stop scale range, point where color range stops, don't set it below or above scale range
color: color
window.myBar = new Chart(ctx, {
type: 'linearGauge',
data: barChartData,
options: {
responsive: true,
scale: {
horizontal: false,
range: {
startValue: -100,
endValue: 200
},
responsive: true,
font: {
fontName: 'Arial',
fontSize: 12
},
axisWidth: 5,
axisColor: '#c5c7cf',
ticks: {
majorTicks: {
interval: 0,
height: 2
},
minorTicks: {
interval: 25,
width: 2,
offset: -2
},
},
scaleLabel: {
display: true,
interval: 100,
units: '',
offset: -22,
color: '#3fd91e'
},
scaleColorRanges: [{
start: -50,
end: 30,
color: '#fe5066'
}, {
start: 30,
end: 130,
color: '#82e668'
}, {
start: 130,
end: 180,
color: '#1224fc'
}],
},
legend: {
display: false
}
}
});
array, must contain only one value, stacked charts is not support
define type of pointer which will used to show data, if not setted, default is 'bar', available pointers: 'bar', 'point', 'text'
define shape for point pointer: 'triangle', 'circle', 'rect', 'inverted-triangle', 'bowtie', 'diamond'
define text for text pointer
define font size for text pointer
define font family for text pointer
define angle in degrees to rotate text pointer
define alignment text position related to offset, possible settings: 'left', 'center', 'right'.
define img url if you want to use image as pointer (if setted this param, pointer will image, not needed to set pointer param) if you are using image ranges, you have to set this param, this image will used as default
width of pointer
height of pointer
pointer offset from scale center
pointer color
array of objects, set color ranges for pointer which will accepted according to chart data value, object properties:
startpoint: start pointer range, point from which color range starts, don't set it below or above scale range
breakpoint: stop pointer range, point where color range stops, don't set it below or above scale range
color: color
array of objects, set image ranges for pointer which will accepted according to chart data value, object properties:
startpoint: start image range, point from which image range starts, don't set it below or above scale range
breakpoint: stop image range, point where image range stops, don't set it below or above scale range
img: image that will shown for current range
array of objects, set text ranges for pointer which will accepted according to chart data value, object properties:
startpoint: start text range, point from which text range starts, don't set it below or above scale range
breakpoint: stop text range, point where text range stops, don't set it below or above scale range
text: text that will shown for current range
{
data: [0],
pointer: 'point',
shape: 'triangle',
text: 'Pointer Text',
fontSize: 21,
fontFamily: 'Arial',
img: 'img/hand-pointer.png'
width: 18,
height: 25,
offset: 8,
backgroundColor: '#1b02f7',
colorRanges: [{
startpoint: -150,
breakpoint: -100,
color: '#1b02f7'
}, {
startpoint: -100,
breakpoint: -30,
color: '#8888fb'
}, {
startpoint: -30,
breakpoint: 30,
color: '#31d801'
}, {
startpoint: 30,
breakpoint: 100,
color: '#e1e10d'
}, {
startpoint: 100,
breakpoint: 150,
color: '#d90000'
}],
imageRanges: [{
startpoint: -10,
breakpoint: 0,
img: 'img/diamond3.png'
}, {
startpoint: 15,
breakpoint: 25,
img: 'img/shapes7.png'
}]
}