When updating data dynamically, Axis is not updated

I used websocket to dynamically update state, and now the curve has changed, but the value on the axis is unchanged

I want the chart to show changes with the state changes, is there any way?

version: 0.22.3

import React, { Component } from 'react';
import { ComposedChart, Line, Area, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

export default class extends Component {
  static defaultProps = {
    chartData: [],
  };

  state = {
    chartData: this.props.chartData,
  }

  componentWillReceiveProps({ chartData }) {
    if (this.props.chartData !== chartData) {
      this.setState({ chartData });
    }
  }

  render() {
    const { chartData } = this.state;
    return (
      <div>
        {
          chartData.length ? <ResponsiveContainer height={250} >
            <ComposedChart data={chartData} margin={{ top: 0, right: -15, left: -8, bottom: 0 }} >
              <XAxis dataKey="Name" />
              <YAxis yAxisId="left" orientation="left" />
              <YAxis yAxisId="right" orientation="right" />
              <CartesianGrid strokeDasharray="3 3" />
              <Tooltip />
              <Legend />
              <Area yAxisId='left' type='monotone'  dataKey='TotalCount' fill={'#00BCD4'} stroke={'#00BCD4'}  />
              <Line yAxisId='right' type='monotone'  dataKey='AverageElapsed' stroke={'#00E676'} unit='ms' />
              <Bar yAxisId='right' type='monotone'  dataKey='TotalErrors' fill={'#F44336'}  />
            </ComposedChart>
          </ResponsiveContainer> : <div className='chart-empty'>empty</div>
        }
      </div>
    )
  }
}

[xiaoyu-tamu]

It’s still an issues on version 1.8.1

No plan to fix this issue?

workaround to pass random key to force rerender…

    <YAxis
          key={Math.random()}
          orientation="right"
          yAxisId="y2"
    />

[TheWildHorse]

The problem for me was that the API returned the numbers in a string format which confused Recharts.