Tickformat not working with ChartJs v4

1

Hi there,

I couldn’t get tickformat to work properly with ChartJs v4. It works with v2 though, but there I can’t get enough spacing between chart and legend…anybody a valid example of using tick format?

{
  type: 'pie',
  data: {
    labels: ['A', 'B'],
    datasets: [{ data: [150000, 6000] ,
    backgroundColor: ['#2C3C5B','#0AC5A8'],
    borderWidth: 3}]
  },
  options: {
    layout: {
        padding: 30
    },
    plugins: {
      tickFormat: {
        notation: 'EUR ',
        locale: 'en-US',
      },
      legend: {
            labels: {
              padding: 20
            },
            position: 'bottom'
      },
      datalabels: {
        anchor: 'end',
        align: 'center',
        color: '#FFFFFF',
        backgroundColor: '#869CB8',
        borderColor: '#5E738E',
        borderWidth: 1,
        borderRadius: 5,
      },
    }
  },
}
2

Does tickformat work with ChartJs v4? Or is this not supported?

3

Hi @mstohr,

tickFormat is not supported on v3+ at the moment. This is something we plan to fix pretty soon (most likely this coming week).

As an alternative, you can use the ticks.callback method to format the values (see Chart.js documentation). For example:

  options: {
    scales: {
      y: {
        ticks: {
          callback: function (value, index, ticks) {
            return '€' + value;
          },
        },
      },
    },
  },

Link to chart editor

image
image1000×600 21 KB

Ian

4

Many thx for your feedback…this is great news, happy to wait for.

5

Hi @mstohr, tickFormat is now supported in Chart.js v3 and v4.

Here’s your working example in the chart editor with the following tickFormat options:

      tickFormat: {
        style: 'currency',
        currency: 'EUR',
        locale: 'en-US',
      },
6

Wow :+1: thx…will test it end of the week

7

Tested it :+1::clap:many thanks, Ian for your support

1 Like