CODEWITHSUNDEEP
reactjshighchartsreact-highcharts
Hitesh Kumar
Hitesh Kumar

Reputation: 3698

react-hightchart: all values in event.point are null

I am using react-highchart-official in my project. I need to retrieve some values from the click event. In the component, the event listener is set using plotOptions like this:

plotOptions: {
        series: {
          point: {
            events: {
              click: event => {
                this.props.onClick && this.props.onClick(event);
              }
            }
          }
        }
      }

It gets invoked with event object which contains a point entry. point contains useful information regarding chart.

The chart component is used as:

import React from 'react';
import { render } from 'react-dom';
// Import Highcharts
import Highcharts from 'highcharts';

// Import our demo components
import Chart from './components/Chart.jsx';

// Load Highcharts modules
require('highcharts/modules/exporting')(Highcharts);

const chartOptions = {
  title: {
    text: ''
  },
  series: [
    {
      data: [[1, 'Highcharts'], [1, 'React'], [3, 'Highsoft']],
      keys: ['y', 'name'],
      type: 'pie'
    }
  ]
};

class App extends React.Component {
  state = { flag: true };

  onChartClick(event) {
    // All values of event.point are null. Not sure why.
    // Even though it's not a synthetic event.
    console.log(event.point);
    this.setState({ flag: false });

  }

  render() {
    const { flag } = this.state;
    return (
      <div>
        <h1>Demos</h1>
        <h2>Highcharts</h2>
        {flag && (
          <Chart
            highcharts={Highcharts}
            onClick={this.onChartClick.bind(this)}
          />
        )}
      </div>
    );
  }
}

For some unknown reasons, all the value inside point property of click event is set to null if I hide the chart. Is there any way I can avoid it? In the actual project on chart click I need to redirect user to somewhere. To imitate the situation, I have hidden the chart.

Codesandbox

Upvotes: 1

Views: 479

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

This situation exactly shows what happened with your point data, see:

Demo: https://jsfiddle.net/BlackLabel/o70mLrnt/

var chart = Highcharts.chart('container', {

  series: [{
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }]
});

console.log(chart.series[0].points[1])
chart.destroy();

Setting the flag to false unmounting the component which destroys the chart and later console.log doesn't have 'access' to chart and particular point properties.

If you need only a few data from the point a good option will be setting them in the state before the flag will be changed.

Like this - this will keep your point y value. 

this.setState({
  pointValue: event.point.y
});

Another solution which came to my mind is to set the whole point object to some variable, but here the setTimeout needs to be used.

Demo with setState solution and saving object to variable: https://codesandbox.io/s/highcharts-react-demo-dnbdv

Upvotes: 1

Related Questions