dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

toggling series by clicking on tooltip label

Hi,
i am attempting to write code to toggle a series by clicking on the label associated to it and then also toggle opacity or class/style for the label. to do this, i have added an onclick event to the html for that label.
But when the chart is rendered - it does not appear as though the onlick event property is there in the HTML dom (i can not find it by inspecting the dom).

If that is the case, are there any alternate suggestions of doing this?

here is the code. In it i have created a function named 'toggle_series' and was hoping to invoke that function for the label's onclick event.

https://jsfiddle.net/dizzy0ny/2t0Lbsrd/88/
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: toggling series by clicking on tooltip label

Hi dizzy!
We appreciate you reaching out to us!

You can make an addEventListener on the element of rendered label by Highcharts SVG Renderer and fire desired function on click event. You can check the changed demo below to see an example (around line no 121).

Demo: https://jsfiddle.net/BlackLabel/hw7aj4p5/

Let me know if that was what you were looking for.
Regards!
Hubert Kozik
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: toggling series by clicking on tooltip label

Thanks hubert. but i dont see an event listener added in your demo. am i missing something?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: toggling series by clicking on tooltip label

I am sorry! I attached the wrong link, here is the correct one: https://jsfiddle.net/BlackLabel/hw7aj4p5/

I will also edit my previous post.

Regards!
Hubert Kozik
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: toggling series by clicking on tooltip label

excellent! this is perfect.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: toggling series by clicking on tooltip label

That's great to hear! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: toggling series by clicking on tooltip label

There is a follow-up question. Often times im showing multiple series in a 'pane'. the current implementation concatenates the labels and then adds it as one element. The click event handler is attached to that one tooltip element (which may have multiple labels). So for example if we wanted to do this for the first pane in the example provided, which has 2 series. How would that be possible?

Is there any other element that supports a click event that we can use to draw the labels? for example i was looking at the legends, and they use the button element - wondering if that can be used such that we could add a click event for each.

As mentioned, i typically render multiple series in multiple panes...this is what my code looks like. After starting to add the event handler in this code, i realized that event handler handles the tooltip element as a whole, not the individual labels:

Code: Select all

function tooltip_formatter(tooltip) { 
    const chart = tooltip.chart;
    const orig_fmt = tooltip.defaultFormatter.call(this, tooltip);

    if(chart.hoverPoints.length > 0){
        if (chart.extendedTooltips){
            for(const e of chart.extendedTooltips)
                e.destroy();
        }
    }
    //used to store the tooltip labels we render
    chart.extendedTooltips = []
    //a map of panes to series labels. we can add attributes to as needed for a 'pane'. for example the top position where the labels for a pane should be rendered
    let ext_tooltips = {}; //each element looks like: {tooltips:[{label: <span str>, index: <series index>}...]}, top: <series.yAxis.top>}

    for(i=0; i < chart.hoverPoints.length; i++)
    {
        const point = chart.hoverPoints[i];
        const pane = point.series.options.pane;
        let color = point.chg < 0?'red':'green'
        if (point.series.type == 'candlestick' || point.series.type == 'hollowcandlestick'){
            orig_fmt[1] = `<span style="color:blue">●</span><b style="color:blue">`+point.series.name+':&nbsp;O:</b>'
            +point.open.toFixed(2)+'&nbsp;<b style="color:blue">H:</b>'
            +point.high.toFixed(2)+'&nbsp;<b style="color:blue">L:</b>'
            +point.low.toFixed(2)+'&nbsp;<b style="color:blue">C:</b>'
            +point.close.toFixed(2)+'&nbsp;<b style="color:blue">Chg:</b>'
            +`<span style="color:${color}">`+point.chg.toFixed(2)+'</span>&nbsp;<b style="color:blue">%Chg:</b>'
            +`<span style="color:${color}">`+point.chg_pct.toFixed(2)+'</span>';
        } 
        //for additional series store series index, label and yAxis top where they will be rendered in dictionary
        else if (pane > 0) {
            let label = `<tspan style="color: ${point.series.color};">●</tspan> ${point.series.name}: ${point.y.toFixed(2)}`;
            if (pane in ext_tooltips)
                ext_tooltips[pane]['tooltip'].push({"series_idx":i, "label":label})
            else
                ext_tooltips[pane] = {'tooltip': [{"series_idx":i, "label":label}], 'top': point.series.yAxis.top }
        }

    }
    //loop through the map, build the label, render and add to extendedToolTips, add event handler
    for(const[k,v] of Object.entries(ext_tooltips)){
        let labels = v['tooltip'].map((t)=>{return t['label']}).join('<br/>');
        chart.extendedTooltips.push(chart.renderer.label(labels,chart.plotLeft, v['top'])
            .attr({zIndex: 100})
            .css({fontSize: `${chart.tooltip.options.style.fontSize}`})
            .add());
        //how do we add this handler to individual label elements as opposed to the tooltip element??
        //chart.extendedTooltip.element.addEventListener('click', () => toggle_series(chart.extendedTooltip, 2));
    }
    return  orig_fmt;
};
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: toggling series by clicking on tooltip label

dizzy,
I cannot reproduce your issue, because if I want to use your function a lot of errors are coming up. I didn't know you are using a different code, so I proposed you a solution based on the demo from your previous post. Your code now is a custom thing and actually, it is starting to look like help with implementation in JavaScript. Please, try to reproduce your issue in the online editor that I could work on and send me a forked link - without it, with this kind of custom code I am unable to help you.

Kind regards!
Hubert Kozik
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: toggling series by clicking on tooltip label

hi hubert,

i've tried to simplify the code here: https://jsfiddle.net/dizzy0ny/4b3dt1a0/72/

basically as you can see im adding two series to the second pane and would like to toggle each by clicking on their tooltip labels.
the problem is the labels are stacked one on top of the others. . Is there a way to determine the height of these labels so that i can properly position them so each are visible and not stacked - can can be clicked separately?

i know i can solve the positioning of those labels by creating a single html element (spans separated by <br/>). but then i can only assign a single click even for this.
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: toggling series by clicking on tooltip label

i was able to figure out that there is indeed a height property of a label. And using that i am able t render the next label correctly.
however, when i move the mouse after clicking on a label to disable it..the label completely disappears..so i am not able to re-enable or make it visiable again

https://jsfiddle.net/dizzy0ny/4b3dt1a0/111/
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: toggling series by clicking on tooltip label

a follow up question to above: is it possible to update a rendered label html after it's been created? As i struggle to solve this problem, i am trying different things...one thought is to not destroy, but update labels. but running into the following. existing_elem is a reference to the label created by chart.renderer.label.

Code: Select all

existing_elem.textSetter('<tspan style="color: #7cb5ec;"></tspan><p>dealer_net_pos: -397253.00</p>')

Code: Select all

highstock.src.js:8269 Uncaught Error: Failed to execute 'invoke' on 'CreateHTMLCallback': The provided callback is no longer runnable.
    at q.parseMarkup (highstock.src.js:8269:25)
    at new q (highstock.src.js:8084:25)
    at g.buildSVG (highstock.src.js:12032:31)
    at L.buildText (highstock.src.js:12889:17)
    at h.textSetter (highstock.src.js:10765:25)
    at h.<anonymous> (highstock.src.js:9573:29)
    at M (highstock.src.js:1313:21)
    at h.attr (highstock.src.js:9551:21)
    at a.textSetter (highstock.src.js:11560:21)
    at eval (eval at tooltip_formatter (chart_tooltip.js:49:21), <anonymous>:1:15)
it works with plain text, but not html. i do not see a specific method for update html.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: toggling series by clicking on tooltip label

dizzy,
answering your questions:
1) I suggest you change the logic to make some loops through series, find the hover points and conditionally show their values.
2) Yes, it is better for performance to update the label, instead of destroying it, you can update them with attr method.

You can see all my suggestions in the working example in the demo below.
Demo: https://jsfiddle.net/BlackLabel/tcq85oau/

Regards!
Hubert Kozik
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: toggling series by clicking on tooltip label

hubert.k wrote: Mon Sep 05, 2022 8:20 am dizzy,
answering your questions:
1) I suggest you change the logic to make some loops through series, find the hover points and conditionally show their values.
2) Yes, it is better for performance to update the label, instead of destroying it, you can update them with attr method.

You can see all my suggestions in the working example in the demo below.
Demo: https://jsfiddle.net/BlackLabel/tcq85oau/

Regards!
thank hubert. i did figure iterating over series was best way to do this - and that is what i have done.
using attr to set text works nicely. Note incase it helps anyone coming across this - you probably also have to update the 'y' property there also to handle window/page resizing.

Question - is it possible to adjust the class for these label element also after they've have been rendered? i notice that the legend uses the following css styles...would be nice to use them (or similar/custom ones) depending on whether the user toggles the series using the label click also:
.highcharts-legend-item:hover
.highcharts-legend-item-hidden
.highcharts-legend-item
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: toggling series by clicking on tooltip label

dizzy,

You can add classes to the rendered element by using addClass method.

Demo: https://jsfiddle.net/BlackLabel/rmft43Lv/
API Reference: https://api.highcharts.com/class-refere ... t#addClass

Regards!
Hubert Kozik
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: toggling series by clicking on tooltip label

thanks much

Return to “Highcharts Stock”