I’m trying to get the DonutChart to pick up my colors - but nothing works.
I tried the colorAccessor and set the color via design token strings, via hex CSS value, then via getDesignToken output, tried the tokens outlines here, looked at the example app, tried it via itemStyle as shown here.
The thing just doesn’t change colors to what I set.
Did anybody see that working? Any maybe have a minimal working example of a DonutChart (or PieChart, should be the same) with some fixed colors? I cannot find a working sample that shows both the chart component and the data structure.
(I’m testing with DonutChart from @forge/react v11.7.0 in Confluence)
Edit: simple sample of colors NOT working:
type DonutDatum = {
type: string;
label: string;
value: number;
};
const dummyDonutData: DonutDatum[] = [
{ type: 'color.chart.success', label: 'Segment A', value: 4 },
{ type: 'color.chart.success', label: 'Segment B', value: 3 },
{ type: 'color.chart.warning', label: 'Segment C', value: 2 },
{ type: 'color.chart.error', label: 'Segment D', value: 1 },
];
<DonutChart data={dummyDonutData} colorAccessor="type" labelAccessor="label" valueAccessor="value" />
How is the colorAccessor value supposed to look?