How do I format the text in a `hover` tooltip of a Slate Bar Chart?

Question

In my bar chart, I have large numbers that are hard to read quickly. I'd like to add commas to make it more readable.

For example: 123456789 --> 123,456,789

How do I do this in Slate?

Answer 1

Under the "Misc" section of the widget editor, you can configure the format of your chart tooltips. The input accepts handlebars, so you can use the formatNumber helper to template a tooltip based on the bar chart hover value:

{{formatNumber w_chart.hover.yValue '0,0'}}

From the Slate documentation (Slate > References > Helper reference): formatNumber The formatNumber helper format any given number to a string using the Numeral.js (http://numeraljs.com/) library. Note that the value must be a number and the format must be a string.

Example: Using formatNumber on a number:

{{formatNumber 1400 '0,0'}} # renders to "1,400"

For more examples of formating a number, please check the Numeral.js library.