wballoni
Posts: 3
Joined: Mon Jun 13, 2016 6:06 pm

Can't disable default xAxis crosshair label

I have a stockChart with 2 Y axes, one series each. I want each series to have a readout tooltip, and I want the tooltips for both series to be displayed simultaneously. If I use tooltip.split = true (the default), I get this behavior.

BUT, I also want to customize the X axis crosshair readout tooltip using a formatter. With tooltip.split = true, I see my tooltip behind the default tooltip. If I set tooltip.split = false, only my X axis crosshair tooltip is displayed (as desired), but only one Y axis tooltip is displayed at one time (not desired).

Is there a way to get only my own X axis crosshair readout tooltip, along with simultaneous display of the Y axis tooltips?

Here is a fiddle that demonstrates the issue: https://jsfiddle.net/wballoni/zxaw348g/8/

Thanks, Bill
cosy
Posts: 118
Joined: Fri Feb 02, 2018 10:22 am

Re: Can't disable default xAxis crosshair label

Hi Bill,

I tried to solve your issue, but as you can see, there will always be a small box on the axis: https://jsfiddle.net/zxaw348g/51/
The conclusion is, that you can not actually have split tooltips and crosshair labels at the same time. Therefor I suggest, you go instead with the shared tooltip, that is similar to the split one.

Code: Select all

Highcharts.stockChart('container', {
    tooltip: {
        shared: true
    }
});
Best regards,
Sophie
cosy
Posts: 118
Joined: Fri Feb 02, 2018 10:22 am

Re: Can't disable default xAxis crosshair label

Hello again,

Surprisingly there is a solution to this, as our colleagues at Black Label point out: https://jsfiddle.net/BlackLabel/zxaw348g/56/

Code: Select all

(function(H){
    H.wrap(H.Tooltip.prototype, 'renderSplit', function (proceed) {
        proceed.apply(this, [].slice.call(arguments, 1));
        this.tt.destroy();
        this.tt = undefined;
    });
}(Highcharts))
It removes the default crosshair label, so yours is visible.

Best regards,
Sophie
wballoni
Posts: 3
Joined: Mon Jun 13, 2016 6:06 pm

Re: Can't disable default xAxis crosshair label

Sophie,

Works like a charm! For me as a neophyte Highcharts user, its seems like a bit of black magic. But it works, and I'll take some time to figure out how! It would be nice if this was a bit more obvious (as in, a specific configuration option).

Thanks for your help,

Bill
cosy
Posts: 118
Joined: Fri Feb 02, 2018 10:22 am

Re: Can't disable default xAxis crosshair label

Hi Bill,

Thank you for the feedback. The power of Highcharts does no only lies in the huge amount of options, but also in the possibilities to extend and modify most functionality in some way, although this needs some advanced insight in how Highcharts work. You can find more information about this in our documentation, for example here: https://api.highcharts.com/highcharts/chart.events and here: https://api.highcharts.com/class-refere ... harts#wrap.

If you have more questions, do not hesitate to ask them.

Best regards,
Sophie
intrasight
Posts: 1
Joined: Fri May 06, 2022 4:40 pm

Re: Can't disable default xAxis crosshair label

I'm also trying to remove the default xAxis crosshair labels. I added that block of code before my Highcharts.chart() call. Now when I mouseover the chart, I get the error:
"cannot read properties of undefined (reading 'destroy')
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Can't disable default xAxis crosshair label

Hi intrasight,

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

Please create simplified live demo with your chart and the issue. You can start here:
https://jsfiddle.net/BlackLabel/7y2t40fo/

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”