mayag
Posts: 23
Joined: Thu Dec 15, 2022 9:58 am

space between each point

Hello,
I have some questions about the points on the chart
Is there a fixed space between point to point?
can i change it? and defined width space ?

When scrolling, zoom in/out and the chart changes accordingly
how can I tell the space between point to point?

thanks
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: space between each point

Thanks for contacting us with your question!

The most basic options for manipulating the spacing between points are pointPadding and groupPadding, but it also depends on what type of series are you using.

If you send me a demo of your chart I will be able to help you more with changing the spacing between points.

I prepared a demo using those two properties, you can play with those and check out what they are changing:
Demo: https://jsfiddle.net/BlackLabel/1kj7deqm/

Feel free to ask any further questions!
Regards
Jakub
mayag
Posts: 23
Joined: Thu Dec 15, 2022 9:58 am

Re: space between each point

Hi

this is a demo https://jsfiddle.net/jakubSzuminski/stw2udjm/
in a default state and for each scroll i want to know what is the width between the 2 dots

i want to create an icons bar on top of the chart. i want to locate each icon is the center of the dot so i will like to know the width between them.

thanks!
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: space between each point

Hey!

There is a closestPointRangePx property on series, which stores the exact spacing value between two points. In the console, I logged this value and also I calculated the position and the spacing between each point on the chart, and as you can see, this is the same value, see:

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

Feel free to ask any further questions!
Best regards
Jakub
mayag
Posts: 23
Joined: Thu Dec 15, 2022 9:58 am

Re: space between each point

Thanks, I'll check it out!

I have another question about the position of the starting point of the chart
Hope I can explain myself :)
https://jsfiddle.net/gh/get/library/pur ... gn-center/ - you can see here that the first point in the chart starts after a small area and not at the beginning of a line the axis

https://jsfiddle.net/ut8npkxz/2/ - here the first point in the chart starts almost at the beginning of the axis line row

how can i play with it?
and also there is a way to move the last point location as the first point move ?

thanks, Maya.
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: space between each point

Hey!

The difference is because in the first demo the xAxis.type is 'linear' by default, and in the second one it is 'category'.

If you want to change the gap to a bigger one on 'linear' xAxis, use xAxis.minPadding and xAxis.maxPadding.
Demo: https://jsfiddle.net/BlackLabel/o3Leqh1b/

If you want the category axis to start from the begging, you need to change series pointPlacement to 'on'.
Demo: https://jsfiddle.net/BlackLabel/tuf0boky/

Feel free to ask any further questions!
Best regards!
Jakub

Return to “Highcharts Stock”