Ability to rotate y axis title in chart.js

March 7, 2022

I’m trying to rotate the title of the y axis 90 degrees clockwise in chart.js but I couldn’t find any way to do this.

This question chartjs: trying to rotate the y-Axis label only rotates the ticks/labels not the y axis title itself.

The only related post I can find is this Ability to rotate axis title and the response was from Jan 26, 2021 saying there was no way to do this.

I have attached my javascript and html code below.

Any help would be greatly appreciated.

The y axis title I would like to rotate is highlighted in red and called: Number of defects. Ideally I’d like to rotate it 90 degrees clockwise.

const labels = ['2021-06-07 00:00:00', '2021-06-08 00:00:00', '2021-06-09 00:00:00'];

        const data = {
            labels: labels,
            datasets: [
                {
                    label: 'Fixed defects',
                    backgroundColor: 'rgb(0, 255, 0)',
                    borderColor: 'rgb(0, 255, 0)',
                    data: ['2', '73', '34'],
                    barThickness: 5
                }, {
                    label: 'Open defects',
                    backgroundColor: 'rgb(255, 0, 0)',
                    borderColor: 'rgb(255, 0, 0)',
                    data: ['0', '5', '2'],
                    barThickness: 5
               
                }]
        };

        const config = {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    x: {
                        min: '2021-06-07 00:00:00',
                        max: '2021-09-10 00:00:00',
                        type: 'time',
                        time: {
                            unit: 'week'
                        },
                        stacked: true,
                        title: {
                            text: 'Dates (weeks)',
                            display: true
                        }
                    },
                    y: {
                        stacked: true,
                        title: {
                            text: 'Number of defects',
                            display: true
                        }
                    }
                }
            }
        };

        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );

<!DOCTYPE html>
<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@^3"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
<link rel="stylesheet" type="text/css" href="../styles.css">

<body>
    
    <div>
        <canvas height="100px" id="myChart"></canvas>
    </div>
    <script>
        
    </script>



</body>

>Solution :

I took inspiration from this custom fiddle and updated your code to rotate the title. The credit goes to the creator of this fiddle as there is no out of the box solution

const customTitle = {
  id: 'customTitle',
  beforeLayout: (chart, args, opts) => {
    if (!opts.x.display) {
      return;
    }

    const {
      ctx
    } = chart;
    ctx.font = opts.x.font || '12px "Helvetica Neue", Helvetica, Arial, sans-serif'

    const {
      width
    } = ctx.measureText(opts.x.text);
    chart.options.layout.padding.right = width * 1.3;
  },
  afterDraw: (chart, args, opts) => {
    const {
      ctx,
      scales: {
        x,
        y
      },
      chartArea: {
        top,
        bottom,
        left,
        right
      }
    } = chart;

    if (opts.x.display) {
      ctx.fillStyle = opts.x.color || Chart.defaults.color
      ctx.font = opts.x.font || '12px "Helvetica Neue", Helvetica, Arial, sans-serif'
      ctx.fillText(opts.x.text, (right + (opts.x.offsetX || 0)), (bottom + ((opts.x.offsetY * -1) || 0)))
    }

    if (opts.y.display) {
      ctx.fillStyle = opts.y.color || Chart.defaults.color
      ctx.font = opts.y.font || '12px "Helvetica Neue", Helvetica, Arial, sans-serif'
      ctx.fillText(opts.y.text, opts.y.offsetX || 3, (top + ((opts.y.offsetY * -1) || -15)))
    }
  }
}

const labels = ['2021-06-07 00:00:00', '2021-06-08 00:00:00', '2021-06-09 00:00:00'];

const data = {
  labels: labels,
  datasets: [{
    label: 'Fixed defects',
    backgroundColor: 'rgb(0, 255, 0)',
    borderColor: 'rgb(0, 255, 0)',
    data: ['2', '73', '34'],
    barThickness: 5
  }, {
    label: 'Open defects',
    backgroundColor: 'rgb(255, 0, 0)',
    borderColor: 'rgb(255, 0, 0)',
    data: ['0', '5', '2'],
    barThickness: 5

  }]
};

const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      x: {
        min: '2021-06-07 00:00:00',
        max: '2021-09-10 00:00:00',
        type: 'time',
        time: {
          unit: 'week'
        },
        stacked: true,
      },
      y: {
        stacked: true,
      }
    },
    plugins: {
      customTitle: {
        y: {
          display: true,
          text: 'Numbers'
        },
        x: {
          display: true,
          text: 'Month',
          offsetX: 5,
          offsetY: 5,
          font: '12px Comic Sans MS'
        }
      }
    }
  },
  plugins: [customTitle]
};

const myChart = new Chart(
  document.getElementById('myChart'),
  config
);

<!DOCTYPE html>
<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@^3"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
<link rel="stylesheet" type="text/css" href="../styles.css">

<body>

  <div>
    <canvas height="100px" id="myChart"></canvas>
  </div>
  <script>
  </script>



</body>