react-highcharts Y-axis categories catch event click in react way

Question

I'm using react-highcharts and I'm trying to find a way to trigger an event when one of the Y-axis categories is being clicked. I'm using xrange graph.I want to get the offset of the value that was clicked. For example, if i have:

CatA

Catb

CatC

If I will click on CatB I will get 1.

I found a jquery solution, which give me the value itself. Its not a problem to get all the elements and iterate over them and found the offset myself. The solution of jquery:

$("#container .highcharts-yaxis-labels text").click(function() {
            alert($(this).text());
        });

I'm looking for react/react-highcarts solution for that.

Update

Thanks Kamil Kulig! Im getting trouble with the library. I import the library as

import HighchartsCustomEvents from 'highcharts-custom-events';

And nothing happned, also i added this code at componentWillMount function:

template.yAxis.events.click = function () {
            alert(1);
        };

I saw the docs and I didnt find any offset function, which means that sould I use jquery anyway? or do u have any idea?

You can perform operations either on axis' labels (yAxis.labels.events) or axis' title (yAxis.title.events). yAxis.events won't work. — Kamil Kulig
– Kamil Kulig, Commented Apr 27, 2018 at 14:53

Kamil Kulig · Accepted Answer · 2018-04-25 09:58:09Z

1

Highcharts offers the custom events module that is able to handle the actions that you require.

Module reference on npm: https://www.npmjs.com/package/highcharts-custom-events

Module reference on Highcharts website: https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events

Sample code:

    yAxis: {
        labels: {
            events: {
                click: function () {
                   // do something
                }
            }
        }
    }

answered Apr 25, 2018 at 9:58

Kamil Kulig

5,8261 gold badge10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Elad Motola Over a year ago

I'm getting lost to combine it with react-highcharts module and es6, can you help?

Kamil Kulig Over a year ago

I can help with the official wrapper for Highcharts (You're using a non official version). This doc explains how to import an extra module to Highcharts in React (by the example of Highmaps module): (npmjs.com/package/highcharts-react-official

Elad Motola Over a year ago

Wow alot ofrreact-highcharts... I will check that right away. Any idea for getting the offset?

Collectives™ on Stack Overflow

react-highcharts Y-axis categories catch event click in react way

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related