Victory-native: Warning: Failed prop type: Invalid prop `range` supplied to `VictoryBar`

[peacechen]

This warning occurs with a horizontal stacked bar chart:
Warning: Failed prop type: Invalid prop `range` supplied to `VictoryBar`.

Code snippet:

<VictoryStack
    domain={{x:[0, 100]}}
    domainPadding={{y:5}}
    theme={this.state.chartTheme}
    width={this.state.chartWidth}
    height={sizes.h1}
    padding={0}
    colorScale={['blue', 'grey']}
    labels={() => null}
    horizontal={true}
>
    <VictoryBar data={[{x:name, y:percentage}]} />
    <VictoryBar data={[{x:name, y:100-percentage}]} />
</VictoryStack>

Environment

Victory-native 0.14
iOS 10 simulator
React Native 0.45.1

[omarloren]

I can confirm this behavior, did you find a solution? @peacechen

[peacechen]

It's still happening. Doesn't seem to prevent the chart from rendering. This bug is internal to Victory Charts / Native. Do any of the maintainers have an idea why range is being passed to VictoryBar?

[hrmoller]

Just for the record: I get the same warning when using VictoryLine in a VictoryChart (non-native):

Warning: Failed prop type: Invalid prop 'range' supplied to 'VictoryLine'.

<VictoryChart
  width={this.state.width}
  height={400}
  domain={{y: [0, 3]}}
  containerComponent={
    <VictoryZoomContainer
      responsive={false}
      zoomDimension="x"
      zoomDomain={this.state.zoomDomain}
      onZoomDomainChange={this.handleZoom.bind(this)}
    />
  }
>

  <VictoryLine data={[{x: 0, y: 3}, {x: 2000, y: 3}]} style={{data: {stroke: '#dedede', strokeWidth: 1}}} 

/>
</VictoryChart>

[michaud]

I have the same warning when i make the chart small (width=100, height=100) but it goes away when I make it bigger (width=110, height=110)... It looks like the layout render code produces invalid values.

[boygirl]

fixed in latest versions

[jacargentina]

I'm having the same issue with latest version 0.27.2

checkPropTypes.js:19 Warning: Failed prop type: Invalid prop range supplied to VictoryBar

Using this:

    <VictoryStack
      height={50}
      padding={{ bottom: 50 }}
      animate={{ onLoad: { duration: 800 } }}>
      {props.data.map((i, idx) => {
        return (
          <VictoryBar
            labelComponent={
              <VictoryLabel
                dy={-20}
                textAnchor="end"
              />
            }
            key={idx}
            style={{
              data: {
                fill: i.color,
                strokeWidth: 15
              },
              labels: {
                fontSize: 15
              }
            }}
            horizontal
            data={[
              {
                x: i.label,
                y: i.value,
                label: i.label
              }
            ]}
          />
        );
      })}
    </VictoryStack>

[JarLowrey]

I am also having this issue when range is specified on VictoryAxis or VictoryChart with latest "victory": "^0.27.2" (not react-native)

[peacechen]

This is still happening with the latest release 30.1.0 of victory-native.

Please re-open this issue.

[boygirl]

@peacechen sorry about that. I will attempt to reproduce.

[peacechen]

Thanks for looking into this again @boygirl

The code snippet in the OP recreates it. Not sure if it's dependent on the width or height props. The height I pass to it is small, approx value of 10.

[mmiocevic]

I know it is different, but similar issue happened when using VictoryGroup in VictoryChart in Victory (v 31).
Basically, component was throwing same error and whole chart was "broken" due to having

height={this.state.chartHeight}

and this chartHeight state property was smaller than this range prop.
For me solution was to increase height, e.g.

height={this.state.chartHeight + data.length * 20}

Basically try to tweak chart size (width and/or height).
Hope this helps.

@peacechen thank you for you last comment. It helped me realized for this issue.

Thanks!

[ablamunits]

I ran into this issue as well.
In my case I stored the initial (default) width of the chart in the component's state, and the initial value for the width was set to 0:

state = {
   width: 0
}

...

<VictoryChart width={this.state.width} />

This width is overridden on render, when the width of the container is calculated.
I was able to get rid of the errors by setting the initial width in the state to 1.

[vjsingh]

This is still happening for me when my VictoryChart was passed a height of 0 initially. Use case is using a hook to get the size of the window.