dsmriti
Posts: 2
Joined: Thu Aug 10, 2023 9:13 am

Adjust x-axis width as per datapoints for gantt chart

Hi Team, I am new to high charts and I need a solution for my Gantt chart.
Currently, for my Gantt chart, the top header of the x-axis (week/month wise) automatically sets the uniform width of each cell.
I want to adjust dynamically some of the cells to take their data points and set their width as per the data points.
Currently, in my code, I am trying to add two data points in the same week but both data points are overlapping each other.
I want these two data points to adjust horizontally in their respective cell/grid of the x-axis and doesn't overlap. Also, there can be more than 2 datapoints in the same week. So, please, suggest the solution accordingly.
Image

Sample code: https://jsfiddle.net/dsmriti/1p5yvub0/5/
dsmriti
Posts: 2
Joined: Thu Aug 10, 2023 9:13 am

Re: Adjust x-axis width as per datapoints for gantt chart

I want if any 2 or 3 marker or icon lies within a week, it should be displayed within the same week's grid, it should not cross the grid lines and should not come above the grid lines.
It should be adjustable within its cell in a horizontal way.
I tried with the below option by increasing the 40 to some higher value. But after changing 40 to 70, it increases all cells' width. I want to only increase the width of cell where we have more datapoints rest cell width should have the default width.

scrollablePlotArea: {
minWidth: 40 * 48, // 48 weeks, 40px each
}
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Adjust x-axis width as per datapoints for gantt chart

Hello dsmriti,

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

Unfortunately, we don't provide any built-in option to achieve that. As you mentioned, changing the width for all cells is the only way. Please, note that the chart is built from SVG elements. The cells are actually just the vertical lines that create cells with properly positioned text. My point is that the possible solution should be to change the position of an element and recalculate it for the others, which I'd classify as a separate feature. You can freely report it here: https://github.com/highcharts/highchart ... new/choose and select the Feature request, which with enough user votes, will be implemented in the future.

Sincerely apologize for the inconvenience,
Kind Regards!
Kamil Kubik
Highcharts Developer

Return to “Highcharts Gantt”