bryantyrrell
Posts: 2
Joined: Mon Jun 21, 2021 7:43 pm

React HighCharts Stock separate tooltips for series

Hi,

I'm currently using highcharts stock in my react app to create a stock graph. I have 3 data series (2 area types, 1 line) to be shown on the same graph. I want an individual tooltip to be displayed when I hover on a datapoint for any of the series. The problem I'm facing is all 3 tooltips show up I hover over a single series as can be seen in the attached image.

I want a single tooltip to show up when hovering over a series with one point highlighted not all 3. The tooltip shared setting will not work as it still highlights all points. An interesting thing to note is the logic works when using scatter plot series over line series. Another point I found was if I pass in a 'chart' type in the constructor over 'stockchart' an individual tooltip will also show for each series, so the problem seems to be related to stockchart type.

Thanks for any help!

Ill share some code below:

Code: Select all


   const target = calculations.map(row => row.EPS_target);

    const [targetSeries] = useState(target);

    const divPos = calculations.map(row => [ row.dividendPayOutRate]);

    const [dividendSeries] = useState(divPos);

    const dividendPos = calculations.map(row => [ row.target_and_dividend]);

    const [dividendAndTargetSeries] = useState(dividendPos);


    const options = {
    title: {
        text: 'IBM Stock Price chart'
    },
    legend: {
        enabled: true
    },
        tooltip: {
            useHTML: true,
            shared: false
    },
    xAxis: {
        type: 'Time',

        labels: {
            format: '{value:%m/%y}',
                style: {
                    fontSize: '9px'
                }
    },
    tickPositioner: function () {
            var positions = [];
            props.graphData.map(row => positions.push(new Date(row.x_time).getTime()));
            return positions;
        }
    },
    yAxis: {
        min: 0
    },
    plotOptions: {
        line: {
            marker: {
                enabled: true
            },
        series: {
            stickyTracking: false
        }
            
        }
    },
        series: [{
            name: 'target',
            data: targetSeries,
            type: 'line',
            color: '#2E8B57'
        },
        {
            name: 'dividendPayoutRate',
            data: dividendSeries,
            type: 'line',
        color: '#000000'
        
        },
        {
        name: 'dividend',
            data: dividendAndTargetSeries,
            type: 'scatter',
        lineWidth: 2,
        color: '#99ff99'
    }]
    }
}



return(
        <div>
             <div>
            <HighchartsReact
                highcharts={Highcharts}
                constructorType={'stockChart'}
                options={options}
                containerProps={{ className: 'chartContainer' }}
            />
            </div>
        
    </div>
    );

Attachments
highstock.png
highstock.png (28.81 KiB) Viewed 2051 times
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: React HighCharts Stock separate tooltips for series

Hi,
Welcome to our forum and thanks for contacting us with your question!

I set options tooltip.split to false for a separate tooltip, when you hover on series the tooltip is showing only for this specific series.

Live demo:
https://jsfiddle.net/BlackLabel/2sfpz4d3/

API References:
https://api.highcharts.com/highstock/tooltip.split

Are you looking for something like the example above?
Best regards.
Sebastian Hajdus
Highcharts Developer
bryantyrrell
Posts: 2
Joined: Mon Jun 21, 2021 7:43 pm

Re: React HighCharts Stock separate tooltips for series

Hi Sebastian,

Thanks you that's exactly what I needed!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: React HighCharts Stock separate tooltips for series

You're welcome! :)

In case of any further questions, feel free to contact us again.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Stock”