I want to create chart as above. I ahve tried multiple ways to do but couldn't get any correct one. Some sample code i'm showing below:
HTML code:
<canvas class='chartjs-gauge'></canvas>
JS CODE:
var config6 = {
type:"doughnut",
data: {
labels : ["Positive","Negative"],
datasets: [{
label: "Gauge",
data : [190, 10],
backgroundColor: [ "green","red" ]
}]
},
options: {
circumference: Math.PI,
rotation : Math.PI,
cutoutPercentage : 40, // precent
plugins: {
datalabels: {
backgroundColor: 'rgba(0, 0, 0, 0.7)',
borderColor: '#ffffff',
color: function(context) {
return context.dataset.backgroundColor;
},
font: function(context) {
var w = context.chart.width;
return {
size: w < 512 ? 18 : 20
}
},
align: 'start',
anchor: 'start',
offset: 10,
borderRadius: 4,
borderWidth: 1,
formatter: function(value, context) {
var i = context.dataIndex;
var len = context.dataset.data.length - 1;
if(i == len){
return null;
}
return value+' mph';
}
}
},
legend: {
display: true
},
tooltips: {
enabled: true
}
}
};
But it is only showing chart as below:
Anybody know how to do it?