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 https://github.com/jerairrest/react-chartjs-2/issues/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?

https://github.com/jerairrest/react-chartjs-2/issues/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 (

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

);

} } export default DoughnutChart;