Incubator-echarts: Is possible to define separator, in French thousand separator as made by space and not comma ?

[zairino]

问题简述 (One-line summary)

版本及环境 (Version & Environment)

• ECharts 版本 (ECharts version):
• 浏览器类型和版本 (Browser version):
• 操作系统类型和版本 (OS Version):
  

  重现步骤 (Steps to reproduce)

1.
2.

期望结果 (Expected behaviour)

可能哪里有问题 (What went wrong)

ECharts配置项 (ECharts option)

option = {

}

其他信息 (Other comments)

[pissang]

Yes you can format the label by yourself using the formatter option

[zairino]

Not the label @pissang the thousand separator i hack this part of your js file :

function addCommas(x) {
 if (isNaN(x)) {
 return '-';
 }
 x = (x + '').split('.');
 return x[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1 ') + (x.length > 1 ? '.' + x[1] : '');
}

so if you can add in some options the ability to define the thousandSeparator ;)

[astik]

Hi all,
I run into the same issue with the current latest version.

It is too bad that the default formatter use an hardcoded function like addCommas to format numbers. Of course, we can redefine the formatter for each use case (xAxis.axisLabel, xAxis.axisPointer.label, yAxis.axisLabel, yAxis.axisPointer.label, ...) but this is a lot of work for a default behavior. At least, it should use browser locale to define which ways to format number.

Here is an example :

option = {
    tooltip: {
        trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value}'
        },
        axisPointer: {
            label:{
                formatter: function(a){return a.value.toFixed(2)}
            }
        }
    },
    series: [
        {
            name:'A',
            type:'line',
            data:[120000.5, 132000.5, 101000.5, 134000.5, 90000.5, 230000.5, 210000.5]
        },
        {
            name:'B',
            type:'line',
            data:[220000.5, 282000.5, 201000.5, 234000.5, 290000.5, 430000.5, 410000.5]
        }
    ]
};

As you can see, i redefined formater for yAxis.axisLabel and yAxis.axisPointer.label. Still, i need to do it also for tooltip content. As i'm working with multi-series, the tooltip is different than the other and is much more complicated.

Redefining the formatter should be a workaraound but it shouldn't be enough to close this issue =/

(you can drop the example above into the editor on : https://ecomfe.github.io/echarts-examples/public/editor.html) to see the issue.

[astik]

One thing to consider as an easy fix : toLocaleString

• cn : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
• en : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

It would display number the right way by default depending on environment locale.

[maljac]

@pissang I think the issue is still there:
https://github.com/apache/incubator-echarts/blob/7887f27a0ff47611d84109f9c9b202b8eaa31094/src/util/format.js#L30

As @astik mentions, it is a lot of work to redefine all formatters for the proper display of the correct thousand / decimal separator.

[astik]

Another issue relative to this one : #8294 (it also have been closed by stale bot ='()

[pynomaly]

I'm also interested in a simpler way to display the correct number format. @pissang Is there any advance in this issue?