[Chartjs]-Chart.js How to change y axis title position

by

2👍

You can use custom styling using the options.scales.x.title.padding parameter to move your axis labels where you want, like in the example below:

 options: {
                    
             scales: {
                        x: {
                            beginAtZero: true,
                            display: true,
                            title: {
                                display: true,
                                text: 'count',
                                padding: {top: -5, left: 0, right: 0, bottom: 0}
                            },
                            ticks: {
                                stepSize: 1,
                            }
                        },
                        
                 
                    }

0👍

Unfortunately, at least at the moment, this is not possible. Options for scale title do not support such position change. More at the documentation here:
https://www.chartjs.org/docs/latest/axes/labelling.html

Perhaps making a feature request on Chart.js github would make sense?
https://github.com/chartjs/Chart.js/issues

0👍

original answer

see this example, hope it helps
in shorts, create a plugin and append the title after the canvas drew

plugins:[{
  afterDraw: chart => {
    var ctx = chart.chart.ctx;
    ctx.save();
    ctx.font = "bold 14px Arial";
    ctx.fillStyle = "gray";
    var y = 50;

    ctx.textAlign = 'left';        
    ctx.fillText('CO2', 5, y);
    ctx.fillText('°C', 46, y);

    ctx.textAlign = 'right';
    ctx.fillText('%', chart.chart.width - 10, y);
    ctx.restore();
  }
}],

Leave a comment