BorderRadius not working on pie/doughnut

1

I’m looking to recreate the “activity rings” from the popular smart watch fitness app. I have just about all of the concentric rings looking great except for the borders of the arcs.

In current Chart.js documentation there is a borderRadius property that works as I intend, but this property doesn’t appear to work with quickcharts. Is there perhaps an older config option that allows me to accomplish the same look?

This image is from Doughnut and Pie Charts | Chart.js after modifying the “Setup” in the live code editor to match the config below

image
image827×835 41.6 KB

This is the working Chart.js config for “data”

{
  datasets: [{
    label: 'M',
    data: [80, 10],
     borderRadius: 100,
    backgroundColor: [
      'rgb(255, 99, 132)',
      '#fff',
    ],
    hoverOffset: 4
  },
 { label: 'E',
    data: [70, 10],
    borderRadius: 100,
    backgroundColor: [
      'rgb(92,207,45)',
      '#fff',
    ],
  },
  { label: 'S',
    data: [90, 10],
    borderRadius: 100,
    backgroundColor: [
      'rgb(54, 162, 235)',
      '#fff',
    ],
    
  },
  { label: 'inner',
    data: [10],
    backgroundColor: [
      '#fff',
    ],
  }]
}
2

Ooops, seems like it was a version issue. Had to change the Chart.js version to 4 from the default 2.9.4

const chart = new QuickChart();
chart.setVersion(4);
1 Like