0

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

Tuan Nghia
  • 1
  • 1

1 Answers1

0

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

Hungnn
  • 68
  • 1
  • 2
  • 19
  • I mean, want to align vertically all the legends – Tuan Nghia Dec 20 '22 at 14:53
  • https://i.stack.imgur.com/ZMZn7.png – Tuan Nghia Dec 20 '22 at 15:20
  • You can use `afterDraw` to custom legend label. Pls check this post: [link](https://stackoverflow.com/questions/66099477/align-title-left-react-chart-js-v2). As @uminder's answer, he using `CanvasRenderingContext2D.fillText()` to custom. Beside, you can use `context.rotate()` to make vertical text – Hungnn Dec 20 '22 at 16:51