haiiaaa / chartjs-gauge

Gauge chart for Chart.js
53 stars 35 forks source link

How to display labels on guage. #17

Open kunalpgithub opened 3 years ago

kunalpgithub commented 3 years ago

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.

image

gretchenzuefeldt commented 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;
                                        },
                                }`