Mumpo Mumpo - 5 months ago 36
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

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