gantt chart from amChartv5 on angular is resolving multiple categories from the same name

Question

I'm implementing an amChartsv5 gantt chart on Angular 13, where each bar(category) would be a project and if there are two or more occurrences of a category, they should stack, like a timeline. Managed to get it from a local JSON and to add some custom properties, the only problem is: the chart creates one line for each declaration, even when the categories matches.

OBS: the bar stacks perfectly, all the inputs in sequence as intended but the chart creates 3 lines and two of then are empty, only the third is populated by the data as it should be.

JSON example:

[
    {
      "category": "LETICIA",
      "fromDate": "2022-08-02 00:00",
      "toDate": "2022-08-08 23:59",
      "columnSettings": {
        "fill": "#57315b"
      },
      "task": "Sprint #1",
      "personnel": 13
    },
    {
      "category": "LETICIA",
      "fromDate": "2022-08-08 00:00",
      "toDate": "2022-08-09 23:59",
      "columnSettings": {
        "fill": "#E6E6FA"
      },
      "task": "Presentation",
      "personnel": 14
    },
    {
      "category": "LETICIA",
      "fromDate": "2022-08-09 00:00",
      "toDate": "2022-08-19 23:59",
      "columnSettings": {
        "fill": "#57315b"
      },
      "task": "Sprint #1",
      "personnel": 15
    }
]

resulting in this

tried to manipulate the JSON but so far no success Is there a way to get rid of those unecessary category creations?

didnt manage to adapt it for the stackblitz but here is how my component and service are right now: https://stackblitz.com/edit/angular-ivy-hpeih1?file=src/app/app.component.ts

Answer 1

In your code, the problem is online 95: yAxis.data.setAll(data);

Instead of data, where some categories appear several times, you have to pass a specific array of object literals listing your categories like so:

yAxis.data.setAll([
  { category: "Category 1" },
  { category: "Category 2" },
  { category: "Category 3" }
]);

Full example:

am5.ready(() => {

  let root = am5.Root.new("chartdiv");

  let chart = root.container.children.push(am5xy.XYChart.new(root, {}));
  
  let data = [
    {
      "category": "LETICIA",
      "fromDate": "2022-08-02 00:00",
      "toDate": "2022-08-08 23:59",
      "columnSettings": {
        "fill": "#57315b"
      },
      "task": "Sprint #1",
      "personnel": 13
    },
    {
      "category": "LETICIA",
      "fromDate": "2022-08-08 00:00",
      "toDate": "2022-08-09 23:59",
      "columnSettings": {
        "fill": "#E6E6FA"
      },
      "task": "Presentation",
      "personnel": 14
    },
    {
      "category": "LETICIA",
      "fromDate": "2022-08-09 00:00",
      "toDate": "2022-08-19 23:59",
      "columnSettings": {
        "fill": "#57315b"
      },
      "task": "Sprint #1",
      "personnel": 15
    }
  ];

  let xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
    baseInterval: { timeUnit: "minute", count: 1 },
    renderer: am5xy.AxisRendererX.new(root, {})
  }));
  
  let yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
    categoryField: "category",
    renderer: am5xy.AxisRendererY.new(root, { inversed: true })
  }));

  // ==================================================
  yAxis.data.setAll([{ category: "LETICIA" }]); // <--- HERE
  // ==================================================

  let series = chart.series.push(am5xy.ColumnSeries.new(root, {
    xAxis: xAxis,
    yAxis: yAxis,
    openValueXField: "fromDate",
    valueXField: "toDate",
    categoryYField: "category"
  }));

  series.columns.template.setAll({
    templateField: "columnSettings",
    strokeOpacity: 0
  });

  series.data.processor = am5.DataProcessor.new(root, {
    dateFields: ["fromDate", "toDate"],
    dateFormat: "yyyy-MM-dd HH:mm"
  });
  
  series.data.setAll(data);

});

#chartdiv {
  width: 100%;
  height: 350px;
}

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>

<div id="chartdiv"></div>