1

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

enter image description here

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

Vikhyath Maiya
  • 3,122
  • 3
  • 34
  • 68

1 Answers1

2

You should change y translation by factor of 2:

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

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

Alonas
  • 453
  • 4
  • 12