ChartJS V3 borderRadius only works on top

Question

Link to jsfiddle

Why does borderRadius only work on top?

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <div>
    <canvas id="canvas" height="100"></canvas>
  </div>

JS

window.onload = function() {
      var ctx = document.getElementById('canvas').getContext('2d');
      window.myBar = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ["Q0", "Q1", "Q2", "Q3", "Q4"],
          datasets: [{
            label: 'estimate',
            data: [[2, 7], [2, 10], [1, 3], [1, 4], [4, 8]],
            backgroundColor: 'lightblue',
            borderRadius: 10,
          },
          {
            label: 'actual',
            data: [[5, 6], [7, 8], [2, 3], [2, 3], [7, 8]],
            backgroundColor: 'red',
            borderRadius: 10,
         }]
 },
 
 
        options: {
          responsive: true,
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: 'Estimate Histoy'
          }
        }
      });
    }

;

I've been searching for a couple of days now. Found a lot of pre-V3 that are rather complex but nothing with V3. Seem rather straightforward. I did see that if the bottom is on an axis it'll not put borderRadius.

Thanks for the help.

Answer 1

If you want all the borders to have a borderRadius you need to specify borderSkipped: false in your dataset