I’ve been working on a Next.js application, and everything works perfectly in the development environment, but in production i can’t see my area(chart).

So, when I build the application using npm run build and then start it with npm start, the chart only displays the x and y axes, but the area chart itself is not shown.

I have no idea why, i don’t see any error in console… First i thought maybe css is not loading, but i think it is judging on x/y axis how it looks without chart..

"use client"; // if you use app dir, don't forget this line

import { useEffect, useState } from "react";
import { DuneClient, RunQueryArgs } from "@duneanalytics/client-sdk";
import { useQuery } from "wagmi";
import dynamic from "next/dynamic";
import { ApexOptions } from "apexcharts";

const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });

export interface DuneData {
  Day: string;
  "Total Supply": number;
}

export const TotalSupplyChart = ({data}) => {

  useEffect(() => {
    if (data) {
      setChartOptions({
        chart: {
          id: "apexchart-example",
          type: "area",
          toolbar: {
            show: false,
          },
          zoom: {
            enabled: false,
          },
          animations: {
            enabled: true,
            easing: "easeinout",
            speed: 800,
          },
        },
        dataLabels: {
          enabled: false,
        },
        xaxis: {
          categories,
          labels: {
            show: false,
          },
          tooltip: {
            enabled: true,
          },
        },
        yaxis: {
          labels: {
            formatter: (value) => value.toFixed(2),
          },
        },
        tooltip: {
          x: {
            format: "yyyy-MM-dd",
          },
        },
        grid: {
          strokeDashArray: 4,
        },
        stroke: {
          curve: "smooth",
        },
        fill: {
          type: "gradient",
          gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.7,
            opacityTo: 0.9,
            stops: [0, 90, 100],
          },
        },
      });

      setChartSeries([
        {
          name: "Total Supply",
          data: seriesData,
        },
      ]);
    }
  }, [data]);

  return (
    <div className="md:min-h-200px lg:min-h-[500px]">
      {typeof window !== "undefined" && (
        <Chart
          options={chartOptions}
          series={chartSeries}
          type={chartOptions.chart?.type}
          height="100%"
          width="100%"
        />
      )}
    </div>
  );
};

Here are the details of my setup:

Chart Component (TotalSupplyChart.tsx):

here is how it looks dev vs prod: