Chartjs-Chart js custom datalabel from array

by

1👍

✅

you where so close to the solution.

So first things first you don’t need that var percentage, we will change your function calculate a bit, and also finalize that plugin...formatter.

If you wanna skip all this JSFiddle for the whole changed code.

Basically the formatter can give you the current object, which will include the dataIndex that we can use on the calculate function rather than looping all datasets every time.

function calculate(i){
    return (data1[i] / data2[i] * 100)
}

Note: argument ” i ” will be passed from the formatter (chart_obj.dataIndex).

The formater will look like this, note the second argument chart_obj

formatter: function(context, chart_obj) {
    return calculate(chart_obj.dataIndex); //pass the current data index to calculate
}

Lastly we need to set the second datalabels.display = true

more above ...
data: data2,
//  xAxisID: "bar-x-axis1",
datalabels: {
  display: true,
}
... more bellow

Hope this will help!

Good Coding

EDIT

Using the plugin option changes the data for ALL labels, for this case I placed the formatter directly on the dataset

{
data: data2,
//  xAxisID: "bar-x-axis1",
datalabels: {
  display: true,
  formatter: function(context, chart_obj) {
    return calculate(chart_obj.dataIndex)
  },
}

Leave a comment