[Fixed] How to plot stacked bar chart in highcharts with dynamic data?

Issue

Hi i am working on highcharts stacked chart so here i am getting the data from api is like this:

[{
        name: "john",
        task: "Project - 1",
        units: 88.25,
      },
      {
        name: "john",
        task: "Others",
        units: 79.75,
      },
      {
        name: "joe",
        task: "Others",
        units: 120,
      },
      {
        name: "jane",
        task: "Others",
        units: 88.75,
      },
      {
        name: "jane",
        task: "Project - 1",
        units: 4,
      }

    ]

Here is the jsfiddle link Demo

How to plot stacked bar chart with the dynamic data? TIA.

Solution

You need to map your data to the series structure required by Highcharts and use x-axis with categories.

const series = [];
const categories = [];

data.forEach(function(dataEl) {
    const existingSeries = series.find(s => s.name === dataEl.name);
    const existingCategory = categories.find(c => c === dataEl.task);

    if (!existingCategory) {
        categories.push(dataEl.task);
    }

    if (existingSeries) {
        existingSeries.data.push([categories.indexOf(dataEl.task), dataEl.units]);
    } else {
        series.push({
            name: dataEl.name,
            data: [
                [categories.indexOf(dataEl.task), dataEl.units]
            ]
        });
    }
});

Highcharts.chart('container', {
    ...,
    xAxis: {
        categories,
        ...
    },,
    series
});

---

Live demo: http://jsfiddle.net/BlackLabel/Lutyq4e6/

API Reference: https://api.highcharts.com/highcharts/series.column.data