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

Thousands seperator #411

Closed
becktowery opened this Issue Jul 2, 2014 · 8 comments

Comments

7 participants
@becktowery
Copy link

becktowery commented Jul 2, 2014

How can I implement the thousands separator shown last year into the latest build? Thanks!

@toncid

This comment has been minimized.

Copy link

toncid commented Jul 11, 2014

You can vote for #438 and then use the template field as a function that will produce the necessary output.

@nnnick

This comment has been minimized.

Copy link
Member

nnnick commented Aug 17, 2014

👍 #438 is merged and released so you should be able to do this.

Something like this should do the trick:

scaleLabel: function(label){return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}
@googol7

This comment has been minimized.

Copy link

googol7 commented Oct 31, 2014

Is that possible to have a thousands separator for the tooltips as well?

// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",

// String - Template string for single tooltips
multiTooltipTemplate: "<%= value %>",

BTW: The comment above multiTooltipTemplate says: "Template string for single tooltips" here: http://www.chartjs.org/docs/#getting-started-global-chart-configuration

@googol7

This comment has been minimized.

Copy link

googol7 commented Oct 31, 2014

got it:

Chart.defaults.global.multiTooltipTemplate = function(label){
return label.datasetLabel + ': ' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
};

@googol7

This comment has been minimized.

Copy link

googol7 commented Oct 31, 2014

here's the final example including thousands separators for tooltips: http://jsbin.com/jihadu/1/edit?html,js,output

@artdias90

This comment has been minimized.

Copy link

artdias90 commented Aug 24, 2015

+1

1 similar comment
@urtzai

This comment has been minimized.

Copy link

urtzai commented Feb 9, 2016

+1

@m98

This comment has been minimized.

Copy link

m98 commented Mar 25, 2017

I'm using Angular Chart.js (Anyway; it's Chart.js) here is how I thousand separate the tooltip number:

$scope.chartOption = {
            tooltips: {
                enabled: true,

                callbacks: {
                    label: function (tooltipItems, data) {
                        return data.datasets[tooltipItems.datasetIndex].label + ' : ' + tooltipItems.yLabel.toLocaleString();
                    }
                }
            }
          }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.