Ability to rotate y axis title in chart.js-CodePudding

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

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>

CodePudding user response：

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>