Victory: Axis Labels not always updating

[iffy]

I have some area charts in which the X-axis labels are not always being updated.

<V.VictoryChart
    domain={{y: [0, max_bal * 1.25]}}
    height={200}
    width={800}
  >
    <V.VictoryAxis
      standalone={false}
      tickValues={tickValues}
    />
    <V.VictoryAxis
      dependentAxis
      tickFormat={x => cents2decimal(x)}
    />
    <V.VictoryArea
      data={data}
      interpolation="catmullRom"
      x="month"
      y="end_balance" />
</V.VictoryChart>

For example, when tickValues changes from the first to the second line

["Aug 2016", "Sep", "Oct", "Nov", "Dec", "Jan 2017", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
["Sep 2016", "Oct", "Nov", "Dec", "Jan 2017", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]

The chart still shows Aug 2016 ... Jul as the labels.

The data/lines/area is changing, just not the labels. I'd submit a PR if I could find the responsible code.

[iffy]

I've found out why, but not sure of the fix.

Here's VictoryChart.render with inline comments. (https://github.com/FormidableLabs/victory-chart/blob/master/src/components/victory-chart/victory-chart.js#L229):

function render() {
  const props = this.state && this.state.nodesWillExit ?
    this.state.oldProps || this.props : this.props;
  //
  // At this point, props.children[0].props.tickValues
  // is an array of string like this:
  // ["Sep 2016", "Oct", "Nov", "Dec", "Jan 2017", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]
  //
  const modifiedProps = Helpers.modifyProps(props, fallbackProps, "chart");
  const { eventKey, containerComponent } = modifiedProps;
  const axes = props.polar ? modifiedProps.defaultPolarAxes : modifiedProps.defaultAxes;
  const childComponents = ChartHelpers.getChildComponents(modifiedProps, axes);

  //
  // At this point, childComponents[0].props.tickValues is
  // still that list
  //

  const calculatedProps = this.getCalculatedProps(modifiedProps, childComponents);

  //
  // At this point, calculatedProps introduces a mapping of tickValues
  // rather than the actual values.
  //
  // > calculatedProps.categories.x
  // ["Sep 2016", "Oct", ...]
  //
  // > calculatedProps.domain.x
  // [0, 12]
  //
  // > calculatedProps.stringMap.x
  // { Apr: 8, Aug: 12, Dec: 4, ... }
  //

  const newChildren = this.getNewChildren(modifiedProps, childComponents, calculatedProps);

  //
  // And now newChildren[0].props.tickValues is an array of numbers
  // rather than an array of strings:
  //
  // > newChildren[0].props.tickValues
  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
  //
  const containerProps = this.getContainerProps(modifiedProps, calculatedProps);
  const container = this.renderContainer(containerComponent, containerProps);
  if (this.events) {
    return (
      <VictorySharedEvents events={this.events} eventKey={eventKey} container={container}>
        {newChildren}
      </VictorySharedEvents>
    );
  }
  return React.cloneElement(container, container.props, newChildren);
}

The problem is that the tickValues are always [1...12] even though the labels change.

[omeid]

Hitting this issue, I have labels that change based on the other dimension of the data but the 'tickValues' remain the same.

[SamSamskies]

I just hit this issue as well. Used this as a hack in my component containing the VictoryAxis to fix it for now:

constructor(props) {
  super()
  this.state = { tickValues: props.tickValues }
}

componentWillReceiveProps(nextProps) {
  // TODO: Remove once VictoryAxis not updating bug is fixed
  // https://github.com/FormidableLabs/victory/issues/699
  if (!isEqual(nextProps.tickValues, this.state.tickValues)) {
    this.setState(
      { tickValues: [] },
      () => this.setState({ tickValues: nextProps.tickValues })
    )
  }
}

[SamSamskies]

@boygirl I upgraded to 0.24 and this issue is still not resolved for me. When I pass new tickValues to VictoryAxis it still doesn't re-render with the new values.

[nicolasrenon]

Same issue here with 0.25.7.