chart js 2 how to set bar width :: Angular 2+

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