Make ApexChart Work in Next.js 14 TypeScript

tanut aran
Jul 7, 2024

--

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 !

--

--

tanut aran
tanut aran

Written by tanut aran

Co-founder and Coder at work !

No responses yet