How to send other variables in x-axis of ReactHighCharts?

Question

I am using ReactHighCharts where I have barChartConfiguration like this:

    let data = {1: {value: 9000}, 2: {value: 12500}}
    let categories = [];
     Object.keys(data).forEach(obj =>  {
              let id = obj;
              let value = obj[id].value;
              categories.push(value)
             }
         );

So now,

      categories = [9000, 12500]

barChartConfig: {
    chart: {
      type: "column"
    },
    title: {
      text: "Playback Summary"
    },
    xAxis: {
      categories,
      crosshair: true
    },
    yAxis: {
      min: 0,
      title: {
        text: "Counts (numbers)"
      }
    },
    tooltip: {
      headerFormat:
        '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat:
        '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} Count</b></td></tr>',
      footerFormat: "</table>",
      shared: true,
      useHTML: true
    },
    plotOptions: {
      series: {
        cursor: 'pointer',
        point: {
          events: {
            click: (e) => { this.props.history.push(`/showdata/${id}`)  }
          }
        }
      }
    },
    series
  };

And passing this barChartConfiguration to

 <ReactHighcharts config={barChartConfiguration} />

I have added onClick event to each bar, where I have to navigate to another screen. But the issue is that I am unable to pass the 'id' to the route. How can I send the id (the id is where I am mapping the data array)

score 0 · Answer 1 · answered May 18 '20 at 08:48

What you can do is tie the data parameter you want to use inside your series.

There are multiple ways to create a serie but one solution would look like this:

series: [
  {
    data: [[1, "Highcharts", 10], [1, "React", 22], [3, "Highsoft", 22]],
    keys: ["y", "name", "routeId"],
    type: "bar"
  }
]

Using this, you can add any piece of data you want (here it's a routeId) to your series. You can then use that later in your event like this (the data you added is tied to a single point in this example):

events: {
  click: e => {
    this.props.history.push(`/showdata/${e.point.routeId}`);
  }
}

Here's an example with a bar chart: https://codesandbox.io/s/highcharts-react-demo-dpck6

score 0 · Answer 2 · answered May 18 '20 at 11:38

0

Below is my idea how to get access to the id defined in your data example.

Demo: https://codesandbox.io/s/highcharts-react-demo-13kx9

point: {
  events: {
    click() {
      for (let i in data) {
        if (data[i].value === this.category) {
          console.log(i);
        }
      }
    }
  }
}

Changing the click (e) => into the click() assigns this to the point value what gives you access to the point.category value.

answered May 18 '20 at 11:38

Sebastian Wędzel

11,417
1
6
16

Here date[i].value can be same. So that time, this will not work properly – Pariksha May 18 '20 at 18:24
I don't understand why this will not work properly. The category value is assigned from the data[i].value. – Sebastian Wędzel May 19 '20 at 06:37

How to send other variables in x-axis of ReactHighCharts?

2 Answers2