React-vis: Color assignment in DiscreteColorLegend does not match RadialChart

[JayFields]

I have a simple radial chart and a corresponding legend. Even though both the radial chart and the legend receive the series data in the same order, the color swatches do not match.

Here's a Codepen.

And a screenshot demonstrating the color difference:

[mcnuttandrew]

Hey @JayFields

I updated your code pen a little bit to get the desired functionality https://codepen.io/anon/pen/EQpKBe, but you do highlight a bug: color should be handled in the legends the same way as everywhere else in the library.

[JayFields]

Thanks for the workaround!

[nfvs]

@mcnuttandrew is the only fix specifying the actual color for each item manually?

[sumankharel]

Had to spend few hours to find out i was missing colorType="literal". Hope it helps anyone in the future.

[lily-chenll]

After reading the source codes about radical-chart, I found that the color of pie is initiated by:

There is no colorDomain as a default props so the radical chart doesn't know which value will be associated with which color. Thus we could add a colorDomain to solve the problem.

Noticing that the colorDomain should be sorted in descending order because the data in the radical chart has been reversed. Besides the length of data cannot exceed 5. If it exceed 5, then use colorType='literal' instead.

radical-chart link: https://github.com/uber/react-vis/blob/master/src/radial-chart/index.js