Get dates highcharts onChange

Question

Here is an example of a graph I'm using: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/basic-line/

Below it I have a table I need to update when the dates are changes (either with the draggable range at the bottom or manually inputed in input boxes not shown in this example).

Here's my dummied down code concerning the chart

const PageLineChart = props => {
  let data = [];
  const { title,
          heading,
          subtitle,
          legend,
          defaultRange,
          xLabel,
          yLabel
          } = props.column;

  var selected;

  defaultRange
  ? selected = ['1m', '3m', '6m', 'ytd', '1y', 'all'].indexOf(defaultRange)
  : selected = 3;

  const series = props.column.values.map(field => {
    return {
      name: field,
      data: [],
      tooltip: {
        valueDecimals: 2
      }
    };
  });

  props.data.map((row, index) => {
    const timeStamp = moment(row[props.column.category]).unix() * 1000;

    props.column.values.forEach((field, index) => {
      series[index].data.push([timeStamp, Number(row[field])]);
    });
  });

  data.reverse();

  const chartConfig = {
    rangeSelector: {
      selected
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    title: {
      text: title
    },
    subtitle: {
      text: subtitle
    },
    xAxis: {
      title: {
        text: xLabel || ''
      }
    },
    yAxis: {
      title: {
        text: yLabel || ''
      }
    },
    tooltip: {
      formatter: function() {
        var s = '<span style="font-size: 10px">' + moment(this.x).format('MMMM Do YYYY') + '</span><br/>';
        for (var i = 0; i < this.points.length; i++) {
          var prefix = '';
          if (props.column.hasOwnProperty('format')) {
            prefix = formatNumber(this.points[i].y, props.column.format);
          } else {
            prefix = formatNumber(this.points[i].y);
          }
          var myPoint = this.points[i];
          s += '<br/><span style="color:' +
          myPoint.series.color +
          '">\u25CF</span> ' +
           capitalize(myPoint.series.name) + ': ';
          /* Need to check whether or not we are dealing with an
           * area range plot and display a range if we are
           */
          if (myPoint.point.low && myPoint.point.high) {
            s += myPoint.point.low + ' - ' + myPoint.point.high;
          } else {
            s += prefix;
          }
        }
        return s;
      }
    },
    plotOptions: {
      series: {
        animation: true
      }
    },
    shared: true,
    series: series
  };

  return (
    <div className="panel panel-default no-bg b-a-2 b-gray-dark">
      <div className="panel-heading">
        {heading}
      </div>
      <div className="panel-body">
        <HighStock config={chartConfig} />
      </div>
    </div>
  );
};

Preferably I would have liked a function that fires when changing dates and has access to the 'startDate' and 'endDate' but I can't seem to find anything in the docs.

Does anyone have any ideas please?

Answer 1

use setExtremes - Fires when the minimum and maximum is set for the axis, either by calling the .setExtremes() method or by selecting an area in the chart. One parameter, event, is passed to the function. This contains common event information based on jQuery or MooTools depending on which library is used as the base for Highcharts.

Highcharts.stockChart('container', {
    xAxis: {
        events: {
            setExtremes: function (e) {
                $('#report').html('<b>Set extremes:</b> e.min: ' + Highcharts.dateFormat(null, e.min) +
                    ' | e.max: ' + Highcharts.dateFormat(null, e.max) + ' | e.trigger: ' + e.trigger);
            }
        }
    },
    rangeSelector: {
        selected: 1
    },
    series: [{
        name: 'USD to EUR',
        data: usdeur
    }]
});

reference

Example demo