Chartjs legend rotation to the left

Feedback

Question:

Is it possible to vertically rotate the legend of
bar chart
on its left side using chartjs? Despite checking the documentation, I cannot seem to find any information on how to do so.

Current:

Wanted:


Code:

The array chartData holds the char data, with chartData[“yas”] representing the legend title “Samples”.

let myChart = new Chart(chart, {
    type: 'bar',
    data: {
        labels: chartData['labels'],
        datasets: [{
            label: chartData["yas"],
            data: chartData['values'],
            backgroundColor: '#6FB98F'
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'left'
            }
        },
        scales: {
            y: {
                ticks: {
                    beginAtZero:true,
                    minRotation : 0
                }
            }
        }
    }
});




Solution:

The current implementation of the legend in
chart.js
doesn’t allow for this possibility. To achieve it, you can either use an html legend and rotate it with css, or modify the legend plugin to add the rotation functionality and use it or submit a pull request to integrate it into the main library.

Frequently Asked Questions