Area Chart Issue

[Pro BC]

@ilyjs
I've used implemented depth map in React.
But I've faced the strange issue.
Please check this screenshot and code.
What is the problem?

bids and asks are dynamic data.
But when use static data, graph is Ok.

import React from 'react';
import { connect } from 'react-redux';
import Highcharts from 'highcharts/highcharts';
import HighchartsReact from 'highcharts-react-official';
import { translate } from 'react-i18next';
import _ from 'lodash'

class TradeDepth extends React.Component {
  state = {
    asks: [],
    bids: [],
  }

  componentDidMount() {
    this.refreshDepth(this.props.marketData)
  }

  componentWillReceiveProps(newProps) {
    this.refreshDepth(newProps.marketData);
  }

  refreshDepth = (marketData) => {

    let asks = [];
    let bids = [];
    let bids_sum = 0
    let asks_sum = 0;

    if (marketData && !_.isEmpty(marketData.asks)) {
      asks = marketData.asks.map(ask => {
        let ret = [];
        ret.push(ask[0]);
        ret.push(asks_sum += parseFloat(ask[1]));
        return ret;
      });
    }
    if (marketData && !_.isEmpty(marketData.bids)) {
      bids = marketData.bids.map(bid => {
        let ret = [];
        ret.push(bid[0]);
        ret.push(bids_sum += parseFloat(bid[1]));
        return ret;
      });
      bids.reverse()
    }
    this.setState({asks, bids});
  }

  balloon = (item) => {
    const {t} = this.props
    return t('price')+": "+item
  }

  getOptions(){
    const { asks, bids } = this.state
    const { t, market } = this.props

    let lastPrice = 0
    if (market && !_.isEmpty(market.ticker)) {
      lastPrice = market.ticker.last
    }
    let min = 0
    let max = 1
    if (!_.isEmpty(asks)) {
      max = asks[asks.length-1][0]
    }
    if (!_.isEmpty(bids)) {
      min = bids[0][0]
    }


    return {
      chart: {
        type: 'area',
        // zoomType: 'x',
      },
      title: {
        text: ''
      },
      credits: {
        enabled: false
      },
      legend: {
        enabled: false
      },
      xAxis: {
        minPadding: 0,
        maxPadding: 0,
        // min: min,
        // max: max,
        plotLines: [{
          color: '#888',
          value: lastPrice,
          width: 1,
          label: {
            text: 'Actual price',
            rotation: 90
          }
        }],
        title: {
          text: t('price')
        },
      },
      yAxis: [{
        lineWidth: 1,
        gridLineWidth: 1,
        title: null,
        tickWidth: 1,
        tickLength: 5,
        tickPosition: 'inside',
        labels: {
          align: 'left',
          x: 8
        }
      }, {
        opposite: true,
        linkedTo: 0,
        lineWidth: 1,
        gridLineWidth: 0,
        title: null,
        tickWidth: 1,
        tickLength: 5,
        tickPosition: 'inside',
        labels: {
          align: 'right',
          x: -8
        }
      }],
      plotOptions: {
        area: {
          fillOpacity: 0.2,
          lineWidth: 1,
          step: 'center'
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size=10px;">Price: {point.key}</span><br/>',
        valueDecimals: 4
      },
      series: [{
        name: t('bid'),
        data: bids,
        color: '#70a800'
      }, {
        name: t('ask'),
        data: asks,
        color: '#ea0070'
      }]
    }

  }

  render() {

    return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          style={{
            minWidth: 310,
            maxWidth: 1040,
            // width: "100%",
            height: 440,
          }}
          options={this.getOptions()}
        />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  market: state.markets.market,
  marketData: state.marketData.data,
});

export default connect(
  mapStateToProps,
  null
)(
  translate('translation')(TradeDepth)
);

[Ilya Netkach]

highcharts-react-official here https://github.com/highcharts/highcharts-react