Chart.js bar thickness

Question

I need help on bar thickness using chart.js v3.5 Issue: I set the bar thickness "barThickness: 55," and after in responsive I don't know to manage it in responsive here is my code which I have used, Please let me know what should I do for the solution. Thanks.

Here I Have the issue which is created in responsive, have a look on the image url : image link

var myNewChartB = new Chart(ctx, {
            type: "bar",
            data: barData,
            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
                        },
                    },
                },
            },
        });

score 2 · Answer 1 · answered Jun 09 '23 at 05:59

2

In Chart.js 4+

we can use barPercentage to control bar thickness

like this:

const options = { barPercentage: 0.3, };

answered Jun 09 '23 at 05:59

Abdul.Moqueet

902
12
19

score 1 · Answer 2 · answered Mar 11 '22 at 13:05

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>

Thank You @kevin for your solution but I need the solution for responsive mobile screens. Please let me if you have any idea, for barthickness: 55. Thanks. — Hiren, Mar 11 '22 at 13:28
```barThickness``` makes the chart's lines thicker. The chart JS is automatically responsive. Can you post a JPG so that I can address your problem? — Kevin, Mar 12 '22 at 05:17

Chart.js bar thickness

2 Answers2