Using DataVisualization tokens anywhere you can specify a color

[pmiller-twilio]

I am attempting to migrate a section of the app to paste. Here is a screenshot of my current progress.

Notice that I am using DataVizualization colors for a stacked bar chart. I would also like those same colors to appear beside the label of the bar in both the tooltip in the chart and the text based table breakdown above it. I can't do that because of type restrictions on color properties of Box and other components. Would it be possible to make DataVizualization tokens acceptable inputs to all color properties, or at least the backgroundColor one?

[TheSisb]

Hi @pmiller-twilio,

Unfortunately opening up the data viz color tokens on all color CSS or even backgroundColor is a slippery slope we won't be able to recover from, so that isn't a possibility. Is the tooltip generated from Highcharts or is it custom?

[pmiller-twilio]

The tooltip is a custom react component passed into a prop of recharts at the moment. I know there is still work to be done there. The section at the top where I show the colors next to the labels directly below the overview header is done though. Do you have any ideas on how I could match DataViz colors there?

[TheSisb]

Ah you're using recharts and not Highcharts. I was wondering why it looked different :) We currently only support Highcharts. You may be able to hack your way to a solution but it may not be very resilient to future updates with our design language.

This may be something you can bring to office hours so we can analyze the problem more holistically. You can find the sign-up link in the help-design-system Slack channel.