Make ApexChart Work in Next.js 14 TypeScript

Installation

You need both original package and React binding

yarn add react-apexcharts apexcharts

Problem 1: Modify Example to be the Modern React

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      options: {
      ...

The basic checklist are:

1. class → Function then export default that function
2. this.state to useState or just variable

Problem 2: Window is undefined

ApexChart cannot do the server side.

It requires window object, so we force this code to client render by:

'use client'
import dynamic from "next/dynamic";
const ApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });

Problem 3 : TypeScript on ApexChart options

Type assumption is wrong you need to explicitly import and declare like below:

import { ApexOptions } from "apexcharts";


const options: ApexOptions = {
     ...

Hope this help !