when the label is a color like "red" it renders "rgb(255,0,0)

[lonelydatum]

Hello and thanks for the great library!

I've reproduced the issue here but I need the animation so what solution?:
https://codesandbox.io/s/k062y8l13v

the fix is to comment out the animate property
<VictoryPie
// animate={{ duration: 500, easing: "cubicOut" }}
colorScale={colors}
data={data}
height={500}
width={500}
y={datum => datum._percent}
labelRadius={110}
labelComponent={}
/>

[jthetzel]

I suspect prop strings like red and blue are being interpolated to rgb() strings in https://github.com/FormidableLabs/victory-core/blob/master/src/victory-animation/util.js .

[jthetzel]

Related: d3/d3-interpolate#42

[jthetzel]

Related PR: d3/d3-interpolate#43

[1e1f]

+1, in my case it was "Chocolate", lol.

[DingoEatingFuzz]

I ran into this today too: https://codesandbox.io/s/xjz0l4wwj4

I wonder if it's worth waiting for d3-interpolate? That PR has been open for a year an a half at this point.

[jacobkossman]

Any update to this? Really annoying, converting the word 'Azure' to it's RGB info...

[Fil]

From victory-animation.js it seems that this code is trying to interpolate the data, instead of interpolating only values passed as visual parameters.

With the current code base the following workaround helps make sure that the data labels are "not interpolable":
data={data.map(d => Object.assign({},d, {name: d.name + "\x03"}))}

\x03 is ascii for "end of text", but several other values work too. (Workaround tested on https://codesandbox.io/s/xjz0l4wwj4 )

[becca-bailey]

As discussed in other comments, Victory uses d3-interpolate in order to animate data, and this is related to the way d3-interpolate handles color interpolation with rgb values. This d3-interpolate issue suggests excluding keys from the interpolated object, and Victory does provide a way to do this via the animationWhitelist prop.

https://formidable.com/open-source/victory/docs/victory-transition#animationwhitelist

       <VictoryChart style={style}>
          <VictoryBar
            animate={{
              animationWhitelist: ["data"]
            }}
            data={this.state.data}
            style={{
              data: this.state.style
            }}
          />
      </VictoryChart>

This prop allows you to select which attributes are included in the animation, and any excluded components will not be interpolated. By default, every Victory component includes this as a static property, so you can check out the source for examples of the properties you would include. If there are not other style properties you would want to animate, you can leave style out of this list to prevent victory-interpolate from updating the fill color.

victory/packages/victory-scatter/src/victory-scatter.js

Line 27 in 844109c

static animationWhitelist = [

I'm going to close this issue for now, since I don't believe further action is required on Victory's side, but let me know if this doesn't work and we need to re-open to discuss alternate solutions.