1

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;
                    }
}
Nahomb
  • 69
  • 11
  • Does this answer your question? [How can I access a hover state in reactjs?](https://stackoverflow.com/questions/32125708/how-can-i-access-a-hover-state-in-reactjs) – Markido Jul 19 '21 at 20:04

2 Answers2

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

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
0

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

Markido
  • 424
  • 3
  • 8