CODEWITHSUNDEEP
reactjshighcharts
Aswath
Aswath

Reputation: 986

React highcharts unable to call function from data label onclick

I need to call a react function on datalabel on click. I'm void of answers. I'm using highcharts 

 chart: {
                type: 'column',
                zoomType: 'y'
            },

 dataLabels: {
                    enabled: true,
                    useHTML: true,
                    formatter: function () {
                        return `<div><span class="text-center">${this.point.y}</span>` +
                            '<button onClick={this.openModal} class="btn-primary graph-custom-hover">i</button></div>'
                    },
                    crop: false,
                    overflow: "none",
                    style: {
                        fontSize: '10px',
                        fontWeight: 'bold',
                        wordWrap: 'break-word',
                        width: '125px',
                        lineHeight: '10px'
                    }
                }

I have a openModal function like 

  openModal = () => {
        this.setState({
            modal2: !this.state.modal2
        });
    }

When I use this my rendering goes like

<button onclick="{this.openModal}" class="btn-primary graph-custom-hover">i</button>

in the actual html.

Thanks in advance

Upvotes: 0

Views: 359

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

You need to seems that you don't trigger the function callback on the click event. Instead of onClick={this.openModal} it should be onClick={this.openModal()}.

Check this demo: https://codesandbox.io/s/highcharts-react-demo-k30l0

EDIT:

Working demo: https://codesandbox.io/s/highcharts-react-demo-29u2u

Upvotes: 0

Related Questions