User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Gantt chart: 2 task bars on a series

Hi,

Something like this comes out, it looks like there's no support under the date like this.
And what exactly would you like to show and how and from which side the arrow should come out?
https://jsfiddle.net/BlackLabel/p4vxchu7/

I guess a better approach would be to use Highcharts.SVGRenderer to draw arrows, something similar to this example.
https://jsfiddle.net/BlackLabel/gtzp1qu4/
https://api.highcharts.com/class-refere ... VGRenderer

Best regards.
Sebastian Hajdus
Highcharts Developer
nubedir
Posts: 5
Joined: Sat Aug 21, 2021 12:09 am

Re: Gantt chart: 2 task bars on a series

Hi,

I tried to implement this using xrange. However, there are two things that I am not able to figure out:
1. How do I implement left axis as a table while using xrange series. When I try to do that, the columns show blank
2. How do I enable vertical scroll on only the body of the chart keeping the header sticky

Here's the demo I prepared: https://jsfiddle.net/vjfwzrd6/
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Gantt chart: 2 task bars on a series

Hi nubedir,
Thanks for contacting us.

Unfortunately, creating tables on the x-axis of an xrange chart is not supported.
It's this is due to differences in the construction of the two series and how the y-axis is drawn.

As you can see at the example, the table option doesn't work.

Live demo:
https://jsfiddle.net/BlackLabel/237peogq/
https://jsfiddle.net/BlackLabel/tfuL3sd2/

Let me know if you have more questions.
Best regards.
Sebastian Hajdus
Highcharts Developer
nubedir
Posts: 5
Joined: Sat Aug 21, 2021 12:09 am

Re: Gantt chart: 2 task bars on a series

Got it. The project I'm working on requires 2 task bars on the same line. And currently, there's no other way to achieve that other than using xrange in order to achieve both the 2 bars and table on the left axis?

Also, could you help me figure out how to achieve scroll on only the body of the chart keeping the header sticky https://jsfiddle.net/vjfwzrd6/

Thanks!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Gantt chart: 2 task bars on a series

Hi,
And currently, there's no other way to achieve that other than using xrange in order to achieve both the 2 bars and table on the left axis?
After test and investigation I saw that it's impossible to build yaxis to look like a table with a series type range.

On the topic of scrolling set with a fixed header, I have a demo, from a github release, you can follow that:
https://github.com/highcharts/highcharts/issues/13072

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


Best regards.
Sebastian Hajdus
Highcharts Developer
nubedir
Posts: 5
Joined: Sat Aug 21, 2021 12:09 am

Re: Gantt chart: 2 task bars on a series

Thanks for all the help!
Regarding the scroll demo, if I understand correctly, the scroll automatically doesn't work with mouse wheel and I would have to implement it using the mouse wheel event and setExtremes function, correct?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Gantt chart: 2 task bars on a series

Hi,
Exactly, setExtremes it's a good approach for add scrolling via mousewheel.

I send you correlated topics:
viewtopic.php?t=40633
viewtopic.php?t=40985

Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”