Jaquelline
Posts: 40
Joined: Fri Nov 09, 2018 9:15 am

Polar Chart Annotation

Hello,
I might be asking a stupid question here but I haven't manage to find online an example in which I can use 'annotations' for a 'polar' type of chart.
So.... are they available for polar?

PS. I have added the
<script src="https://code.highcharts.com/modules/ann ... "></script>

Kind regards,
Jacqueline
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Polar Chart Annotation

Hi, Jacqueline!

I have created a simplified demo and everything works fine: https://jsfiddle.net/vnxwqmbk/
Remember that an order of importing modules is relevant.

Let me know if you have any additional questions!

Best regards
Rafal Sebestjanski,
Highcharts Team Lead
Jaquelline
Posts: 40
Joined: Fri Nov 09, 2018 9:15 am

Re: Polar Chart Annotation

Thank you!
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Polar Chart Annotation

You're welcome ;)
Rafal Sebestjanski,
Highcharts Team Lead
Jaquelline
Posts: 40
Joined: Fri Nov 09, 2018 9:15 am

Re: Polar Chart Annotation

But....
If I wann make things look like in the attachment...
This:

Code: Select all

annotations: [{
                            labels: [{
                                point: {
                                    xAxis: 1,
                                    yAxis: 1,
                                    y: 5,
                                    x: 5,
                                },
                            text: 'Section 5 :  3.45'
                            }]
                    }]
it is not enough....
My question is:
How should it look like the definition of the labels, related to the chart's axis coordinates.
So that when I zoom IN/OUT my labels to stay put.

Many thanks,
Jacqueline
Attachments
typ.png
typ.png (77.47 KiB) Viewed 996 times
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Polar Chart Annotation

This is much more complicated. You can get the label's coordinates using getBBox() method but still it will be hard to position annotations around labels. If you have a small number of labels, you can set annotations coordinates rigidly.

Here you have an example of that. Note that I didn't use labels from annotations module but I rendered them using Highcharts SVG Renderer.

jsFiddle: https://jsfiddle.net/cj1Lfkre/

API Reference: https://api.highcharts.com/class-refere ... erer#label
https://api.highcharts.com/highcharts/x ... .formatter
https://api.highcharts.com/class-refere ... nt#getBBox

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
softfrog
Posts: 2
Joined: Thu Nov 12, 2020 11:00 am

Re: Polar Chart Annotation

Hi

I am struggling to get simple annotations to show on a polar chart. This is the only example I can find, and the fiddle https://jsfiddle.net/vnxwqmbk/ no longer seems to work i.e. the annotation is not showing?

I was using the SVG renderer but that doesn't work any more since I upgraded my local exporting server from v2.0.28 to v2.1.0. I am starting the server with --allowCodeExecution=1. So tried using annotations instead and that also doesn't work:

Here is a minimum working fiddle trying to use annotations: https://jsfiddle.net/softfrog/4ysd0b53/

And the same thing using the renderer: https://jsfiddle.net/softfrog/txf8na2r/ (the renderer e.g. works in the fiddle but not using highcharts-export-server)

Can someone help me get either of the two methods working?

Thanks!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Polar Chart Annotation

Hi softfrog,
We appreciate you reaching out to us!

According to documentation I created a simple polar chart demo with annotation, and everything look good.

Live demo polar chart with annotation:
https://jsfiddle.net/BlackLabel/5dhqg7aL/

API References:
https://api.highcharts.com/highcharts/a ... ons.labels

Let me know if that was what you were looking for.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Usage”