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

eccentricity POLAR - decenter

Thu Dec 06, 2018 4:34 pm

Hi, I am wondering if it possible to move my 'rangearea' inside a Polar Chart so that it looks like this:
eccentricity.png
eccentricity.png (52.51 KiB) Viewed 25 times
So my graph it is not centered related to the Polar..

I have a real example on which I am working..... but I haven´t managed to find my answer alone, online....

https://codepen.io/Jaquelline/pen/gQVWvG?editors=1010

And two:
Is there another option for me if I want that my rangearea to stop on the margin of the Polar. So that it feels all my circle...

Kind regards,
Jaquelline

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

Re: eccentricity POLAR - decenter

Fri Dec 07, 2018 7:54 am

I will have to add the fact that my values don`t include the value of the deviation from the 'center' of the Polar graph.
My eccentricity comes as a combination of angle value and the distance it moves on that direction.
For example: 0.78 cm on the 64°

rafalS
Posts: 664
Joined: Thu Jun 14, 2018 11:40 am

Re: eccentricity POLAR - decenter

Fri Dec 07, 2018 2:00 pm

Hi, Jaquelline!

I managed to fill all your circle moving x-axis closer to the series (using offset property) and hiding grid line of y-axis: https://jsfiddle.net/06vfrL3k/

When it comes to moving your series relatively to the polar center... Highchart doesn't provide any options like this, but we can use CSS to move our series using transform: translate() property. We just needed to find a mathematics way to calculate x and y offset.

I managed to do it this way:

Code: Select all

,
    events: {
      load() {
        let seriesContainer = document.querySelector('.highcharts-series-group'),
          angle = 90,
          distance = 5,
          radianAngle = Math.PI / (180 / (180 - angle)),
          x = distance * Math.sin(radianAngle) + 'px',
          y = distance * Math.cos(radianAngle) + 'px';

        seriesContainer.style.transform = `translate(${x}, ${y})`;

      }
    }
In this example, I used angle = 90 and distance 5

jsFiddle: https://jsfiddle.net/f1n4czjv/

Let me know if you have any additional questions.

Best regards!
Rafal Sebestjanski,
Highcharts Developer

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

Re: eccentricity POLAR - decenter

Fri Dec 07, 2018 2:17 pm

Hi,
Thank you very much for your time !!!!
This is realy perfect! :)

Kind regards,
Jaquelline

rafalS
Posts: 664
Joined: Thu Jun 14, 2018 11:40 am

Re: eccentricity POLAR - decenter

Fri Dec 07, 2018 2:39 pm

You're welcome! ;)
Rafal Sebestjanski,
Highcharts Developer

Return to “Highcharts Usage”