Not able to use toggleSeries with next js application

I want to toggleSeries data of a chart in my next js application. I am trying to use that method in 2 different ways, but none of them is working. I will show you the error i am getting with both these methods differently. Please help me with a solution.

Method 1:

import ApexCharts from 'apexcharts';

toggleSeries = (seriesName) => {
  ApexCharts.exec('myChartId', 'toggleSeries', 'seriesName');
}

In method 1 there are 2 problems

1. Most of the time i get window is not defined for ApexCharts
2. Second, sometimes i get: apexcharts__WEBPACK_IMPORTED_MODULE_9___default.a.exec is not a function/

In order to resolve error: window is not defined I use dynamic import as i use dynamic import for react-apexcharts see below Method 2:

const ApexCharts = dynamic(() => import('apexcharts'), { ssr: false });

toggleSeries = (seriesName) => {
  ApexCharts.exec('myChartId', 'toggleSeries', 'seriesName');
}

In method 2 it says ApexCharts.exec is not a function.

Please help me with the solution for this

[mitsamphan]

@hbole

Use react-apexcharts apexcharts package and solve with dynamic import in next.js

import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });

export default function ChartSample() {
  const [dataSample, setDataSample] = useState({
    options: {
      chart: {
        id: "basic-bar",
      },
      xaxis: {
        categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
      },
    },
    series: [
      {
        name: "series-1",
        data: [30, 40, 45, 50, 49, 60, 70, 91],
      },
    ],
  });

  return (
    <div>
      <Chart
        options={dataSample.options}
        series={dataSample.series}
        type="line"
        width="500"
      />
    </div>
  );
}

and call component <ChartSample />

[alex-r89]

Hi,

Apologies, I know this is closed but no solution here works in terms of toggling a series with an external button for me.

I have tried the method by @MisaelMa , but I get the error ApexCharts.exec is not a function after importing the chart component and clicking the button.