3

I've been googling for hours but didn't find the answer for this yet. I'm using ng2-chart to generate charts in my dashboard. It's working well, the problem is that I want to show the percentage values inside the doughnut chart but I don't know how to do it.

This is my code:

<canvas baseChart [data]="dashboard.graficoDespesaMensal.valorTotalDespesa"
                [labels]="dashboard.graficoDespesaMensal.descricaoCategoria" [options]="optionsGraficoDespesa"
                [chartType]="'doughnut'">
              </canvas>

  optionsGraficoDespesa: ChartOptions = {
    responsive: true,
    tooltips: {
      enabled: true,
      callbacks: {
        label: function (tooltipItem, data) {
          let label = data.labels[tooltipItem.index];
          let count: any = data
            .datasets[tooltipItem.datasetIndex]
            .data[tooltipItem.index];
          return label + ": " + new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(count);
        },
      },
    },
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          let sum = 0;
          let dataArr = ctx.chart.data.datasets[0].data;
          dataArr.map(data => {
            sum += data;
          });
          let percentage = (value * 100 / sum).toFixed(2) + "%";
          return percentage;
        },
        color: '#fff',
      }
    }
  };

The result is:

enter image description here

Unfortunately the plugin I'm using at the [options] input is not working. How could I solve this?

Andre
  • 431
  • 7
  • 23
  • did you include the plugin library? – WhiteHat Dec 03 '20 at 12:31
  • @WhiteHat Sorry I didn't include it. I didn't know that a install of a plugin was needed. I installed this plugin chartjs-plugin-datalabels by running npm i chartjs-plugin-datalabels and now it's working... Thank you! – Andre Dec 04 '20 at 00:52
  • Cheers! glad you were able to resolve... – WhiteHat Dec 04 '20 at 01:46

2 Answers2

1

I solved this by doing the following:

npm i chartjs-plugin-datalabels

Component:

import * as pluginDataLabels from 'chartjs-plugin-datalabels';

public chartPlugins = [pluginDataLabels];

  optionsGraficoDespesa: ChartOptions = {
    responsive: true,
    tooltips: {
      enabled: true,
      callbacks: {
        label: function (tooltipItem, data) {
          let label = data.labels[tooltipItem.index];
          let count: any = data
            .datasets[tooltipItem.datasetIndex]
            .data[tooltipItem.index];
          return label + ": " + new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(count);
        },
      },
    },
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          let sum = 0;
          let dataArr: any[] = ctx.chart.data.datasets[0].data;
          dataArr.map((data: number) => {
            sum += data;
          });
          let percentage = (value * 100 / sum).toFixed(2) + "%";
          return percentage;
        },
        color: '#fff',
      }
    }
  };

HTML

<canvas baseChart data]="dashboard.graficoDespesaMensal.valorTotalDespesa"
[labels]="dashboard.graficoDespesaMensal.descricaoCategoria" [options]="optionsGraficoDespesa" [plugins]="chartPlugins"[chartType]="'doughnut'">

Result:

enter image description here

Andre
  • 431
  • 7
  • 23
0

Install:

 npm install chartjs-plugin-labels

Add this in your component.ts file:

import 'chartjs-plugin-labels';

In your chart options, add:

plugins: {
  labels: {
    render: 'percentage',
    fontColor: 'white',
    fontSize: 10,
  },
},
Mahima Goyal
  • 1
  • 3