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

![bildschirmfoto 2017-05-09 um 16 37 32](https://cloud.githubusercontent.com/assets/4346842/25856315/ee849f9a-34d5-11e7-93f2-1eb3331b4998.png)
Display label inside pie/donut chart
issue
created
jerairrest
username_1
See https://github.com/username_1/react-chartjs-2/issues/149 as well.
comment
closed
jerairrest
username_1
issue
created
sridhark158
username_2
it's worked good with pieceLabel 
https://emn178.github.io/Chart.PieceLabel.js/samples/demo/
comment
created
ergunpp
username_3
I have the problem that datalabels for example for omega 3 value is not displaying nicely. Is there an easy solution for that?

<img width="282" alt="screen shot 2018-12-22 at 20 45 18" src="https://user-images.githubusercontent.com/24900951/50377242-d39a2b00-062a-11e9-891f-76a3cd1cf017.png">
comment
created
JKLeGend
username_4
https://github.com/username_1/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~
comment
created
pravin-d
username_5
The link has changed to https://emn178.github.io/chartjs-plugin-labels/samples/demo/
comment
created
santoshwebinno
username_6
**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 (
      <Card className="doughchart">
        <Doughnut data={this.state.dataLine} options={this.state.dataLine.options}/>
          <Table>
          <tbody>
              <tr>
              <td><span className="ethpool"></span><strong>ETH</strong> pool</td>    
              <td>50000 PAYR</td>
              </tr>
              <tr>
              <td><span className="usdtpool"></span><strong>USDT</strong> pool</td>    
              <td>50000 PAYR</td>
              </tr>
              <tr>
              <td><span className="daipool"></span><strong>DAI</strong> pool</td>    
              <td>50000 PAYR</td>
              </tr>
              
          </tbody>
          </Table>
      </Card>
    );
  }
}
export default DoughnutChart;
comment