Formatter doesn't work even using version 4

1

Hi there!

I’m trying to create a chart and I want to add to the labels the correct currency, and show it like that

But the formatter does not work, no matter what I do:

Can anyone help me please?

This is my code:

const chartData = {
        type: 'bar',
        data: {
          labels: formattedLabels,
          datasets: [
            {
              data: data,
              backgroundColor: [
                '#FF6384',
                '#36A2EB',
                '#FFCE56',
                '#4BC0C0',
                '#9966FF',
                '#FF9F40',
                '#00FF00',
                '#FFA500',
                '#800080',
                '#FFFF00',
                '#008080',
                '#FF00FF',
                '#800000',
                '#00FFFF',
                '#006400',
                '#FFC0CB',
                '#808000',
                '#4B0082',
                '#A52A2A',
                '#40E0D0',
              ],
              borderWidth: 1,
              maxBarThickness: 50,
              minBarLength: 2,
            },
          ],
        },
        options: {
          indexAxis: 'y',
          plugins: {
            legend: {
              display: false,
            },
            title: {
              display: true,
              text: 'Revenue Distribution by Product So Far This Month',
              color: 'black',
              font: {
                size: 10,
              },
            },
            datalabels: {
              formatter: function (value: any) {
                return '$' + value
              },
              align: 'right',
              anchor: 'end',
              color: 'black',
              font: {
                size: 8,
                weight: 'bold',
              },
              padding: 4,
            },
          },
          scales: {
            x: {
              display: false,
              min: 0,
              max: Math.max(...data) * 1.1,
              grid: {
                display: false,
              },
            },
            y: {
              grid: {
                display: true,
              },
              ticks: {
                color: 'black',
                font: {
                  size: 8,
                  style: 'normal',
                },
              },
            },
          },
          layout: {
            padding: {
              right: 30,
            },
          },
        },
      }

      const encodedChartData = encodeURIComponent(JSON.stringify(chartData))
      return `https://quickchart.io/chart?c=${encodedChartData}&backgroundColor=white&version=4`

the charts gets generated but the values are not updating

I’m using typescript

2

Hi @NicollG, please have a look at Using Javascript functions | QuickChart

The formatter is a Javascript function, so it is not sufficient to JSON.stringify it. Instead, you have to specify the chart as a string (or any of the other solutions outlined in the doc).