color quirks

color sometimes works in strange and mysterious ways.

Categorical or linear scales don’t work at the series level, except for lineSeries. ie

<XYPlot height={200} width={200} colorType='category' colorDomain={[0, 1, 2]} colorRange={['yellow', 'blue', 'red']}>
<VerticalBarSeries data={data} color={0} />
</XYPlot> 

or

<XYPlot height={200} width={200} colorType='category' colorDomain={[0, 1]} colorRange={[ 'blue', 'red']}>
<VerticalBarSeries data={data} color={0.5} />
</XYPlot> 

In both cases, the series will appear black. A scale will be created which will return an undefined value and override the defaults.

[Reg011]

Is there any progress on this issue? I’m using a MarkSerie and everytime I try to set a color string (such as rgb or hex) it appears black no matter what.

[yblee85]

I’m not sure if this helps. but i used exact same code as @jckr except

1. moved colorType=‘category’ colorDomain={[0, 1, 2]} colorRange={[‘yellow’, ‘blue’, ‘red’]} props from XYPlot to VerticalBarSeries props
2. in data, add color:0~2

const data = [
        {x: 0, y: 8, color:0},
        {x: 1, y: 5, color:0},
        {x: 2, y: 4, color:1},
        {x: 3, y: 9, color:1},
        {x: 4, y: 1, color:2},
        {x: 5, y: 7, color:2},
        {x: 6, y: 6, color:1},
        {x: 7, y: 3, color:1},
        {x: 8, y: 2, color:0},
        {x: 9, y: 0, color:1}
    ];

<div>
    <XYPlot height={300} width={300}>
        <VerticalBarSeries colorType='category' colorDomain={[0, 1, 2]} colorRange={['yellow', 'blue', 'red']} data={data} />
    </XYPlot>
</div>