[Chartjs]-Chart.js bar thickness

by

3👍

In Chart.js 4+

we can use barPercentage to control bar thickness

like this:

const options = {
barPercentage: 0.3,
};

1👍

I have Created a snippet. Take a look. Charts are responsive automatically.

I didn’t know from where this data: barData, is coming. So I have created my own dataset.

const ctx = document.getElementById('myNewChartB').getContext('2d');
const myNewChartB = new Chart(ctx, {
            type: "bar",
            data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 55
        }]
    },
            options: {
                borderSkipped: false,
                borderRadius: 3,
                plugins: {
                    barRoundness: 1,
                    legend: {
                        display: false,
                    },
                    title: {
                        font: {
                            size: 16
                        },
                        display: true,
                        text: 'Researchers (n=3)',
                        padding: {
                            left: 0,
                            right: 0,
                            top: 0,
                            bottom: 0
                        }
                    },
                    datalabels: {
                        display: true,
                        clamp: true,
                        formatter: (val, context) => (`${val}%`),
                        anchor: 'start',
                        align: 'end',
                    }
                },
    
                responsive: true,
                tooltips: {
                    enabled: false,
                },
                barThickness: 55,
                maintainAspectRatio: false,
    
                scales: {
                    x: {
                        display: true,
                        title: {
                            font: {
                                size: 16,
                            },
                            display: true,
                            text: "Scroes (1-9)",
                        },
                        grid: {
                            display: false,
                            drawBorder: false, //<- set this
                        },
                    },
                    y: {
                        display: true,
    
                        ticks: {
                            display: false
                        },
                        title: {
                            font: {
                                size: 16
                            },
                            display: true,
                            text: "% of Respondants",
                        },
                        grid: {
                            color: '#9B9898',
                            drawBorder: false, //<- set this
                        },
                    },
                },
            },
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<canvas id="myNewChartB" width="400" height="400"></canvas>

Leave a comment