how to show text inside a chart - pie and doughnut?

Question

I have tried a lot of it, but nothing seems to be working as expected.

I need to show the text inside the pie chart. For the above, I tried using chartjs-plugin-datalabels but then used a formatter to change a value to a value with a percentage.

formatter: function(value:any, context:Context) {
        return Math.floor(value) + '%';
      },

But that affected both the data point (i.e: [11,200] is by data, I only need to add a percentage to the first data point and not to the second. Show 11% and 200.)

Code:

import ChartDataLabels,{Context} from 'chartjs-plugin-datalabels';

ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);

export const options = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    datalabels: {
      formatter: function(value:any, context:Context) {
        return Math.floor(value) + '%';
      },
      color:"white",
      font: {
        size: 16,
        weight:'bold'
    }
    },
    title: {
      display: true,
    },
    legend: {
      display: false,
    },
  },
};
function MyChart(){
return(
 <Pie data={dataChart} options={options} />
)
}

In the above code options in the Pie, the component shows a typescript error while using chartjs-plugin-datalabels library.

The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & Omit<ChartProps<"doughnut", number[], unknown>, "type"> & { ref?: ForwardedRef<ChartJSOrUndefined<"doughnut", number[], unknown>> | undefined; }'

2: I need to show text in the center of a Doughnut chart but seems impossible with the library and reactchartjs2 don't have a feature to show text in charts. Tried a possible solution at Add text inside the Doughnut chart of the React-Chartjs-2 box to react but none helped.

how to show text inside a chart - pie and doughnut?

0 Answers0