HansR
Posts: 62
Joined: Fri Jan 01, 2021 9:44 am
Location: NL
Contact: Website

How to position a free text

I have some free text in my chart which I position like this:

Code: Select all

        chart = Highcharts.StockChart('chartcontainer', {
            title: {
                text: 'Overview',
                margin: 35
            },
            series: [],
        }, function (chart) {
            chart.customText = chart.renderer.text( 'Info', 40, 80).css({color: chart.title.styles.color}).add();
        });

This works fine.

However I do have a problem to position it correctly. On different devices the chart width may respond differently and apparently I cannot read out the width of the chart, only set it (in pixels).

How do I position my text just left of the hamburger menu and have its position remain proportional during resizing?
HansR
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to position a free text

Hi there,

Thank you for contacting us!

I guess that by hamburger menu you mean the exporting button. For that, I have created a custom logic that will create the customText on chart load, and then it updates its position on every window resize (and other occasions that trigger the chart.redraw event). The position is taken dynamically from the exporting button position and manually adjusted by a few pixels, so feel free to fine-tune it yourself.
DEMO: https://jsfiddle.net/BlackLabel/3e70gny2/

Let me know if that's what you wanted to achieve,
Best regards!
Kamil Musiałowski
Highcharts Developer
HansR
Posts: 62
Joined: Fri Jan 01, 2021 9:44 am
Location: NL
Contact: Website

Re: How to position a free text

Hi Kamil,

Yes, this is effectively what I want to achieve.

However, because I am conditionally generating my charts code, I am looking to do all that, in my text placement function after the definition of the chart. So I would like to do it something like in this fiddle but I don't seem to accomplish this.

Apparently I am missing something here as you are using a different code structure than I am.
What am I missing?

Regards,
HansR
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to position a free text

What you enter as a second argument in the Highcharts.chart( { //chart config }, function (chart) ) is equal to adding something on chart.events.load.

So maybe something like this will satisfy you?
DEMO: https://jsfiddle.net/BlackLabel/p8n1s2cv/

Regards!
Kamil Musiałowski
Highcharts Developer
HansR
Posts: 62
Joined: Fri Jan 01, 2021 9:44 am
Location: NL
Contact: Website

Re: How to position a free text

That looks what I need, thanks.
I must look into the events a bit more!
HansR
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to position a free text

You're welcome!

Take a look at this article about Highcharts events: https://www.highcharts.com/blog/tutoria ... ts-events/
And in case of any questions, feel free to ask!
Kamil Musiałowski
Highcharts Developer
HansR
Posts: 62
Joined: Fri Jan 01, 2021 9:44 am
Location: NL
Contact: Website

Re: How to position a free text

OK, good wrap up. Thanks for the link.
HansR
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to position a free text

No problem, let me know once you need anything else!
Kamil Musiałowski
Highcharts Developer
HansR
Posts: 62
Joined: Fri Jan 01, 2021 9:44 am
Location: NL
Contact: Website

Re: How to position a free text

Hi Kamil,

I am back with a next question to the same thread: having the text Info now on the correct spot, I try to add a click event to it and when clicked, I would like to popup some HTML help text on the chart in question.

However, I assigned a click event to the customText but it does not work. See https://jsfiddle.net/HansR/jaocdL17/

Is it possible to assign a click event to the customText and of so what am I doing wrong.

Do you have examples of popping up a HTML text in a modal popup?

Regards,
HansR
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to position a free text

Hello again!

The return of the renderer function is always a SVGElement. And on that element you can call the on() method, which is an event listener. In that event listener, you can then specify a callback function, which will get called on 'click' event.

Take a look at the demo, particularly line 37: https://jsfiddle.net/BlackLabel/kuw34vy2/
API Reference: https://api.highcharts.com/class-refere ... Element#on

Best regards!
Kamil Musiałowski
Highcharts Developer
HansR
Posts: 62
Joined: Fri Jan 01, 2021 9:44 am
Location: NL
Contact: Website

Re: How to position a free text

Yes, that works great.

But now I tried the same for the mouseOver (or hover) event so I added

Code: Select all

.on('mouseOver', () => alert("Hovering"));
as well. Unfortunately that does not work. What I want to achieve is that while the cursor hovers over the Info the cursor changes to pointer so I tried the above event to set :

Code: Select all

 .on('mouseOver', () => this.cursor = 'pointer');
Again, no. Apparently the mouseOver event only works on selected objects (like datapoints).
HansR
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to position a free text

It might be a bit confusing, but the name for this event is 'mouseover' with a lowercase 'o'. So once you change it, the alert function works perfectly fine.

To change the cursor to pointer, I would suggest using the Highcharts css method, that is available on the SVGElement.
DEMO: https://jsfiddle.net/BlackLabel/tfsy0omz/
API Reference: https://api.highcharts.com/class-refere ... lement#css

Let me know if that's what you wanted to achieve.
Kamil Musiałowski
Highcharts Developer
HansR
Posts: 62
Joined: Fri Jan 01, 2021 9:44 am
Location: NL
Contact: Website

Re: How to position a free text

I wanted the mousover to achieve the pointer setting for the cursor (I was indeed confused).
But you convinced me: css is the way :D Now I am satisfied.

Thanks a lot for the help in the detail!
HansR
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to position a free text

No worries, it just takes some time and practice to decide which options should be handled with CSS, which with Highcharts methods, and which with pure JavaScript, but we are help to help you!
So do not hesitate to ask us about anything, we will be more than happy to assist :)
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”