react-chartjs-2 how to show legend text on the left with vertical text

Question

I just want to align the Chart Legend on the right and the text will be shown vertically. Goal: enter image description here

I've tried to use: position: left enter image description here The legend already move to the left. But I don't know how to align the text vertically enter image description here

Ex: enter image description here

Answer 1

I mean, you want to show title to left of chart. In your output, I expect:

const commonOptions: {
    maintainAspectRatio: false,
    interaction: {
           intersect: false,
    },
    responsive: true,
    plugins: {
      legend: {
        position: 'right',
      },
      title: {
                display: true,
                align: 'center',
                text: 'Study Count',
                position: 'left'
            }
    }
  },

Try in:

https://www.chartjs.org/docs/latest/samples/bar/vertical.html

Good lucks