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

Chart.defaults.global y AXIS/Tooltip Formating Example #3294

Closed
cgountanis opened this issue Sep 12, 2016 · 5 comments
Closed

Chart.defaults.global y AXIS/Tooltip Formating Example #3294

cgountanis opened this issue Sep 12, 2016 · 5 comments

Comments

@cgountanis
Copy link

cgountanis commented Sep 12, 2016

Can I please get an example of using the global options to setup a simple comma formatted Y and tooltip label? I am not able to get anything to work right.

@etimberg
Copy link
Member

@cgountanis what are you looking to achieve?

@cgountanis
Copy link
Author

I was hoping that I could get away with using a global setting to set the y
axis and the tool tips with in the chart. I have a web service that
generates the Json file it's just kind of a pain to alter it after the
fact. Mostly numbers with commas, formatting. Honestly I think it should be
built in maybe within the dataset or the access different types of settings
is it a dollar format do you want to see commas things like that I think
people would use the heck out of it.

On Sep 12, 2016 6:46 PM, "Evert Timberg" notifications@github.com wrote:

@cgountanis https://github.com/cgountanis what are you looking to
achieve?


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#3294 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AONaaadKlsD-Lrmghk2lu_j_EzRVAtRLks5qpeRLgaJpZM4J6x5n
.

@etimberg
Copy link
Member

You can definitely use global options to control that.

For instance, here's how you would update so that all linear scales (the default Y axis) will format using dollar signs and nice numbers

Chart.scaleService.updateScaleDefaults('linear', {
  ticks: {
    callback: function(tick) {
      return '$' + tick.toLocaleString();
    }
  }
});

Here's how you could also do the same for a tooltip

Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {
  var dataset = data.datasets[tooltipItem.datasetIndex];
  var datasetLabel = dataset.label || '';
  return datasetLabel + ": $" + dataset.data[tooltipItem.index].toLocaleString();
});

I've hesitated to push to include these in the core because there are so many different options and trying to support each and every one would dramatically increase the size of the already large library. It may make sense to encourage someone to create a library of formatters that essentially automates the creation of these functions to speed up development.

@cgountanis
Copy link
Author

cgountanis commented Sep 13, 2016

I am leaving the stack post here including working JSFiddle which might help others someday.

http://stackoverflow.com/questions/39453720/chart-js-globally-formatted-number-labels

@etimberg
Copy link
Member

Thanks @cgountanis

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

2 participants