Pie: Fill color by label name? Callback function?

[tony]

Is your feature request related to a problem? Please describe. There's been recent discussion in the tracker of Pie chart's getting an upgrade soon (animations, perhaps colors are already in?).

Though I'm not so sure if it's possible to fill colors based on the label now?

I have a color mapping (Programming Language -> Hex Codes based on GitHub colors) and a pie chart

Prior art: https://cv-react-v1.gitpull.com (see how programming language colors are synchronized, yellow for js, green for vim)

Describe the solution you'd like

Having colors dynamically set via the label, via a callback function

I think https://nivo.rocks/storybook/?path=/story/pie--using-colors-from-data would do it? Is this in master? Currently live?

Describe alternatives you've considered I haven't found an example of it for nivo yet.

So far:

• On Nivo, here's my attempt: https://github.com/tony/cv/pull/1160/files#diff-24a94a1493a54600961bb8d87c244813ba47ddbcdee350436d7853af7a35c4d6R302

All other chart system's i've tried support coloring based on labels easily. Most use callbacks, other's use Array index ordering. If the color's index matches with the index of the value, the color is used.

• @carbon/charts: https://github.com/tony/cv/pull/1154 (seen in first screenshot)
• plotly.js: https://github.com/tony/cv/pull/1153

Additional context

Related:

• https://github.com/plouc/nivo/issues/39#issuecomment-748030525
• https://github.com/plouc/nivo/issues/751 perhaps this is done in https://github.com/plouc/nivo/pull/1204, but I don't see color related stuff in there

[wyze]

Which version of nivo are you on? The latest version supports a custom function for colors.

[tony]

@wyze I will re-read through the docs tomorrow evening - I didn't see anything about a custom color functions yet, I don't think.

I set up a staging example here: https://cv-react-v2.git-pull.com/dev/branch/v2-nivo/

Here's the code at the moment: https://github.com/tony/cv/blob/v2-nivo/packages/react/src/App.tsx#L182 / PR https://github.com/tony/cv/pull/1160

[tony]

@wyze Works! Thank you!

colors and sliceLabelsTextColor accepts a function now

        <div className="chartRow--donut">
          <ResponsivePie
            data={Object.entries(results.languageCount).map(
              ([languageName, count]) => {
                return {
                  id: languageName,
                  label: languageName,
                  value: count,
                };
              }
            )}
            colors={(item: { id: string }) => {
              return results.languages.find(
                (language) => language.id == item.id
              )?.ui?.backgroundColor;
            }}
            sliceLabelsTextColor={(item) => {
              return results.languages.find(
                (language) => language.id == item.id
              )?.ui?.color;
            }}
          />
        </div>

[tony]

@wyze

Tweaked more: https://cv-react-v2.git-pull.com/dev/branch/v2-nivo/