How to change the chart title dynamically on tooltip hover in the points Highcharts.. React JS

Question

How to change the chart title dynamically on hover in Highcharts JSfiddle

http://jsfiddle.net/q4b7dvmx/1/

tried with setState but its not working perfectly

tooltip:{
enabled: true,
                    borderRadius: 0,
                    borderWidth: 0,
                    shadow: false,
                    shared: true,
                    useHTML: true,
                    zIndex: 99999,
                    
                    formatter() {
                        // ToolTip Built Here
                        
                        const { x , y } = this; 

                    
                        let tooltipString = `<div > ${y}
                                             </div>`;

                                            //  that.props.updateDates( this.points[0].series.userOptions.dates[this.points[0].key] );
                            return tooltipString;
                    }
}

Answer 1

The easiest way is to change a title text attribute in tooltip formatter function.

    tooltip: {
        ...,
        formatter(e) {
            const {
                x,
                y
            } = this;

            e.chart.title.attr({
                text: 'ftest' + ' x value: ' + x
            });
        }
    }

---

Live demo: http://jsfiddle.net/BlackLabel/tk1avpze/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr

Answer 2

Do you mean on hover of a data-point? in that case, your demo does nothing to the chart title.

Either way, you should check this post; How can I access a hover state in reactjs?

EDIT;

Did you see https://api.highcharts.com/highcharts/tooltip.formatter - it adresses the formatter. It seems to be the answer, from the looks of a similar question;

Highcharts.js : get specific value from data to tooltip