Harbir
Posts: 5
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 863 times
Harbir
Posts: 5
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: 5
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: 5
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 798 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: 5
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 251 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

Return to “Highcharts Gantt”