How to display the data label together with the value

[whschopke98]

I'd like to know if it's possible to access the data label to compose a custom label with the datalabels plugin.
For example. if I have the following data and labels

  "data": {
    "labels": ["One","Two","Three"],
    "datasets": [{
        "backgroundColor": ["#b7dee8", "#fbd8bb", "#ebf1e9"],
        "borderColor": "grey",
        "borderWidth" : 1,
        "data": [11.11, 22.22, 33.33 ]
    }]
  }

How would I proceed to have the displayed labels be: "One: 11.11%", "Two: 22.22%" and "Three: 33.33%" ?

[simonbrunel]

You would use the formatter option, something like:

options: {
  plugins: {
    datalabels: {
      formatter: (v, ctx) => `${numberInLetters(ctx.dataIndex)} ${v}%`
    }
  }
}

[whschopke98]

Sorry, I think my example misdirected your help.
I meant that I want the actual label to appear before the data value.
"One, Two, Three" were just examples. I guess "Foo, Bar, Foobar" would have been better.

But I was able to solve based on your lead:

options: {
  plugins: {
    datalabels: {
      formatter: function(v, ctx) {
          return `${ctx.chart.data.labels[ctx.dataIndex]} ${(v*100).toFixed(1)}%`;
          }
    }
  }
}

[simonbrunel]

Haha 😄 I somehow missed the data.labels option from your first message.

Here is a similar example: https://chartjs-plugin-datalabels.netlify.app/samples/advanced/custom-labels.html

[whschopke98]

Ohh I didn't see this example, thank you very much!