CODEWITHSUNDEEP
jquerygraphchart.js2
Roman
Roman

Reputation: 1168

Chart js: How to change value for Y Axis?

adding temperature to the y axis

How can I add °C to the Y Axis in Chart.js v2? The values are generated automatically by the Chart.js library.

This is my code:

        var chartInstance = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Temperature'
                    }
                }]
            },

            title: {
                display: true,
                text: 'Weather Graph'
            }

        }

Upvotes: 2

Views: 8466

Answers (1)

Sergiu
Sergiu

Reputation: 1206

In order to change the y-axis labels on your chart you can add this:

...
yAxes: [{
    ticks: {
        beginAtZero:false
    },
    scaleLabel: {
        display: true,
        labelString: 'Temperature'
    },
    afterTickToLabelConversion : function(q){
        for(var tick in q.ticks){
            q.ticks[tick] += '\u00B0C';
        }
    }
}]
...

In this function, afterTickToLabelConversion, you can alter the labels on the y-axis in the chart.js. They are called ticks :http://codepen.io/anon/pen/NRAzmN

Upvotes: 8

Related Questions