I’m developing a React component that utilizes ApexCharts to display a line chart. The chart is supposed to display data for three series under the “Today” category. However, after deploying my application using Docker in a production environment, the chart displays data from all available series, not just the three expected ones. Strangely, this issue does not occur in my local development environment.

Version Details

• react: “^18”,
• react-apexcharts: “^1.4.1”
• next: “14.1.3”

Expected Behavior: The chart should only display data for three series under the “Today” category.
Actual Behavior in Production: The chart displays data from all available series, which is incorrect.
Local Development: The chart works correctly in my local development environment.

import React, { useEffect, useState, useMemo, memo } from "react";
import moment from "moment";

const ReactApexChart = React.lazy(() => import("react-apexcharts"));

import { formatNumber, getCurrentHour, formationTimezone } from "@utils/helper";

const LineChart = ({
  labels,
  series,
  colors,
  height,
  multipleYaxis,
  noTick = false,
  isRevenue,
  selectedDate,
  isArticle,
}: any) => {
  let period_date = formationTimezone(moment(), "YYYY-MM-DD");
  const formattedDate = selectedDate
    ? moment(selectedDate).format("YYYY-MM-DD")
    : null;

    const updatedSeriesData = useMemo(() => {
      const getCurrentData = () => {
        const currentHour = getCurrentHour();
        const currentSeries = series?.find((item: any) => item.name === "Today");
        return currentSeries?.data?.slice(0, currentHour) || [];
      };
    
      if (!isArticle || period_date !== formattedDate) {
        return series;
      }
    
      const updatedSeriesData = series.map((data: any) => {
        if (data.name === "Today") {
          return {
            ...data,
            data: getCurrentData(),
          };
        }
        return data;
      });
    
      return updatedSeriesData;
    }, [series, isArticle, period_date, formattedDate]);
  
    console.log("updatedSeriesData", updatedSeriesData)

  return (
    <ReactApexChart
      options={{
        xaxis: {
          categories: labels,
          tickAmount: noTick ? labels?.length : labels?.length / 2,
          labels: {
            rotate: -0,
            formatter: function (value: any) {
              if (typeof value === "string") {
                const dateTimeParts = value?.split(" ");
                if (dateTimeParts?.length === 4) {
                  const timePart = `${dateTimeParts[2]} ${dateTimeParts[3]}`;
                  return timePart;
                }
              }
              return value;
            },
          },
          tooltip: {
            enabled: false,
          },
        },
        colors: colors,
        grid: {
          xaxis: {
            lines: {
              show: false,
            },
          },
          yaxis: {
            lines: {
              show: false,
            },
          },
        },
        tooltip: {
          x: {
            show: true,
            formatter: function (
              value: any,
              { series, seriesIndex, dataPointIndex }: any
            ) {
              const label = labels?.[dataPointIndex];
              return label;
            },
          },
          y: [
            {
              formatter: function (val: any) {
                const value = formatNumber(val);
                return isRevenue ? `$${value}` : value;
              },
            },
            {
              formatter: function (val: any) {
                const value = formatNumber(val);
                return isRevenue ? `$${value}` : value;
              },
            },
          ],
        },
        yaxis: multipleYaxis
          ? [
              {
                labels: {
                  formatter: function (value: any) {
                    if (value === 5e-324) {
                      return "0";
                    }
                    return formatNumber(value);
                  },
                },
              },
              {
                labels: {
                  formatter: function (value: any) {
                    if (value === 5e-324) {
                      return "0";
                    }
                    return formatNumber(value);
                  },
                },
                opposite: true,
                show: false,
              },
            ]
          : {
              labels: {
                formatter: function (value: any) {
                  return formatNumber(value);
                },
              },
            },
        dataLabels: {
          enabled: false,
        },
        chart: {
          height: 350,
          type: "line",
          zoom: {
            enabled: false,
          },
          toolbar: {
            show: false,
          },
        },
        legend: {
          show: true,
          showForSingleSeries: true,
        },
        stroke: {
          curve: "straight",
        },
      }}
      series={updatedSeriesData || []}
      type="line"
      width="100%"
      height={height || 200}
    />
  );
};

export default memo(LineChart);

sample series:

[
    {
        "name": "Today",
        "data": [
            1013,
            706,
            461
        ]
    },
    {
        "name": "Average",
        "data": [
            842,
            656,
            434,
            426,
            696,
            1303,
            2699,
            3673,
            4088,
            3795,
            3493,
            3407,
            3633,
            3489,
            3249,
            3148,
            3064,
            2581,
            2365,
            2547,
            2683,
            2792,
            2234
        ]
    }
]

I’m looking for insights into why the chart displays all available series in production despite my code specifying only three series under the “Today” category. Any suggestions on how to debug or fix this issue would be greatly appreciated.