sendricardo
Posts: 18
Joined: Mon Apr 16, 2018 10:29 am

Changing the position of the first and last ticks

Hi,

If for instance I have 5 ticks and I only want to display the first and last one. In the example I provided, the first tick is 0 and my last tick is 8 and say I want to move the 0 a bit to the right and the 8 a bit to the left, how can I do this?

Here is the fiddle:
http://jsfiddle.net/kt1cys28/

Thanks in advance.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Changing the position of the first and last ticks

Hi, sendricardo!

Quick answer: you can define fake xAxis.min and xAxis.max properties:

Code: Select all

  xAxis: {
        tickPositions: [0, 8],
        min: -0.5,
        max: 12
    },
It can be automated. But it will move your points as well.

Is that's enough for you? If not or you want something different, let me know and we will come up with a better approach ;)

jsFiddle: http://jsfiddle.net/BlackLabel/pgd1n0be/

Kind regards!
Rafal Sebestjanski,
Highcharts Team Lead
sendricardo
Posts: 18
Joined: Mon Apr 16, 2018 10:29 am

Re: Changing the position of the first and last ticks

Hi rafalS,

Thank you so much for your prompt reply.

I had no idea it was that simple, however for my case I couldn't use this option as my values vary a lot (the jsfiddle I provided was just for demonstrative purposes).

I managed to do it using two X-Axis, one for the min and another for the max then I aligned them. Then I altered the X position of the labels for both axis to move them to the position I needed.

Out of mere curiosity isn't there a way using tickPositioner (or some other way) for us to change the x position offset?

Regards,
Ricardo
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Changing the position of the first and last ticks

sendricardo,

Of course, it can be done with tickPositioner as well ;) and it still can be automated using min and max properties - we can find the first and the last x-axis values and calculate proper min and max values relatively to them.

You can take a look at these two approaches

1) This one moves only ticks with labels on the x-axis: http://jsfiddle.net/BlackLabel/26bvgfe1/

2) This one moves tick with labels and points: http://jsfiddle.net/BlackLabel/y6f7c0za/

Also, in these two examples, you have some more data commented so you can see how does it work when we have more or different data. It's all automated now.

Have a good week,
Rafał
Rafal Sebestjanski,
Highcharts Team Lead
sendricardo
Posts: 18
Joined: Mon Apr 16, 2018 10:29 am

Re: Changing the position of the first and last ticks

Hi rafalS,

Thank you so much for the samples. I am going to try the approaches on my project and I'll be sure to let you know if I run into any problems :)

Regards,
Rocardo

Return to “Highcharts Usage”