Allow for different shades of colors

Hey all, love the library. Super simple and intuitive to get started with.

I’d love to have the option to select a specific shade of a color from the Tailwind palette (e.g. blue-700), which would be useful for cases like a chart using multiple shades of a color:

Something like this:

<BarChart
  data={...}
  categories={['First', 'Second', 'Third', 'Fourth']}
  dataKey="month"
  colors={['blue-700', 'blue-600', 'blue-500', 'blue-400']}
  stack={true}
/>

Is this something you’d consider adding?

[michaelhays]

Awesome, thanks! And yes I definitely understand the desire to keep things opinionated, and that even in this seemingly simple case there are plenty of things to consider when approaching the implementation (for one, the best way to allow for each shade without oversaturating the TypeScript suggestions with all of blue-100, blue-200, etc, or if this is even a problem at all).

For my use case, we’re using the Tailwind color palette for our branding, but are primarily using blue-700 as our brand color, with some orange-600 accents in small places. Using other Tailwind colors in our charts isn’t awful, but it definitely clashes with the rest of the UI a bit.

I do wonder if an “escape hatch” for arbitrary color customization might be the best way to provide this type of flexibility (since I imagine that’ll be a common request in the future), while still highly recommending the default Tailwind color palette, to take advantage of things like the automatic shade adjustment that you mention in your color palette docs. Just a thought, obviously there’s always a trade-off!

[michaelhays]

Of course! Happy to help in any way I can