It is a possibility that you may have not included 'data' property in series

I am trying to append the series from mydict into the Gantt chart.

I want to be able to CRUD the Gantt chart.

But I can't even add the new data yet.

I have also tried the updateSeries and appendData methods.

Do I need to use a mixture of methods for what I am trying to achieve?

I do not understand why it can't read the data property.

Please run the code to see the error for yourself.

Thank you.

<!DOCTYPE html>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- ApexChart -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>

<div class="content-section">
    <div id="chart"></div>
</div>
</body>
<script>
var mydict = {'positions': [{'position': '1', 'start': 1627250400.0, 'end': 1627250400.0}, {'position': '12', 'start': 1627077600.0, 'end': 1627509600.0}, {'position': '6', 'start': 1625781600.0, 'end': 1625781600.0}, {'position': '1', 'start': 1625695200.0, 'end': 1625954400.0}, {'position': '1', 'start': 1625608800.0, 'end': 1625781600.0}]}

console.log(mydict.positions.length)
console.log(mydict.positions[1].position)
console.log(mydict.positions[1].start)

var options = {
        series: [
        {
            name: '1',
            data: [
                {x:'Position', y: [192198, 392199]},
            ]
        },
        {
            name: '2',
            data: [
                {x:'Position', y: [792198, 792199]},
            ]
        }
        ],
        chart: {
        type: 'rangeBar',
        height: 350
    },
    xaxis: {
        type: 'datetime'
    },
    plotOptions: {
        bar: {
        horizontal: true
        }
    },
    legend: {
          position: 'top',
          horizontalAlign: 'left'
    }
};
document.getElementById('chart').innerHTML = '';
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
for (i = 0; i < mydict.positions.length; i++) {
    chart.appendSeries([{
        name: mydict.positions[i].position,
        data: [{x:'position', y: [mydict.positions[i].start, mydict.positions[i].end]}]
    }]);
}
</script>

Solution

Found the solution.

I had to remove the brackets in the appendSeries method.

for (i = 0; i < mydict.positions.length; i++) {
    chart.appendSeries({
        name: mydict.positions[i].position,
        data: [{x:'position', y: [mydict.positions[i].start, mydict.positions[i].end]}]
    });
}