Tool tip strange behavior

[dizzy]

Hi, i have a multipane chart.

can you explain the behavior in the attached You will notice that there is no tooltips for the 2nd pane, but if i zoom in there is.
https://drive.google.com/file/d/1-3lvfa ... sp=sharing

The first pane is OHLC candle stick data that goes back to 1928. the second data in the bottom pane, doesnt have as much data so lots of nulls for early dates. Im not sure if that has anything to do with it. i have tried a few configurations to fix this, but nothing seems to help much.
It also seems somewhat random...as depending on the length of the timeseries..shorter timeseries it works more often the way i would expect.

this is my tooltip configuration:

Code: Select all

export const defaultChartOptions = {
    chart: { zoomType: 'x' },
    navigator: {
        series: {color: Highcharts.getOptions().colors[0]},
        height: 20,
        xAxis: { overscroll: 4838400000 }
    },
    legend: {
        enabled: false,
        align: 'right',
        verticalAlign: 'top',
        layout: 'vertical',
        style: "{display: None}"
    },
    // Add the tooltip configuration here
    tooltip: {
        split: true,
        shared: true,
        valueDecimals: 2,
        followPointer: true,
        hideDelay: 0,
        outside: true,
        distance: 50,
        snap: 10,
        stickyTracking: true,
    },    
    rangeSelector: {
        buttons: [
            { text: '1m', type: 'month', count: 1 }, 
            { text: '3m', type: 'month', count: 3 }, 
            { text: '6m', type: 'month', count: 6 }, 
            { text: '1y', type: 'year', count: 1 }, 
            { text: '3y', type: 'year', count: 3 }, 
            { text: '5y', type: 'year', count: 5 }, 
            { text: '10y', type: 'year', count: 10 }, 
            { text: '20y', type: 'year', count: 20 }, 
            { text: 'YTD', type: 'ytd', count: 1 }, 
            { text: 'All', type: 'all' }
        ],
        selected: 6,
        allButtonsEnabled: true,
    },
    plotOptions: {
        series: {
            boostThreshold: 1,
            turboThreshold: 1,
            dataGrouping: {
                enabled: false
            }
        }
    },
    exporting: {
        chartOptions: {
            navigator: { enabled: false },
            scrollbar: { enabled: false }
        }
    },
    stockTools: {
        gui: {
            buttons: ['logScaleTBB','indicators', 'separator', 'simpleShapes', 'lines', 
                     'crookedLines', 'measure', 'advanced', 'toggleAnnotations', 'separator', 
                     'verticalLabels', 'flags', 'separator', 'zoomChange', 'fullScreen', 
                     'typeChange', 'separator', 'currentPriceIndicator', 'saveChart', 'yAxisXHairTBB'],
            definitions: {
                logScaleTBB: {
                    className: 'toggle-logscale',
                    symbol: 'logarithmic.svg'
                },
                yAxisXHairTBB: {
                    className: 'toggle-yaxis-xhair',
                }
            }
        }
    }

[andrzej.b]

Hi,

Thanks for contacting us with your question.

It sounds like the issue you're experiencing might be related to how the tooltip's split and shared options are interacting with the data density and null values in your second pane.

Here's a breakdown of what might be happening and some suggestions to troubleshoot:
1. ​Tooltip Configuration​: When using split: true, the tooltip is split into multiple boxes, one for each series. If a series has a lot of null values, the tooltip might not appear for those points unless you zoom in and have data points closer together. The shared: true option is generally used with line charts where you want to share the tooltip across multiple series at the same x-axis value.
2. ​Data Density and Null Values​: The presence of many null values in the second pane can affect how tooltips are displayed. If there are large gaps in the data, the tooltip might not show up unless you zoom in to a range where data points are more frequent.
3. ​Zooming Behavior​: When you zoom in, you reduce the time range, potentially increasing the data density, which might make the tooltip appear as expected.
4. ​Random Behavior​: This might be due to varying data density across different time periods. Shorter time series might naturally have higher data density, making the tooltip work more consistently.

Suggestions​:
• ​Check Data Alignment​: Make sure the data points are aligned correctly across panes. If the x-values don't match up, the shared tooltip might not work as expected.
• ​Modify Tooltip Options​: Try setting split: false and see if the behavior changes. This might help if the split tooltips are causing issues due to null values.
• ​Inspect Data​: Ensure that the data for both panes is complete and correctly formatted. Sometimes, data inconsistencies can lead to unexpected tooltip behavior.
• ​Debugging​: Use console logs or debugging tools to inspect the data and tooltip events. This might give you more insight into when and why the tooltip fails to show.

If you're still having trouble, feel free to share more details or a code snippet, and we can take a closer look.

Kind regards,

[dizzy]

The data is definitely aligned along same x date axis, as all the data from is from a single pandas dataframe indexed by date.
The issue still happens if i set split = False. The difference is there is only one tooltip box, but the bottom pane's series does not show in the tooltip unless i zoom in.
I will do some debugging to see if i can observe any things that may contribute to this..as of right now im not seeing any exception...just a common warning about styling which dont think has anything to do with it (i would hope)

accessibility.js:12
[Deprecation] -ms-high-constrast is in the process of being deprecated. Please see https://blogs.windows.com/msedgedev/202 ... -contrast/ for tips on updating to the new Forced Colors Mode standard.

[dizzy]

Did some additional testing...only with both split and shared set to FALSE , does the issue NOT happen. if either one is true, the problem surfaces.
Unfortunately, that is not a solution..as i do need them to be split and shared.

[dizzy]

I am trying to recreate the issue with a smaller code sample, but it is difficult as i think it requires ALOT of data to recreate. But i did see one other observation that is interesting...notice in the attached image where the 'shared' cursor is (the vertical line), but notice where the bottom chart is highlighting the points? This does not happen if i zoom in on the chart however. why would this happen? again, the data does have gaps with null values, but all dates are aligned correctly from what i can see between the top and bottom series

Screenshot 2024-12-15 164917.png (88.54 KiB) Viewed 519 times

also here is my full chart configuration in case anything obvious stands out

Code: Select all

export const defaultToolTip = {
    backgroundColor: "#ffffff",
    borderColor: undefined, 
    borderWidth: 1, 
    distance: 0,
    enabled: true,
    followPointer: true,
    formatter: undefined,
    padding: 8,
    positioner: undefined,
    shadow: true,
    shared: true,
    split: true,    
    valueDecimals: 2,
};

export const defaultChartOptions = {
    chart: { zoomType: 'x' },
    navigator: {
        series: {color: Highcharts.getOptions().colors[0]},
        height: 20,
        xAxis: { overscroll: 4838400000 }
    },
    legend: {
        enabled: false,
        align: 'right',
        verticalAlign: 'top',
        layout: 'vertical',
        style: "{display: None}"
    },
    xAxis: {
        ordinal: false,
        top: 65,
        type: 'datetime',
        overscroll: 4838400000,
        dateTimeLabelFormats: {
            millisecond: '%H:%M:%S.%L',
            second: '%H:%M:%S',
            minute: '%H:%M',
            hour: '%H:%M',
            day: '%b %e',
            week: '%b %e',
            month: '%b\'%y',
            year: '%Y'
        },
        crosshair: {
            enabled: true,
            width: 1,
            color: '#cccccc',
            snap: false
        }
    },
    // Add the tooltip configuration here
    tooltip: defaultToolTip,    
    rangeSelector: {
        buttons: [
            { text: '1m', type: 'month', count: 1 }, 
            { text: '3m', type: 'month', count: 3 }, 
            { text: '6m', type: 'month', count: 6 }, 
            { text: '1y', type: 'year', count: 1 }, 
            { text: '3y', type: 'year', count: 3 }, 
            { text: '5y', type: 'year', count: 5 }, 
            { text: '10y', type: 'year', count: 10 }, 
            { text: '20y', type: 'year', count: 20 }, 
            { text: 'YTD', type: 'ytd', count: 1 }, 
            { text: 'All', type: 'all' }
        ],
        selected: 6,
        allButtonsEnabled: true,
    },
    plotOptions: {
        series: {
            boostThreshold: 1,
            turboThreshold: 1,
            dataGrouping: {
                enabled: false
            }
        }
    },
    exporting: {
        chartOptions: {
            navigator: { enabled: false },
            scrollbar: { enabled: false }
        }
    },
    stockTools: {
        gui: {
            buttons: ['logScaleTBB','indicators', 'separator', 'simpleShapes', 'lines', 
                     'crookedLines', 'measure', 'advanced', 'toggleAnnotations', 'separator', 
                     'verticalLabels', 'flags', 'separator', 'zoomChange', 'fullScreen', 
                     'typeChange', 'separator', 'currentPriceIndicator', 'saveChart', 'yAxisXHairTBB'],
            definitions: {
                logScaleTBB: {
                    className: 'toggle-logscale',
                    symbol: 'logarithmic.svg'
                },
                yAxisXHairTBB: {
                    className: 'toggle-yaxis-xhair',
                }
            }
        }
    }
};

[andrzej.b]

Hi,

Thanks for checking the suggestions shared. As for the tooltip setting, it can't be both shared and split; split is taking precedence. See the API.
As for the further steps, would you mind reproducing the issue in an online editor so I can help you with it?

Kind regards,

[dizzy]

its a bit tricky to reproduce. but after debugging the highchart source, i did two things..
1. removed the boost settings
2. added stickTracking to the plotOptions.series setting (im not sure if this was removed during my debugging/testing and trying to resolve this issue)

that resolved the issue. though not quite sure why given that in my original post, the video i showed seemed to indicate stickyTracking was set as my mouse was showing the tooltip without having to be over the actual series points.

as for boost...weird things seem to happen with it enabled.

[andrzej.b]

Hi,

That's great to hear! In case of any further questions, feel free to contact us again.

Best,