ChartJs place values outside of the pie chart-CodePudding

I am having a problem understanding the documentation of the ChartJS. I would like my values to be outside of the chart visible not in the tooltip but I am having problems understanding how to create chart configuration object. Someone had the same question on the StackOwerflow that didn't help me: but now I have this:

I am using Angular's ng2-charts and ChartsJS version 3.3.2

Here is my chart config:

    public pieChartOptions: ChartConfiguration['options'] = {
    responsive: true,
    plugins: [
      legend: {
        display: true,
        position: 'top',
      },
    ]
  }

The similar problems I have found online (ChartJs - Pie Chart - how to remove labels that are on the pie chart) proposed to add datalabels and outlabels config to plugins but I can't add this property as it's not recognized.

Plugins section of ChartJS documentation wasn't helpful (https://www.chartjs.org/docs/latest/developers/plugins.html) or maybe I didn't know where to look.

Anyone can help me figure this out?

Thank you

CodePudding user response：

After sharing in the comments, here a sample how to add labels (by datalabels plugin) to you pie/doughnut chart.

Chart.register(ChartDataLabels);
const options = {
  responsive: true,
  maintainAspectRatio: false,
};

const ctx = document.getElementById('myChart');
new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['Data1', 'Data2', 'Data3', 'Data4'],
    datasets: [ {
      data: [102, 200, 80, 55],
      backgroundColor: ['green', 'yellow', 'red', 'cyan'],
      datalabels: {
        font: {
          size: 16
        },
        color: 'black'
      }
    }],
  },
  options
});

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<html>
  <body>
    <div >
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>