YAxis chart chart in chart.js

Question

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

I am using Chart.js v.2.1.6, and I have a chart with percentage values ​​stored as numbers (already multiplied by 100). I need both the y-axis labels and tooltips to display the % sign after the values.

Can someone shed some light on this?

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 the fiddle: https://jsfiddle.net/tdjk3ncs/

EDIT: SOLVED

I found a solution thanks to miquelarranz, found an updated script:

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

Answer 1

If you want to add % after the Y-Axis values, you can do this using the scales in the 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 + ' %'; } } }] } } }); 

Scale Documentation

Fiddle is updated with % : Fiddle

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