Chart.js number format

Ronald

I went over the Chart.js documentation and did not find anything on number formatting ie) 1,000.02 from number format "#,###.00"

I also did some basic tests and it seems charts do not accept non-numeric text for its values

Has anyone found a way to get values formatted to have thousands separator and a fixed number of decimal places? I would like to have the axis values and values in the chart formatted.

Yacine B

There is no built-in functionality for number formatting in Javascript. I found the easiest solution to be the addCommas function on this page.

Then you just have to modify your tooltipTemplate parameter line from your Chart.defaults.global to something like this:

tooltipTemplate: "<%= addCommas(value) %>"

Charts.js will take care of the rest.

Here's the addCommas function:

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Chart.js number Y-AXIS label format for many decimal places

From Dev

Number format for Angular JS

From Dev

How to change format of the number displayed in Google Chart?

From Dev

Google calendar chart number format in tooltip

From Dev

How to change format of the number displayed in Google Chart?

From Dev

Google calendar chart number format in tooltip

From Dev

Number format in Google Chart Treemap Tooltip

From Dev

How to export a chart in Excel and PDF format using Chart.js

From Dev

Format Bar Chart's yAxis labels in Chart.js

From Java

Limit labels number on Chart.js line chart

From Dev

Inverting X axis number labels in chart.js scatter chart

From Dev

JS - Format number with 2 decimal not rounded

From Dev

number_format function of php and calculate with js

From Dev

JS - Format number with 2 decimal not rounded

From Dev

format numbers in Y-axis at Angular Chart.js

From Dev

Chart line morris.js format date in X axis

From Java

How to show thousand in k format for bar values in chart.js

From Dev

Laravel 5.1 format date array for chart.js data

From Dev

Draw Chart using Dimple JS with DSV format data

From Dev

Format X label on mouse hover in chart.js

From Dev

format JSON data for chart.js from Angular 4 observable

From Dev

Set min, max and number of steps in radar chart.js

From Dev

PrimeNG/Chart.js - max Number of labels to show

From Dev

PrimeNG/Chart.js - max Number of labels to show

From Dev

Plotly js chart hover text not displaying correct number values

From Dev

Bars chart for different number of bars in D3.js

From Java

Pie Chart Apache POI (4.1.1) - How to get the number format of data labels to 0,00

From Dev

How to change the display value format from float value to whole number in sparkline chart?

From Dev

Google charts Column Chart, Is it possible to show y axis and bar values in Indian number format?

Related Related

  1. 1

    Chart.js number Y-AXIS label format for many decimal places

  2. 2

    Number format for Angular JS

  3. 3

    How to change format of the number displayed in Google Chart?

  4. 4

    Google calendar chart number format in tooltip

  5. 5

    How to change format of the number displayed in Google Chart?

  6. 6

    Google calendar chart number format in tooltip

  7. 7

    Number format in Google Chart Treemap Tooltip

  8. 8

    How to export a chart in Excel and PDF format using Chart.js

  9. 9

    Format Bar Chart's yAxis labels in Chart.js

  10. 10

    Limit labels number on Chart.js line chart

  11. 11

    Inverting X axis number labels in chart.js scatter chart

  12. 12

    JS - Format number with 2 decimal not rounded

  13. 13

    number_format function of php and calculate with js

  14. 14

    JS - Format number with 2 decimal not rounded

  15. 15

    format numbers in Y-axis at Angular Chart.js

  16. 16

    Chart line morris.js format date in X axis

  17. 17

    How to show thousand in k format for bar values in chart.js

  18. 18

    Laravel 5.1 format date array for chart.js data

  19. 19

    Draw Chart using Dimple JS with DSV format data

  20. 20

    Format X label on mouse hover in chart.js

  21. 21

    format JSON data for chart.js from Angular 4 observable

  22. 22

    Set min, max and number of steps in radar chart.js

  23. 23

    PrimeNG/Chart.js - max Number of labels to show

  24. 24

    PrimeNG/Chart.js - max Number of labels to show

  25. 25

    Plotly js chart hover text not displaying correct number values

  26. 26

    Bars chart for different number of bars in D3.js

  27. 27

    Pie Chart Apache POI (4.1.1) - How to get the number format of data labels to 0,00

  28. 28

    How to change the display value format from float value to whole number in sparkline chart?

  29. 29

    Google charts Column Chart, Is it possible to show y axis and bar values in Indian number format?

HotTag

Archive