Arc example

I’ve been using visx for some time now but I’ve never actually been able to render an Arc. I’m not sure whether it’s a bug or if I’m doing something wrong.

The Arc can be quite difficult to understand. It has tons of radius and angle attributes. Even when passing in random arguments like this:

<svg width={250} height={250}>
  <Arc
      startAngle={10}
      endAngle={180}
      innerRadius={30}
      cornerRadius={30}
      outerRadius={50}
      padAngle={10}
      padRadius={10}
      fill={"#FF0000"}
   ></Arc>
</svg>

I can’t get anything to show up. (Not even anything in Inspect Element which is why I have the feeling that it might just be a bug)

It’d be nice to have a simple example, which I could copy paste and then modify to understand what each attribute does.

[ChamsBouzaiene]

@thecodeah I know this is an old issue, but I thought maybe this will help someone who struggles with the arc component I have built a color wheel using the Arc component here

[gknapp]

Thanks for the colour wheel example, been struggling to get anything but whole rings rendering from the Arc component, even with start and end angles specified.

I took to reading the source as well, to see why nothing rendered at first, then I satisfied the conditional by supplying a data prop.

Update: After tinkering with ChamsBouzaiene’s code, my mistake was to assume start and end angles were in degrees, when it appears they should be in radians? Arcs no longer drawing complete circles 👍