Open kunalpgithub opened 3 years ago
I wrote some code for positioning labels specifically on the lines between sections. You'll have to change some of the variables around to match your own usage and for some reason it isn't being formatted correctly on here but here ya go:
let numSectors = insert length of data array here; let sectorDegree = 180 / numSectors; let width = (canvas.parent().width() - parseInt(canvas.css('padding').replace("px","")*2)); let fontSize = 16; let b = (width/2)-3; let c = b-(fontSize*1.8); let a = Math.sqrt((Math.pow(b, 2) + Math.pow(c, 2)) - (2*b*c*Math.cos((sectorDegree/2) * Math.PI / 180))); let offset = a-(fontSize*1.2); let alignAngle = (Math.asin(Math.sin((sectorDegree/2) * Math.PI / 180)*c/a) * 180 / Math.PI)- (sectorDegree/2);
` datalabels: {
display: true,
anchor: 'end',
font: {
size: fontSize,
},
offset: offset,
align: function(context){
return (sectorDegree * context.dataIndex) - alignAngle;
},
}`
Hi,
This is very wonderful liibrary on top of chart.js
I want to create guage chart like this, but there is no way to display label on curve.