Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is possible to define separator, in French thousand separator as made by space and not comma ? #4180

Closed
zairino opened this issue Oct 5, 2016 · 12 comments

Comments

@zairino
Copy link

zairino commented Oct 5, 2016

问题简述 (One-line summary)

版本及环境 (Version & Environment)

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

重现步骤 (Steps to reproduce)

期望结果 (Expected behaviour)

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

ECharts配置项 (ECharts option)

option = {

}

其他信息 (Other comments)

@pissang
Copy link
Contributor

pissang commented Oct 8, 2016

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

@pissang pissang closed this as completed Oct 8, 2016
@zairino
Copy link
Author

zairino commented Oct 8, 2016

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
Copy link

astik commented May 6, 2018

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
Copy link

astik commented May 7, 2018

One thing to consider as an easy fix : toLocaleString

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

@maljac
Copy link

maljac commented Jun 4, 2020

@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
Copy link

astik commented Jun 4, 2020

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

@pynomaly
Copy link

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

@develar
Copy link

develar commented Feb 24, 2021

There is no possibility to provide own implementation of makeValueReadable. There is the only way — to set formatter, but in this case you loose default excellent presentation and have to duplicate it somehow.

@Vovan-VE
Copy link

Intl.NumberFormat?

@Vovan-VE
Copy link

There are lots of variations for thousand and decimal separators across different languages. For example, seeing 12345.0 as "12,345" instead of "12 345" is very confusing for cyrillic languages since "12,345" means 12.345 .

@develar
Copy link

develar commented Feb 27, 2021

@Vovan-VE Yes, in my app I use Intl.NumberFormat / Intl.DateTimeFormat. Issue is that 1) you cannot easily set it globally (#8294) 2) for tooltip. formatter you have to duplicate a lot of complex logic, because you want standard tooltip with just changed number/time formatting.

Probably, it is easy to send PR, maybe I will do it when I will finish my app.

@irbian
Copy link

irbian commented Nov 17, 2023

We are experimenting this too. We can see it has been mentioned in other issues like #14516 , #17419 and #18264

@Vovan-VE Yes, in my app I use Intl.NumberFormat / Intl.DateTimeFormat. Issue is that 1) you cannot easily set it globally (#8294) 2) for tooltip. formatter you have to duplicate a lot of complex logic, because you want standard tooltip with just changed number/time formatting.

Probably, it is easy to send PR, maybe I will do it when I will finish my app.

Did you were able to make the PR?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants