Chartjs 甜甜圈图圆角半甜甜圈

Question

I am using chartJS library for one of my projects and I need to draw a doughnut chart. The doughnut chart needs to be a half circle and the sections in it needs to have rounded edges, something like shown below

I could achieve the same for a full circle by referencing this great answer as shown in the codepen below

Full circle with rounded edges codepen here

But if I change the options to draw a half circle with following options

rotation: 1 * Math.PI,
circumference: 1 * Math.PI,

then the calculations seems to go wrong somewhere and the arc circles are placed randomly as shown below

Problem Code pen here

How can i fix this. Please help. I am stuck. Thanks

Answer 1

You should change y translation by factor of 2:

ctx.translate(arc.round.x, arc.round.y*2);

http://jsfiddle.net/alonas/kx6rjy07/