I am trying to create new custom plugin for chart.js and having issues with type error while getting dataset option from chart object.
This is plugin code.
const gaugeNeedle: Plugin<"doughnut"> = { id: "gaugeNeedle", afterDatasetDraw(chart: Chart<"doughnut">, args, options) { if (!chart || typeof options.needleValue === "undefined") { return; } const { ctx, chartArea: { width }, } = chart; const datasetMeta: ChartMeta<"doughnut"> = chart.getDatasetMeta(0); const { rotation, circumference } = datasetMeta._dataset; // datasetMeta object hasn't got _dataset property ctx.save(); const { needleValue, dataTotal } = options; const angle = (((1 / dataTotal) * needleValue * circumference - (90 - rotation)) / 180) * Math.PI; const cx = width / 2; const cy = datasetMeta.data[0].y; ...
Here is chart options for doughnut.
const data = useMemo<ChartData<"doughnut", number[], string>>( () => ({ labels: ["Filled", "Unfilled"], datasets: [ { label: "Speedometer", data: [value, 100 - value], // Example data: 65% filled, 35% unfilled borderWidth: 0, borderRadius: 10, cutout: "85%", // Adjust for thicker/thinner gauge appearance circumference: 240, rotation: -120, backgroundColor: (context: ScriptableContext<"doughnut">) => { const chart = context.chart; const { chartArea } = chart; if (!chartArea) { return undefined; } if (context.dataIndex === 0) { return getGradient(chart, value); } else { return "grey"; } }, }, ], }), [value], );
I want to get rotation and circumference from chart object inside afterDatasetDraw
, how can I do that?
I have tried to log the datasetMeta
to the browser console but it has _dataset
property.Above code is working correctly but I am getting only typescript error, and also I only want to get rotation and circumference for first dataset so if you know another way to get them, please help me.