set Highstock xAxis range within options object

Question

My React components pulls data for an API. The options.series.data data for the yAxis is what receives the API data.

The component is enabled to pull the data range for day/hour/minute which comes with a datestamp for when the data was recorded. How do I dynamically set the xAxis min/max range to respect the day/hour/minute duration change?

The HighchartsReact instance receives the data series via the options object that's where I'd like to setup the dynamic xAxis handler method. Perhaps it's setExtemes().

The component code is below.

import React, { Fragment, useState, useEffect } from 'react';
import { connect } from 'react-redux';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import highchartsStockChart from 'highcharts/modules/stock';
import { getDaily, getHourly, getMinute } from '../actions/getData';
import Spinner from './Spinner';

Highcharts.setOptions({
  lang: {
    thousandsSep: ','
  }
});
highchartsStockChart(Highcharts);

const Chart = ({
  match,
  list: { list, loading },
  getDaily,
  getHourly,
  getMinute,
  error
}) => {
  const [method, setMethod] = useState(() => getDaily);

  useEffect(() => {
    method(match.params.currency.toUpperCase(), 30);
  }, [match.params.currency, method]);

  console.log('Chart.js list:', list);
  console.log('Chart.js error:', error);
  console.log('Chart.js loading:', loading);

  const options = {
    title: {
      text: 'Close Price'
    },
    series: [{
      name: 'close price',
      data: list.map(item => item.close),
      tooltip: {
        pointFormat: 'close price: ${point.y:,.2f}'
      },
      animation: false
    }],
    scrollbar: {
      enabled: false
    },
    navigator: {
      enabled: false
    },
    rangeSelector: {
      inputEnabled: false,
      allButtonsEnabled: true,
      buttonSpacing: 10,
      buttonPosition: {
        align: 'left'
      },
      buttons: [{
        type: 'day',
        count: 1,
        text: 'Day',
        events: {
          click: () => setMethod(() => getDaily)
        }
      }, {
        type: 'hour',
        count: 1,
        text: 'Hour',
        events: {
          click: () => setMethod(() => getHourly)
        }
      }, {
        type: 'minute',
        count: 1,
        text: 'Minute',
        events: {
          click: () => setMethod(() => getMinute)
        }
      }]
    }
  };

  let content;
  if (error && error.message) {
    content = error.message;
  } else if (!list.length || loading) {
    content = <Spinner />;
  } else {
    content = (
      <Fragment>
        {list.map(item => <span key={item.time}>{item.close} </span>)}
        <button onClick={() => setMethod(() => getHourly)}>set Hourly</button>
        <button onClick={() => setMethod(() => getMinute)}>set Minute</button>
        <HighchartsReact
          highcharts={Highcharts}
          options={options}
          constructorType={'stockChart'}
        />
      </Fragment>
    );
  }

  return (
    <div>
      Chart.
      {content}
    </div>
  );
};

const mapStateToProps = state => ({
  list: state.data,
  error: state.error
});

export default connect(mapStateToProps, { getDaily, getHourly, getMinute })(Chart);

Answer 1

You can:

• use chart redraw event callback function and call setExtremes:

---

chart: {
    events: {
        redraw: function() {
            if (allowChartRedraw) {
                allowChartRedraw = false;
                this.xAxis[0].setExtremes(0, Math.random() * 3);
            }

            allowChartRedraw = true;
        }
    }
}

Live example: http://jsfiddle.net/BlackLabel/wvpnct9h/

API Reference: https://api.highcharts.com/highcharts/chart.events.redraw

---

• keep all of the options in a state and manipulate axis extremes by min and max properties:

---

componentDidMount() {
  this.setState({
    chartOptions: {
      series: [
        {
          data: [Math.random() * 3, Math.random() * 3, Math.random() * 3]
        }
      ],
      xAxis: {
        min: 0,
        max: Math.random() * 3
      }
    }
  });
}

Live demo: https://codesandbox.io/s/highcharts-react-demo-jo6nw

---

• get the chart reference and call setExtremes on the xAxis.

Docs: https://github.com/highcharts/highcharts-react#how-to-get-a-chart-instance