Gantt chart with xrange

[AlexeyCanyon]

Good afternoon! Please tell me if it is possible to make a Gantt chart with attachments, where series is xrange?
Or is it possible to make nesting with xrange?
And the last question, is it possible to add event handlers to labels?
I would appreciate any example code!

[sebastian.h]

Hi,

We appreciate you reaching out to us.

Here is highcharts chart type xrange series similar to Gantt chart.
https://jsfiddle.net/gh/get/library/pur ... eries/demo

X-range charts are used to visualize a range on the X-axis. This is often used in Gantt charts, as seen in this example. The X-range data series forms the basis of Highcharts Gantt, but is also available with Highcharts.

Example with attchments, where and how you want to show yours in your environment?
https://jsfiddle.net/gh/get/library/pur ... wnload-pdf

Or is it possible to make nesting with xrange?

Please expand your thought.

And the last question, is it possible to add event handlers to labels?

What do you mean, you want to add and remove events like in the example below?
https://www.highcharts.com/demo/gantt/interactive-gantt

Please look at these options, is this what you are looking for?
https://api.highcharts.com/gantt/plotOp ... dragHandle

Feel free to ask any further questions!
Best regards.

[AlexeyCanyon]

Hello there! Thank you for your answers! Yes, you're right I'm interested in nesting in a Gantt chart with xrange. Is it possible to make such a graph?The question about handlers can be considered not relevant. I needed the highcharts-custom-events plugin.
I have a new question, can I make it so that when dragging a series, they do not overlap?

[sebastian.h]

Hi,

You can use series.xrange in your Gantt configuration.
https://api.highcharts.com/gantt/series.xrange

Do you want to achieve something like this demo?
https://jsfiddle.net/BlackLabel/msfg2kzd/

can I make it so that when dragging a series, they do not overlap?

These are points in time, it depends on what time range you set for points.
Of course, you can write an individual implementation that checks for collisions when uploading, it seems to need more time for this.

Another option is to change the categorized axis type.

Code: Select all

  yAxis: {
    type: 'category',
}

Best regards.

[AlexeyCanyon]

I will give a schematic example of the graph that I need.

[sebastian.h]

Hi,

If I understand you correctly, you trying to mix yAxis type treegrid with type categories.
Unfortunately, it's can't achieve.

Do you want to use type yAxis chart treegrid, but you want points next to each other.
https://jsfiddle.net/gh/get/library/pur ... -axis/demo

This is a configuration where yAxes are categories of types and have unique names that only work for axes of that type.
https://jsfiddle.net/BlackLabel/9rpozfuj/

API References:
https://api.highcharts.com/gantt/yAxis.type

Best regards.