dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

adding a right padding to chart

Hi,
i have added a custom tool button to the stock-tools toolbar to enable the y-axis crosshair on my chart. if you look below you will see that it often covers part of the chart itself, making it difficult to read what is the last few points are on the chart.
chart1.png
chart1.png (15.36 KiB) Viewed 891 times

Couple of questions related to this:
1. is it possible to add a right padding to the chart so that the crosshair label is not covering the last few candles draw to the right of the chart?
2. is it possible to extend the x-axis time range to solve this? obviously no data would be plotted for those dates in the future - but it may also solve this problem.
3. lastly, how can i format the value in the crosshair? i could format it much like the y-axis in this case so in stead of showing 3456, i would show 3.5k.

Any suggestions or solutions would be appreciated.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: adding a right padding to chart

Hi there Dizzy!

I think that you are looking for the xAxis.overscroll property, it will extend the xAxis time range (therefore, the value has to be provided in milliseconds) just like you suggested in your post.
API Reference: https://api.highcharts.com/highstock/xAxis.overscroll
DEMO: https://jsfiddle.net/BlackLabel/nk97h8w2/

For the crosshair label formatting I would suggest using the xAxis.crosshair.label.format / formatter, just like you would format anything in Highcharts.
API Reference: https://api.highcharts.com/highstock/xA ... .formatter

Do not hesitate to contact us with any further requests!
Best regards
Kamil Musiałowski
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: adding a right padding to chart

Hi Kamil,
this doesnt seem to work for me. Would you be able tell why this solution does not work w/ this chart: https://jsfiddle.net/dizzy0ny/f684xvot/17/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: adding a right padding to chart

Hi there,

Thank you for reaching out to me.

Since each of your candles represent on week, adding 10 seconds to xAxis won't do much.
Take a look at the demo, where I have added two months of a break at the end of your data.

DEMO: https://jsfiddle.net/BlackLabel/tfdmcxoq/

Regards!
Kamil Musiałowski
Highcharts Developer
dizzy
Posts: 79
Joined: Mon Aug 01, 2022 5:28 pm

Re: adding a right padding to chart

kamil.m wrote: Fri Oct 07, 2022 10:53 am Hi there,

Thank you for reaching out to me.

Since each of your candles represent on week, adding 10 seconds to xAxis won't do much.
Take a look at the demo, where I have added two months of a break at the end of your data.

DEMO: https://jsfiddle.net/BlackLabel/tfdmcxoq/

Regards!
ah..ok, cause i tried 10*10000 and still saw no effect. guess i misread just how small the units were. Thanks! works fine
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: adding a right padding to chart

No worries, it happens sometimes :)

Let me know once you'll need anything else,
Regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”