-
-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Pie: Fill color by label name? Callback function? #1370
Comments
Which version of nivo are you on? The latest version supports a custom function for colors. |
@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 tony/cv#1160 |
@wyze Works! Thank you!
<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> |
Tweaked more: https://cv-react-v2.git-pull.com/dev/branch/v2-nivo/ |
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 chartPrior art: https://cv-react-v1.gitpull.com (see how programming language colors are synchronized, yellow for js, green for vim)
![image](https://user-images.githubusercontent.com/26336/103472230-cc956f80-4d50-11eb-9402-adc17ed2783b.png)
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:
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.
Additional context
Related:
The text was updated successfully, but these errors were encountered: