dataLabels format

[martinfruehmorgen]

Hello, Thank you so much for this library!

Is there a way to add a custom format for the dataLabels here:

dataLabels: {
  show: true,
  adaptColorToBackground: true,
  color: '#1A1A1A',
  fontSize: 11,
  bold: false,
  rounding: 2,
  prefix: '',
  suffix: ' €'
}

If I have series f.e. with [200100,20, 29111,12] I would like to have it displayed like this: 200.100,20 € 291.11,12 €

With the options we have I think this is not possible?

Thanks! Martin

[graphieros]

Hi @martinfruehmorgen :)

Numbers are currently formatted toLocaleString with the default implementation (no locale param passed).

Thank you for your question. Locale can be an additional config option to add to all charts with dataLabels. I'll let you know when it is rolled out.

Cheers

[martinfruehmorgen]

Thank you! I think it would be a great option to customize the label with a callback like with echarts https://echarts.apache.org/en/option.html#series-line.label.formatter

Thanks! Martin

[graphieros]

Yes, that's what I was thinking too:) I'll keep you posted when the change is rolled out.

[graphieros]

Hi @martinfruehmorgen

You can upgrade to v2.3.30, which adds the formatter config option in config objects.

formatter is a callback exposing a value and a config you can leverage to customize data labels:

const config = ref({
  // The formatter attribute is generally located in labels or dataLabels attributes, you can find them in the docs
  formatter: ({ value, config }) => {
    // the config param gives additional data you may require in some cases
    return `my format: ${value.toLocaleString('de-DE')}`;
  }
});

Documentation website is up to date.