Small vertical line on top of horizontal bar

[aashaymehta]

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 (2.14 KiB) Viewed 1306 times

Thank you!

[kamil.k]

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!

[aashaymehta]

Thank you for the prompt response. It worked!

[kamil.k]

That's great to hear!

In case of any other questions, feel free to contact us anytime.

[aashaymehta]

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]

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!

[aashaymehta]

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]

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!