4

I'm building an API to create ECharts configs and would like the data labels to appear in the correct format based on where the end user is reading the chart from.

For example, if a number in a chart is 10,000 I would like it to appear as 10,000 in North America and 10.000 in Europe.

It looks like it's not possible to set a global format in ECharts, so I will need to use the formatter option. I thought this would be as simple as passing in a function that uses JavaScript's toLocaleString() or Intl.NumberFormat, but the ECharts docs make this look much more complicated.

I haven't found any examples of formatter that show both the inputs and outputs for common formatting scenarios, so I'm hoping to get some help in understanding the right way to do this.

Below is a very simple example of the function I'm hoping to include in formatter, but this particular example doesn't work.

formatter: function(d){
   return d.toLocaleString()
}
hughess
  • 121
  • 1
  • 6

1 Answers1

6

Answering my own question so someone who needs this info can find it in the future. It turned out to be very simple, but I couldn't find a simple example like this anywhere!

Because ECharts was already displaying a value as a default label on my chart, I assumed that any function I included in formatter would use that value (that's the assumption in the simple function in my question).

I learned that when you add a function to formatter, it doesn't use the default value automatically. You need to pass in a specific reference to a piece of data using their params dataset.

In my example, I needed to use params.value to access the data I needed. My series dataset also includes both x and y columns in an array, so I needed to reference only one of the columns to get the labels to work.

params is detailed in the ECharts docs, but in the series type sections, it wasn't clear (at least to me) how to use it.

Here's what a simplified version of my working function looks like:

formatter: function(params){
   let label = params.value[1] // this is my y column
   return label.toLocaleString()
}
hughess
  • 121
  • 1
  • 6