Chartjs-Bars centered between the grid lines with the label below the grid lines (chart.js)

by

0👍

First you need to define categoryPercentage: 1 for both datasets. 

public barChartData:any[] = [
  {
    data: [55, 60, 75, 82, 56, 62, 80], 
    label: 'Company A',
    categoryPercentage: 1,
  },
  { data: [58, 55, 60, 79, 66, 57, 90], 
    label: 'Company B',
    categoryPercentage: 1,
  }
];

categoryPercentage (default 0.8): Percent (0-1) of the available width each category should be within the sample width. more…

Chart.js however still won’t properly layout the bars if some of them are not contained in the visible area. Therefore you’ll also have to make sure that all bars are shown in the chart by defining an appropriate value for yAxis.ticks.min.

yAxes: [{
  ticks: {
    min: 50
  }
}]

Please have a look at your amended code in the following StackBlitz

Leave a comment