Angular ng2-charts show empty label

55 Views Asked by At

I am starting to use ng2-charts in angular, and when generating a pie chart, it shows me a label at 0, at the top of the pie chart.

This is the configuration part of the piechart

pieChartData: ChartData<'pie', number[], string | string[]> = {
    labels: [['Bills Payed'], ['Bills Outstanding']],
    datasets: [{ data: [this.payed, this.outstanding] }],
  };
pieChartOptions: ChartConfiguration['options'] = {
    responsive: true,
    maintainAspectRatio: true,
    aspectRatio: 1,
    plugins: {
      legend: {
        display: true,
        position: 'bottom',
        fullSize: false,
        maxWidth: 200,
        labels: {
          font: { lineHeight: 2, size: 13 },
        },
      },
      title: {
        padding: 0,
        display: true,
        text: 'Bills Chart',
        position: 'left',
        font: {
          size: 20,
        },
      },
      datalabels: {
        formatter: (value: any, ctx: any) => {
          if (ctx.chart.data.labels) {
            return '$' + value;
          } else return '';
        },
        font: { size: 20 },
      },
    },
  };

ng2-charts pie charts show extra label with empty data

I was making changes in the datalabels plugin but without success. If I deactivate the datalabels, that label no longer appears, but neither do the labels inside the footer chart, so I suppose it is an incorrect datalabels configuration.

0

There are 0 best solutions below