[Chartjs]-Chart js 2 how to set bar width

by

146👍

✅

You were right : The attribute you have to edit is barPercentage.

But maybe the error comes from where you edited the value.

As you can see in the bar chart options :

Name : barPercentage
– Type : Number
– Default : 0.9
– Description : Percent (0-1) of the available width each bar should be within the category percentage. 1.0 will take the whole category width and put the bars right next to each other. Read More

The attribute is actually stored in scales.xAxes (“Options for xAxes” table).

So you just have to edit your chart this way :

var options = {
    scales: {
        xAxes: [{
            barPercentage: 0.4
        }]
    }
}

Here is a fully working example with a custom width (0.2) for the bar :

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        backgroundColor: "rgba(75,192,192,0.4)",
        borderColor: "rgba(75,192,192,1)",
        data: [65, 59, 75, 81, 56, 55, 40],
    }]
};

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            xAxes: [{
                // Change here
            	barPercentage: 0.2
            }]
        }
    }
});

console.log(myChart);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<canvas id="myChart"></canvas>

Update (Chart.js Version 2.2.0+)

As stated in the Release Version 2.2.0 – Candidate 2 :

Enhancements

  • Can now manually configure the thickness of a bar in a bar chart. Use a new barThickness option on the correct axis to set the thickness of a bar.
  • And so on …

35👍

For version 2.8+ (and apparently as far back as 2.2), there are now some excellent controls over the bar thickness, max thickness, etc.

Per the Chart.js documentation, you would set them like so:

{
    type: 'bar', // or 'horizontalBar'
    data: ...,
    options: {
        scales: {
            xAxes: [{
                barThickness: 6,  // number (pixels) or 'flex'
                maxBarThickness: 8 // number (pixels)
            }]
        }
    }
}

32👍

As of v2.7.2 it can be done by:

scales: {
  xAxes: [{
    maxBarThickness: 100,
  }],
}

14👍

In case if you are using ng2-chart in an angular project then the bar chart configuration looks Alike this:

npm install ng2-charts chart.js --save

import ‘ng2-charts’ in your module.

import { ChartsModule } from 'ng2-charts';

Now the bar chart configurations:

barChartOptions: ChartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
  display: false
  },
};

barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
barChartType: ChartType = 'bar';
barChartLegend = true;
barChartPlugins = [];

barChartData: ChartDataSets[] = [
 {
  barThickness: 16,
  barPercentage: 0.5,
  data: [65, 59, 80],
  label: 'Growth'
 },
 {
  barThickness: 16,
  barPercentage: 0.5,
  data: [28, 48, 40],
  label: 'Net'
  }
 ];

barChartColors: Color[] = [
  { backgroundColor: '#24d2b5' },
  { backgroundColor: '#20aee3' },
 ];

Now the HTML part:

<div class="bar-chart-wrapper">
   <canvas baseChart [datasets]="barChartData" [colors]="barChartColors" 
     [labels]="barChartLabels"
     [options]="barChartOptions" [plugins]="barChartPlugins" [legend]="barChartLegend"
     [chartType]="barChartType">
   </canvas>
 </div>

You can control the height of your chart container

  .bar-chart-wrapper {
     height: 310px;
   }

13👍

barThickness and maxBarThickness (previously in ChartOptions[]) are now a part of ChartDataSets[].

12👍

As per above answer
Here is complete Bar chart graph using react chartjs2.

import React from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';

ChartJS.register(
  CategoryScale,
   LinearScale,
   BarElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  responsive: true,
    plugins: {
    legend: {
      position: 'top',   // lable position left/right/top/bottom
      labels: {
        boxWidth: 0,     // lable box size
      }
    },
  },
  elements: {
    point: {
      radius: 1
    }
  },
  scales: {
    x: {
      display: false,        // show/ hide x-axis
      grid: {
        display: false      // show/hide grid line in x-axis
      },
    },
    y: {
      display: false,      // same as x-axis
      grid: {
        display: false
      }
    }
  }
};

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

export const data = {
  labels,
  datasets: [
    {
      label: 'datasets',            // label text
      data: [100, 300, 500, 700],      
      backgroundColor: '#7b62ff',   // bar / column color
      barThickness: 6,             // <<<<<<<<<<<<   bar / column size  
    },
  ],
};

export default function ResumesGraph() {
  return (
    <div>
      <Bar
        data={data}
        options={options}
        width={'500px'}
        height={'180px'}
      />
    </div>
  );
}

3👍

Try this

import {Chart} from "chart.js"

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

//also try barPercentage

1👍

For those who are interested, i made a quick fork based on 3.9 branch to manage dynamic width :
https://github.com/stephanebouget/Chart.js/tree/3.9

For example :

image

Live demo

https://codepen.io/stephanebouget/pen/PoerxPP

var data = {
  datasets: [{
    label: 'Dataset #1',
    backgroundColor: 'rgba(255,99,132,0.2)',
    borderColor: 'rgba(255,99,132,1)',
    borderWidth: 1,
    hoverBackgroundColor: 'rgba(255,99,132,0.4)',
    hoverBorderColor: 'rgba(255,99,132,1)',
    data: [65, 59, 20, 81, 56, 55, 40],
    setPercentage: [10, 2, 20, 40, 4, 6, 18], // Here is the magic !!!
  }],
};

Leave a comment