Question

184

Chart.js Add Commas to Tooltip and Y-Axis

rated 0 times [ 191] [ 7] / answers: 1 / hits: 29263 / 8 Years ago, sat, august 6, 2016, 12:00:00

I've tried some several answers here in stackoverflow but to no avail failed to make it work.. I'm really new in Chart.js so please bear with me.

this is what I have tried so far.
Add Commas to ChartJS Data Points and this Chart.js number format

here's my code:

thanks in advance.

Chart.defaults.global.legend = {

 enabled: false

};



function load_yearly_sales_per_agent(param_year, transaction_url){

    $(.custom_loader).show();

    $(.custom_graph).hide();

    $.ajax({

        url:transaction_url,

        type:'post',

        data: {year : param_year},

        dataType:'json',

        success:function(result){

              // Bar chart

              var ctx = document.getElementById(mybarChart);

              var mybarChart = new Chart(ctx, {

                responsive: true,

                multiTooltipTemplate: <%=addCommas(value)%>,

                type: 'bar',

                data: {

                  labels: [January, February, March, April, May, June, July, August, September, October, November, December],

                  datasets: [{

                    label: 'Sales Per Month',

                    backgroundColor: #26B99A,

                    data: result

                  }]

                },



                options: {

                  scales: {

                    yAxes: [{

                      ticks: {

                        beginAtZero: true

                      }

                    }]

                  }

                }

              });

              $(.custom_loader).hide();

              setTimeout(function(){

                $(.custom_graph).show();

              }, 200);

        }

    });

}

what I want is to add comma on tooltip and Y-axis.....

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sabrina

Add To Favorites

Follow

Total Points: 92

Total Questions: 92

Total Answers: 85

Location: Palestine

Member since Thu, Feb 2, 2023

1 Year ago

answered 8 Years ago rocky · Accepted Answer

For your yAxes ticks options, this will add commas at the thousands marks:

ticks: {

    beginAtZero:true,

    userCallback: function(value, index, values) {

        value = value.toString();

        value = value.split(/(?=(?:...)*$)/);

        value = value.join(',');

        return value;

    }

}

Similar function can be added in a tooltip callback.

Full example in this FIDDLE