Hello, I'm developing some dashboards with the c3js library and there's a need to create a "gauge" graphic with pointer and colored areas of the value. From what I've researched, there is no simple way to do the same with the C3js (no fingering with the D3). So by researching other alternatives, I found highcharts, which have some types of Gauge graphics, however you need to pay a license to use the library.
I ran codepen tests with highcharts and got a satisfactory result, and I wondered if there is a way to re-create this chart using C3js.
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '70%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.222222222, '#DF5353'], // red
[0.444444444, 'orange'], // red
[0.666666667, '#DDDF0D'], // yellow
[1, '#55BF3B'], // green
],
lineWidth: 0,
minorTickInterval: null,
tickAmount: 5,
title: {
y: -80
},
labels: {
y: 20
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
},
innerRadius: '70%'
}
}
};
// The speed gauge
var gaugeChart = Highcharts.chart('gauge', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 9000,
title: {
text: 'Entradas no Mês'
},
tickPositions: [0, 2000, 4000, 6000, 9000],
plotBands: [{
from: 0,
to: 2000,
color: '#DF5353',
outerRadius: '68%'
},{
from: 2001,
to: 4000,
color: 'orange',
outerRadius: '68%'
},{
from: 4001,
to: 6000,
color: '#DDDF0D',
outerRadius: '68%'
},{
from: 6001,
to: 9000,
color: '#55BF3B',
outerRadius: '68%'
}],
labels: {
align: 'center',
distance: -2,
}
},
credits: {
enabled: false
},
series: [{
name: 'Value',
data: [0],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
// Bring life to the dials
setInterval(function() {
var point = gaugeChart.series[0].points[0];
var value = Math.floor(Math.random() * 9000);
point.update(value);
}, 3000);.outer {
width: 600px;
height: 200px;
margin: 0 auto;
}
.container {
width: 300px;
float: left;
height: 200px;
}
.highcharts-yaxis-grid .highcharts-grid-line {
display: none;
}
@media (max-width: 600px) {
.outer {
width: 100%;
height: 400px;
}
.container {
width: 300px;
float: none;
margin: 0 auto;
}
}<script src="https://code.highcharts.com/highcharts.js"></script><scriptsrc="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script><divclass="outer">
<div id="gauge" class="container"></div>
</div>