Assign fixed width to the columns of bar chart in Chart.js

javascript Share on :

If you want to assign a fixed width to the bars of the bar chart created using the Chart.js library. You can use barThickness property of datasets.

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

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Label 1", "Label 2", "Label 3", "Label 4"],
        datasets: [{
            label: "Title on top",
            data: [50, 40, 60, 80],
            backgroundColor: "#1491e5",
            barThickness: 30 // Assign your width here
        }]
    },
    options: {
    	maintainAspectRatio: false
    }
});

We are using barThickness property of datasets in Chart.js to assign a fixed thickness to the bars of the bar chart. Here, we have created a bar chart that has four data points that mean there will be four bars in the bar chart. As we know Chart.js will assign own with to these bars according to the width of the chart. But if you want to assign your own width to these bars, you can use barThickness property.

Here, value 30 is assigned to barThickness property that means the width of each bar will be 30px.

Live Demo

A live demo for the code snippet can be found below.

Full Example code for fixed width bars

<canvas id="my_chart" width="400" height="200" ></canvas>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script>
var ctx = document.getElementById("my_chart").getContext("2d");

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Jan", "Feb", "Mar", "Apr"],
        datasets: [{
            label: "Months Revenue",
            data: [90, 80, 30, 50],
            backgroundColor: "#1491e5",
            barThickness: 30
        }]
    }
});
</script>

The HTML code is an example of a bar chart that will create a bar chart having fixed-width column bars.

Contribute to this Snippet

Was this helpful?

Created by :

@

Write your Comment

0 Comments

Similar code snippets

Create your own code snippets and search them using our portal and chrome extension

Programming Feeds

Learn something new everyday on Devsheet

Important Links

Join Devsheet Create new snippet Ask a Question Write an article Online JSON Viewer