Chart JS donut with rounded edges in one direction and white border between the segements

// Create a custom Doughnut type with rounded segments
Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut);
Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({
  draw: function(ease) {
    var ctx = this.chart.ctx;
    var easingDecimal = ease || 1;
    var arcs = this.getMeta().data;
    var borderWidth = 20; // Width of the white border for space between segments
    Chart.helpers.each(arcs, function(arc, i) {
      var vm = arc._view;
      var startAngle = vm.startAngle;
      var endAngle = vm.endAngle;
      var radius = (vm.outerRadius + vm.innerRadius) / 2;
      var thickness = (vm.outerRadius - vm.innerRadius) / 2;
      ctx.save();
      ctx.translate(vm.x, vm.y);
      // Draw each arc segment with a white border to create spacing
      ctx.beginPath();
      ctx.arc(0, 0, radius, startAngle, endAngle);
      ctx.lineWidth = thickness * 2 + borderWidth; // Increase width to add border
      ctx.strokeStyle = '#FFFFFF'; // Set border color to white
      ctx.lineCap = 'round'; // Ensure all segments are rounded on both ends
      ctx.stroke();
      // Draw inner colored arc over the white border to make it look like a gap
      ctx.beginPath();
      ctx.arc(0, 0, radius, startAngle, endAngle);
      ctx.lineWidth = thickness * 2;
      ctx.strokeStyle = vm.backgroundColor; // Set segment color
      ctx.stroke();

      ctx.restore();
    });
  }
});
// Initialize the chart
window.onload = function() {
  new Chart(document.getElementById('usersChart'), {
    type: 'RoundedDoughnut',
    data: {
      datasets: [{
        data: [10, 10, 10, 10, 10, 10, 10, 10], // Adjust data values for even segments
        backgroundColor: [
          '#5da4e7', '#8fbbe7', '#addbf0', '#4b8de7',
          '#4da466', '#8ec486', '#b3dba8', '#63b571'
        ],
        borderWidth: 0
      }]
    },
    options: {
      cutoutPercentage: 70,
      tooltips: {
        enabled: false
      } // Optional: Disable tooltips to prevent hover issues
    }
  });
};

<canvas id="usersChart" width="400" height="400"></canvas>