Display label inside pie/donut chart

[yss14]

Is it possible to display a label inside each bar of a pie chart or donut chart?

[VicFrolov]

This is exactly what I need, would love to know if this is possible.

[gmp26]

This can be done with a plugin. See http://www.chartjs.org/samples/latest/advanced/data-labelling.html for suitable plugin code.

[jerairrest]

See #149 as well.

[sridhark158]

it's worked good with pieceLabel
https://emn178.github.io/Chart.PieceLabel.js/samples/demo/

[ergunpp]

I have the problem that datalabels for example for omega 3 value is not displaying nicely. Is there an easy solution for that?

[JKLeGend]

I have the problem that datalabels for example for omega 3 value is not displaying nicely. Is there an easy solution for that?

#201
https://chartjs-plugin-datalabels.netlify.com/guide/positioning.html#clamping
https://chartjs-plugin-datalabels.netlify.com/guide/positioning.html#overlap
if label is out of box, adding padding for layout works as well.
hope it helps~

[pravin-d]

it's worked good with pieceLabel
https://emn178.github.io/Chart.PieceLabel.js/samples/demo/

The link has changed to https://emn178.github.io/chartjs-plugin-labels/samples/demo/

[santoshwebinno]

the option part is not working..
import React from 'react';
import { Card, Table } from "react-bootstrap"
import {Doughnut} from 'react-chartjs-2';

class DoughnutChart extends React.Component {
state={
dataLine:{
labels: ['ETH','DAI','USDT'],
datasets: [
{
data: [30, 40, 30],
backgroundColor: ["#868DAC", "#F2A919", "#6297A4"],
hoverBackgroundColor: [
"#7482C4",
"#FEAB09",
"#488695"
],
}
],
options: {
plugins: {
labels: {
render: 'percentage',
fontColor: ['green', 'white', 'red'],
precision: 2
}
},
},
}
}
render() {
return (

      </tbody>
      </Table>
  </Card>
);

}
}
export default DoughnutChart;

ETH pool	50000 PAYR
USDT pool	50000 PAYR
DAI pool	50000 PAYR