Harbir
Posts: 8
Joined: Fri May 17, 2024 10:11 am

Design feasibility help for Gantt chart

For the attached design I want to know if it is possible to create something similar using high charts literary in ReactJs.

Specifically,
1. Is it possible to change the height of the plots like seen in the first row, green plots height is more than that of blue plot.
2. Can we create a line representing current date.
3. Can we create a dependency line from current date line to some milestone.
Attachments
graph.jpg
graph.jpg (116.67 KiB) Viewed 2755 times
Harbir
Posts: 8
Joined: Fri May 17, 2024 10:11 am

Re: Design feasibility help for Gantt chart

One more question, Can custom icons be added to the y axis grid.
kamil
Posts: 124
Joined: Mon Mar 04, 2024 8:26 pm

Re: Design feasibility help for Gantt chart

Hi there,
Thank you for reaching out to us.

1.
Yes, we can manipulate the symbol size of every dependency by setting its width & height properties. Here's a little demo in which I've set them to 30px: https://jsfiddle.net/BlackLabel/yu8hn2oq/

2.
Sure, the easiest approach is to use our current date indicator module: https://jsfiddle.net/gh/get/library/pur ... cator/demo

3.
Yes, here's a demo that show show to draw the line from current date to a milestone: https://jsfiddle.net/BlackLabel/4c3pxt2q/

4.
Could you explain where exactly would you like them to appear?
Kamil Kulig
Highcharts Developer
Harbir
Posts: 8
Joined: Fri May 17, 2024 10:11 am

Re: Design feasibility help for Gantt chart

Thanks for all the help.

So for Icons, So if there is a grid on left side of the gantt chart, I want the labels to have an icon as well a label text. So each label in the grid would be, Icon followed by a text. Eg: <car icon> Car-Name.

Also some more questions,
1. For some reason I am not able to align the title on top of the grid to left when the grid have multiple columns. Please help me with that as well.
2. As the align was not working, I tried to add title in the first row of the grid, and wanted to if there is a way to change the styles of just first row of the grid.
3. Can we remove/hide only the vertical or horizontal grid lines?
kamil
Posts: 124
Joined: Mon Mar 04, 2024 8:26 pm

Re: Design feasibility help for Gantt chart

Thank you for your reply.

4. (question from previous post) It can be done via xAxis.labels.format or xAxis.labels.formatter
Demo: https://jsfiddle.net/BlackLabel/b7gd6zvy/

1. Could you provide a live demo of your code (e.g. on jsfiddle.net) and describe what is the content of the title that you are trying to align?

2. Could you provide a live demo for this case too? Also, could you describe which elements should have style altered?

3. Sadly, Highcharts Gantt doesn't allow to configure that. However, you can hide the entire grid by setting gridLineWidth to 0. Furthermore, you can contact our charting experts (at https://blacklabel.net/) if you need a custom solution for your use case.

Please let us know if you have any further questions.
Best regards!
Kamil Kulig
Highcharts Developer
Harbir
Posts: 8
Joined: Fri May 17, 2024 10:11 am

Re: Design feasibility help for Gantt chart

Thanks for all the support. This is really helpful.

link for align left example, https://jsfiddle.net/Harbir/j2zL3k1m/6/
In the above link I have added alignText: right in each title of the grid. So it should align the text to left as the opposite property is true by default. But in this while aligning, it is not working properly.

And for the other point in the same example can I bold the text in just the first row entries of the grid, ( attaching picture for reference).

P.S. In the same picture you can see the titles for each grid column are not aligned to left.
Attachments
Screenshot 2024-05-22 at 9.56.54 PM.png
Screenshot 2024-05-22 at 9.56.54 PM.png (84.23 KiB) Viewed 2690 times
kamil
Posts: 124
Joined: Mon Mar 04, 2024 8:26 pm

Re: Design feasibility help for Gantt chart

Highcharts Gantt doesn't provide any options to style the entire row (grid.columns.labels.align aligns the entire column - not the row).
So, a workaround here is setting a fixed width for a label and styling it in labels.formatter:

Code: Select all

        labels: {
          formatter: function() {
            return `<div class="${this.point.y === 0 ? 'firstRow' : 'otherRows' }">${this.point.name}</div>`;
          },
          useHTML: true,
        }

Code: Select all

.firstRow {
    width: 150px;
    font-weight: bold;
}

.otherRows {
    width: 150px;
    text-align: center;
}
Live demo: https://jsfiddle.net/BlackLabel/ukgrq861/
You need to apply the following formatter to every column to achieve the desired result.

Please notice that useHTML option is on.
Kamil Kulig
Highcharts Developer
Harbir
Posts: 8
Joined: Fri May 17, 2024 10:11 am

Re: Design feasibility help for Gantt chart

Thanks for all the help. Everything was very helpful.

I have one more question,
How can I have multiple plots in a single row along with the sub plots option. Attaching screenshot for reference.
Attachments
Screenshot 2024-06-07 at 3.38.00 PM.png
Screenshot 2024-06-07 at 3.38.00 PM.png (105.94 KiB) Viewed 2143 times
kamil
Posts: 124
Joined: Mon Mar 04, 2024 8:26 pm

Re: Design feasibility help for Gantt chart

Points can be placed in one row only if they are in separate series and yAxis.uniqueNames is set to true.
Live demo: https://jsfiddle.net/BlackLabel/qfba1p2u/

The points are placed in one line by utilizing groupPadding & pointPlacement options.
Please notice, that parent point of the second series has to be hidden (visible: false). It prevents from drawing 2 bars in the first row.

Please let us know if you have any further questions,
Best regards!
Kamil Kulig
Highcharts Developer
Harbir
Posts: 8
Joined: Fri May 17, 2024 10:11 am

Re: Design feasibility help for Gantt chart

I have one more question.
So if I am using the range selector to zoom in to specific time range I am not able to use the reset zoom button along with it. Is there any work around for this.
bastss
Site Moderator
Posts: 1301
Joined: Wed Oct 17, 2018 10:59 am

Re: Design feasibility help for Gantt chart

Hello,

Thank you for contacting us!

The Reset zoom button should appear by default after triggering the zoom, just like in this demo: https://jsfiddle.net/BlackLabel/ncxmsevr/

If it doesn't work in your case, could you reproduce it on some online editor?

Kind regards!
Sebastian Wędzel,
Highcharts Developer
Harbir
Posts: 8
Joined: Fri May 17, 2024 10:11 am

Re: Design feasibility help for Gantt chart

So in the below example if you see, I have enabled zoom, rangeSelector and Navigator. In this example if you zoom the reset zoom button does not show.
https://jsfiddle.net/pv9jsoq6/1/

Now in this imagine a graph that has lot of content vertically and if you scroll down the range selector will not be in frame to reset the zoom and there is no reset zoom button so one has to scroll up through the entire content just to get some option to zoom out and then again scroll down to the previous position.
Harbir
Posts: 8
Joined: Fri May 17, 2024 10:11 am

Re: Design feasibility help for Gantt chart

Also I see that some implementations for double click to zoom out. Do you know how to do this in React?
bastss
Site Moderator
Posts: 1301
Joined: Wed Oct 17, 2018 10:59 am

Re: Design feasibility help for Gantt chart

Thank you for your response.

In the shared demo there is no reset zoom button because the rangeSelector is used.
Now in this imagine a graph that has lot of content vertically and if you scroll down the range selector will not be in frame to reset the zoom and there is no reset zoom button so one has to scroll up through the entire content just to get some option to zoom out and then again scroll down to the previous position.
I think that the scrollablePlotArea feature might be a good solution for this scenario.

Demo: https://jsfiddle.net/BlackLabel/txw53814/

API: https://api.highcharts.com/gantt/chart. ... lePlotArea

Kind regards!
Sebastian Wędzel,
Highcharts Developer

Return to “Highcharts Gantt”