Not able to use toggleSeries with next js application

[hbole]

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

[hbole]

Need Help Here

[mateusvahl]

@hbole Same, thanks for the mentioned dynamic import 👍🏻

[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 />

[hbole]

Yes @mitsamphan that's what I am using. Can you please help with how to toggle the series using an external button

import dynamic from 'next/dynamic';
import { Select, MenuItem } from '@material-ui/core';
const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });

interface ValueProps {
  isDeviceMobile: boolean
}

interface ValueState {
  options: any,
  timePeriod: string,
  series: any,
  darkMode: boolean
}

const timePeriodOptions = ['All', '1M', '3M', '6M', '1Y'];

class DashboardChart extends Component<ValueProps, ValueState> {
  state: ValueState = {
    options: {
      chart: {
        id: 'dashboardChart',
        zoom: {
          enabled:!1
        },
        toolbar:{show:!1}
      },
      colors: ["#ffc200","#5e2bff","#ff80a3"],
      dataLabels: {
        enabled: !1
      },
      stroke: {
        width: [2,2,2],
        curve: "straight",
      },
      markers: {
        size: 0,
        hover:{
          sizeOffset:6
        }
      },
      legend: {
        show: !1,
      },
      xaxis: {
        categories: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
        labels: {
          style: {
            fontWeight: '700',
            colors: ["#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf"]
          }
        }
      },
      yaxis: {
        labels: {
          style: {
            fontWeight: '700',
            colors: ["#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf", "#aeafaf"]
          }
        }
      },
      tooltip: {
        y:[
          {
            title: {
              formatter: function (e) {
                return e;
              }
            }
          },
          {
            title: {
              formatter: function (e) {
                return e;
              }
            }
          },
          {
            title: {
              formatter:function (e) {
                return e;
              }
            }
          }
        ]
      },
      grid: {
        borderColor:" #aeafaf",
        strokeDashArray: 3
      }
    },
    series: [
      {
        name:"A",
        data:[69,78,79,89,99,100,102,95,105,109,119,121]
      },
      {
        name:"B",
        data:[67,74,75,83,95,89,99,93,107,103,110,118]
      },
      {
        name:"C",
        data:[]
      }
    ],
    timePeriod: 'All',
    darkMode: false
  };

  componentDidMount () {
    let darkMode = JSON.parse(localStorage.getItem('darkMode')) || false;
    this.setState({ darkMode });
  }

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

  setTimePeriod = (timePeriod) => {
    this.setState({ timePeriod });
  };

  render() {
    const { darkMode, timePeriod } = this.state;
    const { isDeviceMobile } = this.props;
    
    return (
      <div className={isDeviceMobile && darkMode ? 'chart-mobile-dark' : isDeviceMobile && !darkMode ? 'chart-mobile-light' : !isDeviceMobile && darkMode ? "chart-dark" : "chart-light"}>
        <div className='chart-header flex-wrap layout-row layout-align-space-between-center'>
          <div className='layout-row my-24'>
            <p className='title title-active cursor-primary'>Performance</p>
          </div>
          {
            !isDeviceMobile ?
            <div className='layout-row my-24'>
              <p className='time-period time-period-active'>All</p>
              <p className='time-period'>1 M</p>
              <p className='time-period'>2 M</p>
              <p className='time-period'>3 M</p>
              <p className='time-period'>6 M</p>
              <p className='time-period'>1 Y</p>
            </div> :
            <div className='layout-row'>
              <Select
                labelId="demo-customized-select-label"
                id="demo-customized-select"
                value={timePeriod}
                inputProps={{
                  classes: {
                    root: 'chart-time-select-input',
                    icon: 'chart-time-select-icon',
                  },
                }}
                MenuProps={{
                  classes: {
                    list: 'p-0'
                  }
                }}
                onChange={event => this.setTimePeriod(event.target.value)}
              >
                <MenuItem value={'All'}>All</MenuItem>
                <MenuItem value={'1M'}>1M</MenuItem>
                <MenuItem value={'3M'}>3M</MenuItem>
                <MenuItem value={'6M'}>6M</MenuItem>
                <MenuItem value={'1Y'}>1Y</MenuItem>
              </Select>
            </div>
          }
        </div>
        <ReactApexChart options={this.state.options} series={this.state.series} type="line" height={isDeviceMobile ? "200" : "320"} />
            
        
    )
  }
}

export default DashboardChart;

[paulussimanjuntak]

Hi, @hbole is this issue already solved? can you share the solution here?

[MisaelMa]

in the code comes the following fragment and I use it in a custom component and the import in a page

this worked for me in a small application

[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.

[V0tis]

@alex-r89 same here

[tochukwu19]

@mitsamphan Hi What do you do When you use Next Dynamic to Import apexchart and still get the "Windows is not defined" error on hard reload

[QuangHa0110]

I am using the following solution

[tochukwu19]

Thank you very much

[chidimo]

For anyone else coming here, use dynamic imports for the component where you use ApexCharts. and everything should be fine.

[collegewap]

This is what I ended up doing

  useEffect(() => {
    const interval = setInterval(() => {
      if (!hidden) {
        const chart = ApexCharts.getChartByID('chartId')
        if (chart) {
          ApexCharts.exec('chartId', 'hideSeries', 'seriesName')
          setHidden(true)
          clearInterval(interval)
        }
      }
    }, 100)
    return () => {
      clearInterval(interval)
    }
  }, [])