Apex Charts Rendering with vertical lines

Question

I'm currently using Vue2 and want to implement apex charts into the existing codebase. Everything works really well, but i'm having an issue rendering the chart without the weird vertical lines.

Apex Chart

Not quite sure what the issue is here

Here's What I tried so far:

<script>

export default {
  components: {
    apexchart: VueApexCharts
  },
  props: {
    data: Object
  },
  data() {
    return {
      chartOptions: {
        chart: {
          id: "chart1",
          toolbar: {
            show: false,
            tools: {
              reset: true
            }
          },
          margin: {
            top: 20,
            bottom: 20,
            left: 20,
            right: 20
          },
          animations: {
            enabled: false
          },
          stacked: true
        },
        xaxis: {
          type: "datetime",
          categories: [],
          tickPlacement: "on"
        },
        yaxis: {
          title: {
            text: "Units"
          },
          min: 0
        },
        grid: {
          show: true,
          borderColor: "#A9A9A9",
          position: "back",
          xaxis: {
            lines: {
              show: true
            }
          },
          yaxis: {
            lines: {
              show: true
            }
          }
        },
        colors: this.getColorsFromData(),
        title: {
          text: "Stacked Area Chart",
          align: "left"
        }, 
        fill: {
          type: "solid",
          opacity: 1
        },
        stroke: {
          show: true,
          width: 1,
          curve: "smooth"
        },
        dataLabels: {
          enabled: false
        },
        legend: {
          position: "bottom",
          formatter: function(val, opts) {
            const color = opts.w.config.colors[opts.seriesIndex];
            return `<div class="legend" style="border-color:${color};">${val}</div>`;
          }
        },
        markers: {
          size: 0
        },
        tooltip: {
          custom: function({ series, seriesIndex, dataPointIndex, w }) {
            let tooltipText = "<div class='custom-tooltip'>";

            const date = new Date(w.globals.seriesX[0][dataPointIndex]);
            const time = date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
            const formattedDate = date.toDateString() + " " + time;

            tooltipText += `<div>${formattedDate}<br /></div>`;

            series.forEach((seriesItem, index) => {
              const data = w.globals.initialSeries[index].data[dataPointIndex];
              const title = w.config.series[index].name;
              const color = w.config.colors[index];
              tooltipText += `<div><span style='color:${color};'><svg width="12" height="12"><circle cx="6" cy="6" r="5" fill="${color}" /></svg></span> <span style='color:black;'>${title}</span>: ${data.y}kWh</div>`;
            });

            tooltipText += "</div>";

            return tooltipText;
          }
        }
      },
      chartSeries: []
    };
  },
  watch: {
    data: {
      handler(newData) {
        if (newData) {
          this.prepareChartData(); // Call prepareChartData when data is available
        }
      }
    }
  },
  mounted() {
    this.prepareChartData();
  },
  methods: {
    prepareChartData() {
      if (!this.data) {
        // Data is not available, return and wait for it
        return;
      }

      const seriesData = Object.values(this.data).map(item => ({
        name: item.config.title,
        data: item.data.map(entry => ({
          x: new Date(entry.d),
          y: parseFloat(entry.v)
        }))
      }));

      const categories = Object.values(this.data)[0].data.map(entry => new Date(entry.d).toDateString());

      this.chartOptions.xaxis.categories = categories;
      this.chartSeries = seriesData;
    },
    resetSeries() {
      if (this.$refs.chart) {
        this.$refs.chart.resetSeries(true, true);
      }
    },
    getColorsFromData() {
      const colors = Object.values(data).map(item => item.config.color);
      return colors;
    }
  }
};
</script>

I need the chart to be rendered as a solid color on each stack and not have these vertical lines.