Mumpo Mumpo - 1 year ago 132
Javascript Question

Format Bar Chart's yAxis labels in Chart.js

I have looked the documentation and similar questions here but I don't seem to find a working solution to my problem.

I'm using Chart.js v.2.1.6, and I have a Bar Chart with percentage values stored as numbers (already multiplied by 100). I need both y-axis labels and tooltips to display the

%
sign after the values.

Someone can shed some light on that matter?

Here you have my code:

var data = {
"labels": ["Label1", "Label2", "Label3", "Label4", "Label5"],
"datasets": [{
"label": "Variation",
"data": ["56", "-82.3", "25.7", "32.2", "49.99"],
"borderWidth": 1,
"backgroundColor": "rgba(231, 76, 60, 0.2)",
"borderColor": "rgba(231, 76, 60, 1)"
}]
};

var myBarChart = new Chart($("#myCanvas"), {
type: 'bar',
data: data,
maintainAspectRatio: false
});


And a fiddle: https://jsfiddle.net/tdjk3ncs/

EDIT: SOLVED

I found the solution thanks to miquelarranz, find the updated fiddle:

https://jsfiddle.net/tdjk3ncs/7/

Answer Source

If you want to add %after the values of the Y-Axis you can do it using scales in your chart configuration. Your code will look like this:

var myBarChart = new Chart($("#myCanvas"), {
    type: 'bar',
    data: data,
    maintainAspectRatio: false,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    // Create scientific notation labels
                    callback: function(value, index, values) {
                        return value + ' %';
                    }
                }
            }]
        }
    }
});

Documentation about scales

Fiddle updated with the %: Fiddle

And if you want to modify the text displayed in the tooltips you can easily change it using callback. You can find more information here Tooltip Callbacks

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download