score:0

Accepted answer

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


Related Query

More Query from same tag