0

I am having one more query while working on these high chart. Alignment of the task bars are not correct. They are bit half above than mentioned lines. can you please assist me on it.

Codepen link: [https://codepen.io/rohitkatarya7/pen/rNzYdVB][1]
Diksha
  • 35
  • 4
  • Hi @Diksha, The problem is related to your series structure. The issue on a minimal example: http://jsfiddle.net/BlackLabel/tuL8ymev/ Solution with only one series: http://jsfiddle.net/BlackLabel/z4xms86g/ – ppotaczek Nov 03 '21 at 10:53
  • Hi @ppotaczek, Thanks for the response. I have improved my data(by removing the replicating data) but still not able to get the proper design. Codepen Link: https://codepen.io/rohitkatarya7/pen/porVwep If I removed the height from the charts it works fine but there is lot of space at the top and bottom of the location. To resolve this issue I put height in the chart but it disturbs the bar alignment. can you please assist me on this. – Diksha Nov 08 '21 at 12:50

1 Answers1

0

Instead of using multiple series, use only one. You can quickly transform your data structure to one series by:

const oneSeries = {
    data: []
};

seriesData.forEach(s => {
    s.data.forEach(dataEl => {
        oneSeries.data.push(dataEl);
    });
});

Live demo: http://jsfiddle.net/BlackLabel/8opa57kw/

API Reference: https://api.highcharts.com/gantt/series.gantt

ppotaczek
  • 36,341
  • 2
  • 14
  • 24