javascript - Format Bar Chart's yAxis labels in Chart.js - Stack Overflow

admin管理员组

文章数量:1332872

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: /

EDIT: SOLVED

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

/

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/tdjk3ncs/

EDIT: SOLVED

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

https://jsfiddle/tdjk3ncs/7/

• javascript
• label
• chart.js

Share Improve this question Follow edited Jul 7, 2016 at 10:52 Mumpo asked Jul 4, 2016 at 8:50 MumpoMumpo 54677 silver badges1616 bronze badges 2

• Have a look at here stackoverflow./questions/28568773/… – Santhosh Commented Jul 4, 2016 at 9:04
• @SanKrish I did, I included tooltipTemplate and multiTooltipTemplate options as they mention but I didn't seem to work in my case... Maybe that only works with Line Chart, and not Bar Chart – Mumpo Commented Jul 4, 2016 at 9:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptFormat Bar Chart39s yAxis labels in ChartjsStack Overflow