rajithagumdal
Posts: 22
Joined: Tue Oct 16, 2018 11:49 am

Extend plot line outside graph

Hi,

I have a requirement where i'll have to extend my plot line outside graph and give a shape. Need to achieve the portion marked in the attached screenshot. Please help in achieving it.


Awaiting for response. Thanks in advance,
Rajitha G
Attachments
graph target range.png
graph target range.png (33.34 KiB) Viewed 1808 times
karolkolodziej
Posts: 895
Joined: Mon Mar 02, 2020 10:11 am

Re: Extend plot line outside graph

Hi!

You can create a second Y-axis and move them together with X-axis left. Then use the plot band as it is in the demo below.
Here you can read more about how I created the plot band: https://api.highcharts.com/highcharts/yAxis.plotBands

If you would like to create different shapes, you can use Highcharts SVG Renderer tool to render custom forms, you can read more about it in this article:
https://highcharts.freshdesk.com/suppor ... g-renderer

Live demo: https://jsfiddle.net/BlackLabel/aykL956w/

Let me know if you have any further questions!
Regards!
rajithagumdal
Posts: 22
Joined: Tue Oct 16, 2018 11:49 am

Re: Extend plot line outside graph

Hello,

Thanks for your quick reply :)

Plot band with hidden yaxis is an awesome option but "Target Range" text is overlapping on the plot band. I cannot give background color white to the text field as highcharts doesn't support that.

I've tried drawing rectangle using SVG. Same "Target Range" text overlap issue exist while trying this option.

Not an expert in highcharts. Can you please help me achieve the above image?
Note: Even on right side graph border, green line should not be visible!!!

Awaiting for reply. Thanks,
Rajitha G
karolkolodziej
Posts: 895
Joined: Mon Mar 02, 2020 10:11 am

Re: Extend plot line outside graph

I did this using the renderer method, you just have to declare range and text in this custom plot band.
Check my demo: https://jsfiddle.net/BlackLabel/e52smy16/
Let me know if this solves your issue!
Regards!
rajithagumdal
Posts: 22
Joined: Tue Oct 16, 2018 11:49 am

Re: Extend plot line outside graph

Hi,

Example Custom plot band that you have given is perfect for me.

Thanks a lot :)
karolkolodziej
Posts: 895
Joined: Mon Mar 02, 2020 10:11 am

Re: Extend plot line outside graph

You're welcome!
Guru t v
Posts: 1
Joined: Tue May 17, 2022 3:51 am

Re: Extend plot line outside graph

Hi
I have same requirement but I am using android wrapper to create this chart how I can achieve this using android wrapper , here is the details of lib I am using highcharts-release-v6.1.4.aar https://github.com/highcharts/highchart ... tag/v6.1.4

Thanks
Guru
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Extend plot line outside graph

Hi Guru,

It seems that you asked the same question on freshdesk and my colleague has already started working on it. We work as a single team across all support channels so please try to not create duplicates as we do our best to answer asap.

Regards!
Mateusz Bernacik
Highcharts Developer
rajithagumdal
Posts: 22
Joined: Tue Oct 16, 2018 11:49 am

Re: Extend plot line outside graph

Hi again,

In this given solution link https://jsfiddle.net/BlackLabel/e52smy16/ -> the rectangular line is drawn on 2 and 4 yaxis labels. So I would like to move only these 2 labels such that it wont look like strike off. Basically 2 and 4 should be placed inside the lines. I was not able to achieve this. If I give y in labels then it impacts all labels and inside labels formatter y is not valid. Can you please help me here?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Extend plot line outside graph

Hello Rajitha!

I have added a new custom property offset to the customPlotBand property which controls the offset of vertical text in plot bands. Then you can move yAxis.labels a little bit by setting a yAxis.labels.x property to negative value.

Demo: https://jsfiddle.net/BlackLabel/20ghb86k/

Let me know if that was what you were looking for!
Regards!
Hubert Kozik
Highcharts Developer
rajithagumdal
Posts: 22
Joined: Tue Oct 16, 2018 11:49 am

Re: Extend plot line outside graph

Hi,
Thanks for the suggestion and reply. This looks good too. But my requirement is to move only 2 and 4 labels within the target line, so is that possible?


Thanks in advance,
Rajitha Gumdal
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Extend plot line outside graph

Rajitha,

Yes, of course. You can move them for example by setting the useHTML property to true and by using the yAxis.labels.formatter callback function with adding a proper CSS styles.

Demo: https://jsfiddle.net/BlackLabel/6swox9p5/
API Reference: https://api.highcharts.com/highcharts/y ... ls.useHTML
https://api.highcharts.com/highcharts/y ... .formatter

Feel free to ask any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
rajithagumdal
Posts: 22
Joined: Tue Oct 16, 2018 11:49 am

Re: Extend plot line outside graph

Hey,

Thanks, I think that was pretty straight forward and I didnt think about it. And thanks for the quick reply.


Regards,
Rajitha Gumdal
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Extend plot line outside graph

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”