Issue with displaying data labels in Chart.js when using a custom formatter

Question

Issue with displaying data labels in Chart.js when using a custom formatter

I'm having trouble getting the datalabels plugin to work with Chart.js. No labels are showing up on my graph, even though I am using version 2.9.0 of Chart.js.

Here is my code:

var ctx = this.pieChartRef.nativeElement;
    this.pieChart = new Chart(ctx, {
      type: 'pie',
      data: {
        labels: Object.keys(pieData),
        datasets: [
          {
            data: Object.values(pieData),
            backgroundColor: random,
          },
        ],
      },
      options: {
        legend: {
          position: 'bottom',
          display: true,
        },
        plugins: {
          datalabels: {
            color: '#fff',
            display: true,
            formatter: function (value, ctx) {
              let sum = 0;
              let dataArr: number[] = ctx.chart.data.datasets[0]
                .data as number[];
              dataArr.map((data) => {
                sum += data;
              });
              return ((value * 100) / sum).toFixed(2) + '%';
            },
          },
        },
      },
    });

Even when I simplify the formatter code to just return value + '%';, still no datalabels appear. Can anyone offer some guidance? I'm at a loss!

Appreciate any help in advance.

angular typescript chart.js

Answer 1

Answer №1

Initially, the issue at hand is not tied to specific versions (like 2.7 versus 2.9, etc.). In essence, it would be beneficial to include a demo.

It seems like you aim to have the data [5,5] displayed as 50%, 50% and [3,3,3] represented as 33% / 33% / 33%.

Your problem appears to revolve around calculations.

The sum seems "buggy" (log its value to the console). The callback runs more than once (once for each label) - leading to repetitive array declarations inside a loop.

let dataArr: number[] = ctx.chart.data.datasets[0].data as number[];
dataArr.map((data) => {
  sum += data;
});

This sample functions properly (without nested loops):

var pieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['January', 'February'],
    datasets: [{
      label: 'My First dataset',
      data: [5, 10],
      backgroundColor: ["red", "blue"]
    }]
  },
  options: {
    legend: {
      position: 'bottom',
      display: true,
    },
    plugins: {
      datalabels: {
        color: '#fff',
        display: true, 
        formatter: function (value, ctx) {
          return ((value * 100) / total(ctx)).toFixed(2) + '%';
        },
      },
    },
  },
})

function total(chart){
  let data = chart.chart.data.datasets[0].data;
  const reducer = (accumulator, currentValue) => accumulator + currentValue;
  var total = data.reduce(reducer);
  return total;
}

<div id="wrapper">
  <canvas id="ctx" width="500" height="450"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4878c859690ca8e97a4d6cadccad4">[email protected]</a>"></script>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9d969f8c8a948dd38e928b999790d39a9f8a9f929f9c9b928dbeced0c9d0ce">[email protected]</a>/dist/chartjs-plugin-datalabels.min.js"></script>

DRY

The code above also exhibits some degree of repetitiveness - by declaring the data outside the chart.js object, you could compute the data total just once.

var data = [4, 9, 5, 2];
/* calculate total */
const reducer = (accumulator, currentValue) => accumulator + currentValue;
var total = data.reduce(reducer);

var pieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['January', 'February', 'March', 'April'],
    datasets: [{
      label: 'My First dataset',
      data: data,
      backgroundColor: ["red", "blue", "green", "violet"]
    }]
  },
  options: {
    legend: {
      position: 'bottom',
      display: true,
    },
    plugins: {
      datalabels: {
        color: '#fff',
        display: true, 
        formatter: function (value, ctx) {
          return ((value * 100) / total).toFixed(2) + '%'; 
        },
      },
    },
  },
})

<div id="wrapper">
  <canvas id="ctx" width="500" height="450"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accfc4cdded882c6dfec9e8294829c">[email protected]</a>"></script>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7013181102041a035d001c0517191e5d141104111c1112151c0330405e475e40">[email protected]</a>/dist/chartjs-plugin-datalabels.min.js"></script>

To make it more DRY/modular (for changing data), encapsulate the total data in a function and so forth.

Answer 2

Initially, the issue at hand is not tied to specific versions (like 2.7 versus 2.9, etc.). In essence, it would be beneficial to include a demo.

It seems like you aim to have the data [5,5] displayed as 50%, 50% and [3,3,3] represented as 33% / 33% / 33%.

Your problem appears to revolve around calculations.

The sum seems "buggy" (log its value to the console). The callback runs more than once (once for each label) - leading to repetitive array declarations inside a loop.

let dataArr: number[] = ctx.chart.data.datasets[0].data as number[];
dataArr.map((data) => {
  sum += data;
});

This sample functions properly (without nested loops):

var pieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['January', 'February'],
    datasets: [{
      label: 'My First dataset',
      data: [5, 10],
      backgroundColor: ["red", "blue"]
    }]
  },
  options: {
    legend: {
      position: 'bottom',
      display: true,
    },
    plugins: {
      datalabels: {
        color: '#fff',
        display: true, 
        formatter: function (value, ctx) {
          return ((value * 100) / total(ctx)).toFixed(2) + '%';
        },
      },
    },
  },
})

function total(chart){
  let data = chart.chart.data.datasets[0].data;
  const reducer = (accumulator, currentValue) => accumulator + currentValue;
  var total = data.reduce(reducer);
  return total;
}

<div id="wrapper">
  <canvas id="ctx" width="500" height="450"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4878c859690ca8e97a4d6cadccad4">[email protected]</a>"></script>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9d969f8c8a948dd38e928b999790d39a9f8a9f929f9c9b928dbeced0c9d0ce">[email protected]</a>/dist/chartjs-plugin-datalabels.min.js"></script>

DRY

The code above also exhibits some degree of repetitiveness - by declaring the data outside the chart.js object, you could compute the data total just once.

var data = [4, 9, 5, 2];
/* calculate total */
const reducer = (accumulator, currentValue) => accumulator + currentValue;
var total = data.reduce(reducer);

var pieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['January', 'February', 'March', 'April'],
    datasets: [{
      label: 'My First dataset',
      data: data,
      backgroundColor: ["red", "blue", "green", "violet"]
    }]
  },
  options: {
    legend: {
      position: 'bottom',
      display: true,
    },
    plugins: {
      datalabels: {
        color: '#fff',
        display: true, 
        formatter: function (value, ctx) {
          return ((value * 100) / total).toFixed(2) + '%'; 
        },
      },
    },
  },
})

<div id="wrapper">
  <canvas id="ctx" width="500" height="450"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accfc4cdded882c6dfec9e8294829c">[email protected]</a>"></script>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7013181102041a035d001c0517191e5d141104111c1112151c0330405e475e40">[email protected]</a>/dist/chartjs-plugin-datalabels.min.js"></script>

To make it more DRY/modular (for changing data), encapsulate the total data in a function and so forth.

Issue with displaying data labels in Chart.js when using a custom formatter

Answer №1

DRY

Similar questions

What is the way to declare a prop as optional in Svelte using TypeScript?

Tips on sending parameter values in a request to a server

Having trouble retrieving the parent object in Angular OnInit method?

I am looking to include both a space and a comma in the State dropdown value in an Angular application

Looking to refine the search in a table for numerical values instead of strings?

Utilize TypeScript to import a JSON file

Transitioning Ionic2 RC0 - relocating custom libraries to the build directory after the removal of gulp

What could be causing the problem between typescript and Prisma ORM as I attempt to locate a distinct item?

Should I write out the typescript .d.ts file by hand or generate it automatically

Show the string representation of the enum instead of its numerical value

Passing properties from a parent component to a child component in a React TypeScript application

Struggle with Transmitting Information in Ionic 2

Error Type: When attempting to subscribe to the notification event service, a TypeError occurred in the code

Set the input cursor to the next input in Angular. Note that the next input tag will be dynamically added when the Enter key is pressed in the previous input

Tips for utilizing generics to determine the data type of a property by its name

What could be causing my Angular application to go blank when I activate a rotation animation in my component.ts file?

In the Next.js environment, the utilization of chartjs's cutoutPercentage and tooltips features may not

Interacting with an iframe within the same domain

Lazy loading in Angular allows you to navigate directly to a certain feature component

The imagemin code runs successfully, however, there appears to be no noticeable impact