[Chartjs]-ChartJS: Remove padding on first and last bars on Barchart

by

1👍

✅

You can achieve this by defining left and right invisible border for each bar individually using the borderWidth option on the dataset. At the same time you need to define categoryPercentage: 1 and barPercentage: 1 on the dataset (see Dataset Configuration).

In below code sample, the computed borderWidths results in the following array:

[
  {
    "left": 0,
    "right": 20
  },
  {
    "left": 5,
    "right": 15
  },
  {
    "left": 10,
    "right": 10
  },
  {
    "left": 15,
    "right": 5
  },
  {
    "left": 20,
    "right": 0
  }
]

Change the value of the variable factor if you want to change the gap between bars.

var labels = ['one', 'two', 'three', 'four', 'five'];

var borderWidths = [];
var factor = 5;
for (let i = 0; i < labels.length; i++) {
  borderWidths.push({ left: i * factor, right: (labels.length - 1 - i) * factor });
}

var chart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      data: [100, 90, 80, 90, 100],
      categoryPercentage: 1,
      barPercentage: 1,
      borderWidth: borderWidths,
      borderColor: 'white',
      hoverBorderColor: 'white'
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        display: false
      }],
      yAxes: [{
        display: false,
        ticks: {
          beginAtZero: true
        }
      }],
    }
  }
});
#div_chart {
  width:400px;
  height:200px;
  border:1px solid black;
  padding:0;
  margin:0
}

#myChart {
  padding:0;
  margin:0;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="div_chart">
   <canvas id="myChart"></canvas>
</div>

Leave a comment