CODEWITHSUNDEEP
chart.js
Kaushik Makwana
Kaushik Makwana

Reputation: 2576

How to fix bar width in chartjs?

i'm starting new project using python and chart.js and i am using bar chart of chart.js, I want to fix width of every bars but it's still look like this, so how can i apply fix width for all bar?

Max 6 bar showing at a time, when we add 7th bar then horizontal scroll is appeared.enter image description here

Upvotes: 4

Views: 9202

Answers (3)

Malek Tubaisaht
Malek Tubaisaht

Reputation: 1387

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
    }
});

Upvotes: 1

Abraham
Abraham

Reputation: 15630

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

Upvotes: 1

Vinod Louis
Vinod Louis

Reputation: 4876

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

Upvotes: 3

Related Questions