ChartJs place values outside of the pie chart

Question

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: Display values outside of pie chart in chartjs

In short I want this: 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

It's not clear to me what you want to reach. You talked about tooltips but afterwards you mentioned labels plugins whihc are not related to tooltips. If you would like to position the tooltip to a specific location (for instance out of chart area) see how to implement a custom positioner in chartjs doc: https://www.chartjs.org/docs/latest/configuration/tooltip.html#custom-position-modes — user2057925, Nov 02 '22 at 11:16
you are right, actually I don't even know how are they called, I want my data ( percentages) to be displayed instead in the tooltip on hoover on side of the part of the pie chart. I will add an example photo and edit my question. Thank you — LaCodeM, Nov 02 '22 at 12:32
I have seen the picture. Datalabels is not implementing that kind of labels (out side the chart area). In the link of SO you published, https://github.com/Neckster/chartjs-plugin-piechart-outlabels is used but it's not available for version3 of chartjs (AFAI see) — user2057925, Nov 02 '22 at 13:07
thanks, is there at least a way to display the values inside of the each section of the pie chart? — LaCodeM, Nov 02 '22 at 13:08
Yes, by datalabels you can. It should be enough to register it https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#registration. — user2057925, Nov 02 '22 at 13:10
You could try to use also https://github.com/emn178/chartjs-plugin-labels but it's not longer maintained and it works only with CHART,JS 2. But I think there is a fork where someone adapted to CHART.JS 3. — user2057925, Nov 02 '22 at 13:11
The chart plugin is not working, I can't import it in my AppModule :/ following the documentation: import 'chartjs-plugin-labels'; because I am using import { NgChartsModule } from 'ng2-charts'; — LaCodeM, Nov 02 '22 at 13:14

score 1 · Accepted Answer · answered Nov 02 '22 at 13:19

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/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.1.0/dist/chartjs-plugin-datalabels.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

Be aware that datalabels is not managing percentages how of the bow therefore if you want to show the percentages, you need to implemented by yourself and using "formatter" option to draw them — user2057925, Nov 02 '22 at 13:21

ChartJs place values outside of the pie chart

1 Answers1