[Chartjs]-How to draw border all the way around bar element

by

2👍

✅

You can set the borderSkipped option to false, depending on if you do it in the options or on the dataset level it will apply to all bars or only the bars of that specific dataset.

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 5,
      borderColor: 'pink',
      borderSkipped: false //Apply setting only to this bar dataset
    }]
  },
  options: {
    elements: {
      bar: {
        borderSkipped: false // Apply setting to all bar datasets
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

Leave a comment