[Chartjs]-How to fix bar width in chartjs?

by

3👍

✅

you can use :

barPercentage property like this

xAxes:[{
     barPercentage: 0.1,
            gridLines: {
            display:false
        }
    }]

barPercentage takes value from 0 to 1 where 1 being the 100% available width

For more details on barPercentage see this

Sample FIDDLE

For fix width with different data variant :

Try this link1 link2

1👍

This fixes it

works for most versions, including in react.js

import {Chart} from "chart.js"

Chart.defaults.datasets.bar.barThickness = 73;

//also try barPercentage, maxBarThickness

1👍

use this as example

var ctx = document.getElementById("my_chart").getContext("2d");

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Jan", "Feb", "Mar", "Apr"],
        datasets: [{
            label: "Title on top",
            data: [10, 80, 56, 60],
            backgroundColor: "#1491e5",
            barThickness: 30 //<---- here important
        }]
    },
    options: {
        maintainAspectRatio: false//<---- here important
    }
});

Leave a comment