I’m having an data loss issue using line Graphs in ApexCharts (JSON, JS, Electron)

ApexCharts seems to modify/remove some data, I’m not quite sure if this is a skill issue of mine, or something else.
I’m getting data from an API from my server, the APIs data is intact and seems to appear fine, the format of it is
[

[
...
{
fileName": "The Dawns Awakening.json",
    "data": {
     ...
      "2024-06-10": 2206772
    }
}
]

I’m using the variable

const JsonExample = [];

to format the data in a usable format for ApexCharts

the part of the code causing issues is below:

async function drawChart(labels, chartData, guildNames, yAxisMax) {
  const JsonExample = [];

  for (let i = 0; i < guildNames.length; i++) {
    const chartDataDict = {};
    chartDataDict.name = guildNames[i]; // Add the name field
    const reversedLabels = labels.slice().reverse();
    const data = [];
    for (let j = 0; j < reversedLabels.length; j++) {
      const date = reversedLabels[j];
      const gexp = chartData[i][chartData[i].length - j];
      data.push([date, gexp]);
    }

    chartDataDict.data = data;
    JsonExample.push(chartDataDict);
  }
  // Print the JSON object
  console.log(JsonExample);


  
  
//now to string
console.log(JSON.stringify(JsonExample));
const jsonData = JSON.stringify(JsonExample);

const seriesData = JSON.parse(jsonData).map(guild => {
  let color

    if (guild.name === "Puffy") {
      color = "#BF40BF"; // Bright Purple
  } else if (guild.name === "Lucid") {
      color = "#FFFF00"; // Piss Yellow
  } else if (guild.name === "Rebel") {
      color = "#0000FF"; // Blue
  } else if (guild.name === "Miscellaneous") {
      color = "#008000"; // Green
  } else if (guild.name === "Sailor Moon") {
      color = "#6699CC"; // Bluegrey
  } else if (guild.name === "The Abyss") {
      color = "#808080"; // Grey
  } else if (guild.name === "The Dawns Awakening") {
      color = "#FF0000"; // Red
  } else if (guild.name === "Leman") {
      color = "#FFA500"; // Orange
  } else if (guild.name === "The Blood Lust"){
      color = "#FF2301";
  } else if (guild.name === "Miscellaneous"){
      color = "#587246";
  } else {
    console.log(guild.name)
    color = "#447b40"; // default color
  }

    return {
        ...guild,
        color: color
    };
});

const options = {
    series: seriesData,
    chart: {
        height: 750,
        width: '100%',
        type: 'line',
        zoom: {
            enabled: true,
            type: 'x'
        },
        foreColor: 'white',
        animations: {
            enabled: false,
            easing: 'easeinout',
            speed: 800,
            animateGradually: {
                enabled: true,
                delay: 50
            },
            dynamicAnimation: {
                enabled: true,
                speed: 350
            },
        }
    },
    colors: seriesData.map(series => series.color),
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: 'smooth',
        width: 2
    },
    title: {
        text: 'Top Guilds',
        align: 'center',
    },
    xaxis: {
        type: 'datetime'
    },
    yaxis: {
        title: {
            text: 'Daily GEXP'
        },
        labels: {
            formatter: (val) => {
                return val.toLocaleString();
            }
        }
    }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
}

I’ve tried changing the way json is processing the data, this however just caused the guild names, and the data, to mix, causing the last guild to have the first’s data and so on.