gem-hunter

Download and Installation

Installing via npm

npm install react-apexcharts apexcharts

Usage

Client-Side Usage (Traditional)

import Chart from 'react-apexcharts'

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

    this.state = {
      options: {
        chart: {
          id: 'apexchart-example'
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
        }
      },
      series: [{
        name: 'series-1',
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
      }]
    }
  }
  render() {
    return (
      <Chart options={this.state.options} series={this.state.series} type="bar" width={500} height={320} />
    )
  }
}

How do I update the chart?

Server-Side Rendering (SSR) with Next.js App Router

Server Component (RSC)

import Chart from 'react-apexcharts/server'

export default async function DashboardPage() {
  const series = [{
    name: 'series-1',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }]

  const options = {
    chart: { id: 'apexchart-example' },
    xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }
  }

  return (
    <Chart
      type="bar"
      series={series}
      options={options}
      width={500}
      height={320}
    />
  )
}

With Client-Side Hydration

// app/dashboard/page.tsx (Server Component)
import Chart from 'react-apexcharts/server'
import ChartHydrate from './ChartHydrate'

export default async function DashboardPage() {
  const series = [{ data: [30, 40, 35, 50, 49, 60, 70] }]
  const options = { chart: { type: 'bar' }, xaxis: { categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'] } }

  return (
    <div>
      <Chart type="bar" series={series} options={options} width={500} height={300} />
      <ChartHydrate />
    </div>
  )
}

// app/dashboard/ChartHydrate.tsx (Client Component)
'use client'
import Hydrate from 'react-apexcharts/hydrate'

export default function ChartHydrate() {
  return (
    <Hydrate
      className="my-chart"
      clientOptions={{
        chart: {
          animations: {
            enabled: true,
            speed: 800
          }
        }
      }}
    />
  )
}

Client-Only Usage in Next.js

'use client'
import Chart from 'react-apexcharts'

export default function ClientChart() {
  const options = {
    chart: { id: 'apexchart-example' },
    xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }
  }

  const series = [{
    name: 'series-1',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }]

  return <Chart type="bar" series={series} options={options} />
}

this.setState({
  options: {
    ...this.state.options,
    xaxis: {
      ...this.state.options.xaxis,
      categories: ['X1', 'X2', 'X3']
    }
  }
})

this.setState({
  options.xaxis.categories: ['X1', 'X2', 'X3']
})

Tree-Shaking (Smaller Bundles)

// Instead of:
import Chart from 'react-apexcharts'

// Use the core variant:
import Chart from 'react-apexcharts/core'

// Then manually register only what you need:
import 'apexcharts/bar'                  // bar / column chart type
import 'apexcharts/line'                 // line / area / scatter chart type
import 'apexcharts/features/legend'      // legend feature
import 'apexcharts/features/annotations' // annotations feature
// ... etc.

import Chart from 'react-apexcharts/core'
import 'apexcharts/bar'
import 'apexcharts/features/legend'

export default function BarChart() {
  const series = [{ name: 'Sales', data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }]
  const options = {
    chart: { id: 'bar-chart' },
    xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] }
  }

  return <Chart type="bar" series={series} options={options} width={500} height={320} />
}

import Chart from 'react-apexcharts/core/server'   // Server Component (async)
import Hydrate from 'react-apexcharts/core/hydrate' // Client hydration

Props

How to call methods of ApexCharts programmatically?

ApexCharts.exec('reactchart-example', 'updateSeries', [{
  data: [40, 55, 65, 11, 23, 44, 54, 33]
}])

What's included

react-apexcharts/
├── dist/
│   ├── react-apexcharts.cjs.js          # CommonJS (default import)
│   ├── react-apexcharts.esm.js          # ES Module (default import)
│   ├── react-apexcharts.iife.min.js     # IIFE for browser <script> tags
│   ├── react-apexcharts.min.js          # CommonJS (backward compat alias)
│   ├── react-apexcharts-server.esm.js   # react-apexcharts/server
│   ├── react-apexcharts-hydrate.esm.js  # react-apexcharts/hydrate
│   ├── react-apexcharts-core.cjs.js     # react-apexcharts/core (CJS)
│   ├── react-apexcharts-core.esm.js     # react-apexcharts/core (ESM)
│   ├── react-apexcharts-core-server.esm.js   # react-apexcharts/core/server
│   └── react-apexcharts-core-hydrate.esm.js  # react-apexcharts/core/hydrate
└── types/
    ├── react-apexcharts.d.ts
    ├── react-apexcharts-server.d.ts
    ├── react-apexcharts-hydrate.d.ts
    ├── react-apexcharts-core.d.ts
    ├── react-apexcharts-core-server.d.ts
    └── react-apexcharts-core-hydrate.d.ts

Development

Install dependencies

npm install

Running the example

cd example
npm install
npm run start

Bundling

To build

npm run build

License