Is there an easy way to color Pie Chart

[moyicat]

Hey I'm trying to make a simple pie chart, but the official pie chart example is way too complicated to follow. All I want to do is color the arcs in the pie chart to be the right color, but there's no props I can use on <Pie /> or <Arc />

I tried to mimic what the example was doing, but it doesn't work. Help please, thanks a lot in advance!

https://codesandbox.io/s/vx-tester-wr7gi?file=/src/PieChart.js:1128-1760

<Pie
  data={letters}
  pieValue={frequency}
  pieSortValues={() => -1}
  outerRadius={radius}
  innerRadius={radius - donutThickness}
>
  {(pie) => {
    console.log(pie);
    pie.arcs.map((a) => {
      console.log(a);
      return (
        <Arc
          startAngle={a.startAngle}
          endAngle={a.endAngle}
          outerRadius={radius}
          innerRadius={radius - donutThickness}
          fill="red"
        />
      );
    });
  }}
</Pie>

[moyicat]

Figured it out by looking into the <Pie /> code. But still confused that it doesn't seem to be using <Arc /> but goes to build <path> directly, is that by design?

Updated working code

<Pie
  data={letters}
  pieValue={frequency}
  pieSortValues={() => -1}
  outerRadius={radius}
  innerRadius={radius - donutThickness}
>
  {(pie) => {
    console.log(pie);
    return (
      <Group className="visx-pie-arcs-group">
        {pie.arcs.map((arc, i) => (
          <g key={`pie-arc-${i}`}>
            <path
              d={pie.path(arc) || ""}
              fill={getLetterFrequencyColor(arc.data.letter)}
            />
          </g>
        ))}
      </Group>
    );
  }}
</Pie>

[williaster]

Hey @moyicat 👋 thanks for checking out visx. I agree the pies demo is pretty complex, if anyone (including you!) is interested in a simpler one I'd happily review it!

Also I agree that the API design for specifying fill isn't as simple as it could be, for instance it'd be great if we supported a fill prop with the signature (arc: Arc) => string to easily set a color per arc, rather than forcing users to use the children render function. I think actually we used to support this but it got lost when the project was refactored to TypeScript (@hshoff might remember).

If you were interested in adding that simple accessor function, I'd happily review and it should be straight forward! 🙌

[moyicat]

Thanks for the reply @williaster , happy to give it a shot and see if I can make a simpler demo and an accessor function. Before I get into that, I'm still curious to know what the role of the <Arc /> component is supposed to be.

[williaster]

Hey @moyicat sorry I didn't clarify that.

The Arc component is pretty low level and actually generates a single arc path given a start angle/end angle/inner radius/outer radius.

Pie is higher-level and takes an array of data values as input. It then computes the needed angles to render multiple arcs, allows you to sort them, etc. If you look at the source code for Pie, you can see that it is using both the arc generator and pie generator from d3-shape. We could have theoretically used Arc within Pie to render the individual arcs generated by the pie generator. However each Arc creates its own arc generator, which would be slightly less efficient than the single arc generator we create in Pie, and re-use for each Arc.

If you're looking for more info about the generators I'd suggest checking out the d3-shape docs.