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/

回答1:

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

来源：https://stackoverflow.com/questions/38180421/format-bar-charts-yaxis-labels-in-chart-js

标签

javascript

label

chart.js