Thanks for reporting this. I agree the rounded values in this scenario are not particularly useful (actually, they are misleading). Maybe this is just a tweak we need to make for Swedish?

In T383109#10449769, @CCiufo-WMF wrote:

Thanks for reporting this. I agree the rounded values in this scenario are not particularly useful (actually, they are misleading). Maybe this is just a tweak we need to make for Swedish?

If you use ?uselang=en you'll see the same problem (1 K, 3 K, 5 K) so it's not only Swedish affected.

I am thinking that the pop-up never needs to do any rounding, but can always show the raw values, in all languages.

In T383109#10450650, @Ainali wrote:

I am thinking that the pop-up never needs to do any rounding, but can always show the raw values, in all languages.

Yeah I'd agree with this, or at least not as aggressive rounding.

Excessive rounding also affects the tick labels for certain charts, see example image. The ticks are spaced 300 apart, but 1,200,000 gets rounded to 1M while 1,500,000 and 1,800,000 both get rounded to 2M.

Could a temporary solution be to avoid rounding to a single digit and do 1.2M, 1.5M and 1.8M instead? That should at least fix most tick labels, I believe. And it's still only three characters, including the decimal point.

Here's another example of a chart that is behaving strangely, but this time it's the dates on the x axis being treated as "thousands".

There are multiple issues here:

1. Years being formatted as numbers
2. The axis does not autoscale the min and max values
3. There still is the issue of the y axis numbers and the label overlapping in some cases
4. Number rounding issues
5. Number abbreviated formatting when hovering over data points/values

Year formatting

For date formatting, the chart service expects dates like "2024-02-20" and not "2024"

When there are year values, they are being treated as numbers. (e.g. https://commons.wikimedia.org/wiki/Data:New_Zealand_Annual_Wine_Production.chart)

Maybe we could add a chart definition option for the xAxis and yAxis, to specify the formatter?

"xAxis": {
    "title": {
        "en": "Year"
    },
    "formatter": "year"
},

and could have various options available like Year. Also there could be formatting with units (e.g. temperature, percent)

Axis min and max

echarts supports autoscaling the axis, with the axis min relative to the values (with some buffer)

e.g. for min and max:

min: function (value) {
    return value.min - 20;
}

https://echarts.apache.org/en/option.html#xAxis.min

Y axis label and number overlap

This still requires more investigation, but perhaps we can add configuration options in the chart definition.

Number rounding

Rounding the numbers is not appropriate in all cases. If the values are more precise decimal values (e.g. 0.000037) then the rounding is not appropriate.

Number abbreviated formatting when hovering

The values when hovering do not need the abbreviated formatting

There should be a variation of the number formatter or option

Also, if we start defining parts of the echarts spec with functions, then what is the best way to share such things with client-side rendering? methods like these are removed from the spec that is passed in the data attribute.

min: function (value) {
    return value.min - 20;
}

There also is an option "scale" for the x and y axis that we can set to true.

https://echarts.apache.org/en/option.html#xAxis.scale

This leaves no buffer space but maybe that is okay.

For the original issue raised on this task, I've filed T386028: Make number formatting in Charts configurable.

For some of the other issues uncovered, I've spun out a few new tasks:

• T386024: Support a "year" type in charts
• T386027: Support autoscaling of chart axes

I'll leave this task open in the backlog until the original issue is reasonably addressed.

I'm wondering if the formatting option introduced T386028 should control the tooltip or just the axis. Maybe the tooltip should never be formatted, which would resolve the original request of this task without losing the ability to keep the axis labels clean.

Looking into some more examples, maybe we leave things as-is.

Here's a chart used on itwiki that showcases the auto formatting well. The example in the task description probably should remain unformatted as @Jdlrobson-WMF mentions above.