aashaymehta
Posts: 6
Joined: Sun Nov 20, 2022 8:31 am

Small vertical line on top of horizontal bar

Hi,

Is there a way to draw a vertical line at a given time on top of horizontal bar in Highcharts ganttChart ?

Also, can we show different colors in the same bar ?

I was going through the following sample : https://jsfiddle.net/gh/get/library/pur ... o/subtasks

Please see the image for reference.
GanttChart.png
GanttChart.png (2.14 KiB) Viewed 2143 times

Thank you!
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Small vertical line on top of horizontal bar

Hello aashaymehta,

Thanks for contacting us again!

To render the vertical lines, you need to render them customarily. We have a special renderer method on a chart instance that allows you to render custom SVG elements. You can find a list of possible elements and their properties here: https://api.highcharts.com/class-refere ... derer#rect. As you can see by clicking on this link, the rect method is chosen as this is the one I recommend you use. I've updated your example by rendering this custom element inside the chart's load event, also showing you how to adjust the proper positions, take a look: https://jsfiddle.net/BlackLabel/94p7r13s/.

According to your second question, you need to use the linearGradient declared as series.data.color property to achieve an effect of a colored bar. It's also shown in the above example (the first bar). Feel free to read more about the gradients here: https://api.highcharts.com/class-refere ... bject#toc0.

Let me know if you found it helpful,
Kind Regards!
Kamil Kubik
Highcharts Developer
aashaymehta
Posts: 6
Joined: Sun Nov 20, 2022 8:31 am

Re: Small vertical line on top of horizontal bar

Thank you for the prompt response. It worked!
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Small vertical line on top of horizontal bar

That's great to hear!

In case of any other questions, feel free to contact us anytime.
Kamil Kubik
Highcharts Developer
aashaymehta
Posts: 6
Joined: Sun Nov 20, 2022 8:31 am

Re: Small vertical line on top of horizontal bar

Hi,

While testing it, I noticed that it does not behave correctly in case the screen size is resized.
The position of vertical line changes if we resize the screen.
How can we handle it ?

Thanks & Regards
Aashay Mehta
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Small vertical line on top of horizontal bar

My apologies, I've missed a proper solution. You can freely use the chart's render method that fires on every viewport resize. My recommendation is to assign the custom elements (lines) references directly to each point on the initial render and then, update their positions every time the render event fires. I've updated the demo: https://jsfiddle.net/BlackLabel/bd82vf3z/.

Let me know if that works for you,
Regards!
Kamil Kubik
Highcharts Developer
aashaymehta
Posts: 6
Joined: Sun Nov 20, 2022 8:31 am

Re: Small vertical line on top of horizontal bar

Thank you for the response. It worked fine. But in case of collapse the vertical line should be hidden.
Can we handle it in such a way that the vertical line on child bar is hidden when the parent is collapsed and again appears when the parent is expanded ?
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Small vertical line on top of horizontal bar

You can freely use the hide and show methods available on the point instance to control its visibility. What's more, on the same reference, there is a visible property that changes in this case on every collapse. I've updated the demo, applying that functionality to the chart's render method: https://jsfiddle.net/BlackLabel/dhr23sz0/.

Let me know if you have any further questions!
Kamil Kubik
Highcharts Developer

Return to “Highcharts Gantt”