Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to get horizontal bars with ChartJS?

With the official ChartJS documentation, I’m trying to get horizontal bars for each of my data. I tried using x or y, changing options or datasets with no success. I should point out that there is no other JS or SCSS applied on this . How to have horizontal bars? Thanks a lot!

Result :

result

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

twig

<canvas id="skills{{ i }}"> </canvas>

JS

    var chartContainer2 = document.getElementById('skills0');
    var ctxSkills = chartContainer2.getContext('2d');

    const data = {
        labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
        datasets: [{
            axis: 'y',
            label: 'My First Dataset',
            data: [65, 59, 80, 81, 56, 55, 40],
            fill: false,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 205, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(201, 203, 207, 0.2)'
            ],
            borderColor: [
                'rgb(255, 99, 132)',
                'rgb(255, 159, 64)',
                'rgb(255, 205, 86)',
                'rgb(75, 192, 192)',
                'rgb(54, 162, 235)',
                'rgb(153, 102, 255)',
                'rgb(201, 203, 207)'
            ],
            borderWidth: 1
        }]
    };
    var chartBar = new Chart(chartContainer2, {
        type: 'bar',
        data,
        options: {
            indexAxis: 'y',
            scales: {
                x: {
                    min: 0,
                    max: 100,
                    stacked: true
                },
                y: [{
                    stacked: true
                }]
            },
        }
    });

I would also like the numbers on the left to start from 0 to 100 (I tried to do it with x : min/max but it doesn’t work)

Thanks!!!

>Solution :

Since indexAxis: 'y' is not working for you, it seems you are using V2 of chart.js in this case you need to specify the type as 'horizontalBar' instead of 'bar'

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading