How to write the custom label inside donuts chart

reactjs / react-chartjs

common react charting components using chart.js

MIT License

2.93k stars 299 forks source link

How to write the custom label inside donuts chart #108

Open sunnybogawat opened 8 years ago

sunnybogawat commented 8 years ago

I am using the implementation in reactJs component and I am not understanding how I can write the custom label inside donuts chart. I am not able to found any hint for this. Could you please lets us know how to set the custom label.

sunnybogawat commented 8 years ago

any update on this?

dougmolineux commented 8 years ago

You'll need to use the chart options object:

http://www.chartjs.org/docs/#doughnut-pie-chart-chart-options

sunnybogawat commented 8 years ago

Thanks for the reply. I saw this options before but I am using react-chartjs component and haven't found any configuration for showing data in the center of the donuts chart specific to component. I am getting the canvas object from DOM do you know is there any way to show data in the center using this object.

pankaj805 commented 7 years ago

Any update on this ? i also need the same functionality

scorgn commented 7 years ago

@pankaj805 See my comment here if you are still looking for a solution. https://github.com/chartjs/Chart.js/issues/78#issuecomment-289264197

iratierana commented 6 years ago

Hi, this solution dosnt work on my code. Can someone help me? This is my code.

`var config = { type: 'doughnut', data: { datasets: [{ data: [ data.VSTPS_OEEDATOF[0].PctOEE, "100" - data.VSTPS_OEEDATOF[0].PctOEE, ], backgroundColor: [ "#8A8A8A", "#FFFFFF", ] }, { data: [ "100", ], backgroundColor: [ "#DED6D6", ] } ] }, options: { responsive: true, elements: { center: { text: '90%', color: '#FF6384', fontStyle: 'Arial', sidePadding: 20, } } } };

    var ctx = document.getElementById("chart-area").getContext("2d");
    window.myDoughnut = new Chart(ctx, config);`

And this my html plage `