fjaure
Posts: 2
Joined: Fri Aug 16, 2019 3:00 am

Gantt chart: 2 task bars on a series

Hello, it is possible to do something like the image, 2 bars task in a series. Can't find a way to adjust the location of the bars (buttom or top) for do that i need.

Thanks
Attachments
ejemplo.png
ejemplo.png (4.67 KiB) Viewed 5023 times
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Gantt chart: 2 task bars on a series

Hi,

Welcome to our forum and thanks for contacting us with your question.

Yes, it is possible, but you need to use xrange series with categorized yAxis.
Here you have a simplified example of it: https://jsfiddle.net/BlackLabel/6gy4nz37

Let me know if you have any further questions.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
fjaure
Posts: 2
Joined: Fri Aug 16, 2019 3:00 am

Re: Gantt chart: 2 task bars on a series

Excellent, that will help me. Another doubt, By adding more bars they touch each other, is there a way to define the size of the series ("this size" on the image) or force a padding between the bars?

Thanks again
Attachments
eexample2.png
eexample2.png (2.97 KiB) Viewed 5017 times
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Gantt chart: 2 task bars on a series

Hi,

You can just increase the chart's height: https://jsfiddle.net/BlackLabel/9cdmub84

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
dstumpf
Posts: 5
Joined: Thu Dec 19, 2019 9:52 pm

Re: Gantt chart: 2 task bars on a series

Hello,

I'm working on a similar usage of an xrange chart. I also want to avoid overlap between bars, but in my case I can have an arbitrary number of bars, of varying widths (10px, 20px, and 40px). I need them to be approximately equally spaced (say, 10px between each bar).

Any suggestions? Since the number of bars is dynamic, I can't simply set the "height" to a static value; I need to somehow calculate the required height based on the total number of bars and spacing between them, and I may need to modify the series' "y" attributes based on the total calculated height.

I feel like I'm missing a key piece of the puzzle. Any suggestions would be appreciated. I can try to come up with a jsfiddle demonstrating what I'm looking for, if my description is unclear.

Thanks!
Dave
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Gantt chart: 2 task bars on a series

Hi, Dave.

Welcome to our forum and thanks for contacting us with your question!

I am afraid that it is not possible to do this from the API level. The only way you could achieve this is by modifying the Highcharts core by a custom wrap, however, in this case, it might be not that easy.
Docs references: https://www.highcharts.com/docs/extendi ... highcharts

Feel free to ask any further questions!

Best regards.
Mateusz Kornecki
Highcharts Developer
iyerswapnil94
Posts: 3
Joined: Mon May 25, 2020 6:26 am

Re: Gantt chart: 2 task bars on a series

As per the example posted here "https://jsfiddle.net/BlackLabel/6gy4nz37"
Is it possible to have some layering (z-index) for data series?
I do not need separate data, but overlapped data with z-index for each.
for e.g.:- series: [{
data: [{
y: 0,
x: 0,
x2: 5
},
{
y: 0,
x: 4,
x2: 7
}]
}]
But where, I can control what comes front and what is hidden behind
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Gantt chart: 2 task bars on a series

Hello,

We appreciate you reaching out to us with your inquiry.

Yes, of course, it can be done!

You could use the 'category' Axis, put every item from the same row in the separate series and then control its z index with the series.zIndex property. Take a look at a simple demo I prepared for you, is it what you were looking for?

API references:
https://api.highcharts.com/highcharts/s ... ine.zIndex

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

If I may clarify any matters I am available at your convenience.

Best regards.
Mateusz Kornecki
Highcharts Developer
iyerswapnil94
Posts: 3
Joined: Mon May 25, 2020 6:26 am

Re: Gantt chart: 2 task bars on a series

Thanks a lot. That totally works for me.
Just one question:
After applying series.zIndex, is it possible to cut off or eliminate part that is hidden and show only what is in the front. Like cutting of the actually series.

For e.g first is from 0 to 4 (lower index), second is from 3 to 6 (higher index), so as per the fiddle you provided, we can see one point from 0 - 3 and second from 3 - 6. But the data for first point that is hidden (3 - 4) is still in the background, anything available to remove it off completely

Thanks again
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Gantt chart: 2 task bars on a series

I am afraid it might be not possible to achieve that straight from the API level. Of course, you could iterate over the series and fire the update() or the setData() method in order to modify the chart data, but there is an easier way - you might just parse the data before it is applied to the chart, so the points won't overlap.

Regards.
Mateusz Kornecki
Highcharts Developer
iyerswapnil94
Posts: 3
Joined: Mon May 25, 2020 6:26 am

Re: Gantt chart: 2 task bars on a series

Thanks for the help.
For overlapping and zIndex, I have put each data point in a separate series.
Now my chart has around 500 points each in one series, thus creating 500 series.
The performance is drastically slow.
Do we have any limit to the number of series that we can create for optimum performance?
Any upper cap limit for the number of series or number of data points.

Thanks,
Swapnil.
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Gantt chart: 2 task bars on a series

There are no series limit in the highcharts. If you are struggling with the performance I will encourage you to check out these tips:
https://www.highcharts.com/docs/getting ... highcharts.

With this amount of series, you could consider using the boost module, it should help. You can find more information about this module in the article I attached below.

API references:
https://www.highcharts.com/blog/tutoria ... st-module/
https://www.highcharts.com/docs/advance ... ost-module

Regards.
Mateusz Kornecki
Highcharts Developer
dev_
Posts: 6
Joined: Wed Apr 07, 2021 4:30 pm

Re: Gantt chart: 2 task bars on a series

Hello,

I seen from the examples that we are able to add 2 tasks on a single series.
How do we update the data so that there is a connector between tasks like we see with Gantt charts?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Gantt chart: 2 task bars on a series

Hi dev_,
Thanks for your message.

Would you like to make a connection between points like in this example?
https://jsfiddle.net/BlackLabel/1hyo852u/

This can be achieved through the settings series.gantt.data.dependency
https://api.highcharts.com/gantt/series ... dependency

Let me know if was what you are looking for.
Best regards.
Sebastian Hajdus
Highcharts Developer
dev_
Posts: 6
Joined: Wed Apr 07, 2021 4:30 pm

Re: Gantt chart: 2 task bars on a series

sebastian.h wrote: Fri Apr 23, 2021 7:50 am Hi dev_,
Thanks for your message.

Would you like to make a connection between points like in this example?
https://jsfiddle.net/BlackLabel/1hyo852u/

This can be achieved through the settings series.gantt.data.dependency
https://api.highcharts.com/gantt/series ... dependency

Let me know if was what you are looking for.
Best regards.
Yes I would like to make a connection like the one you provided in your example but in a chart that looks like the one below.

https://jsfiddle.net/BlackLabel/9cdmub84

Return to “Highcharts Gantt”