Integrations

ApexCharts has official wrappers for the four major frontend frameworks. Each wrapper handles chart lifecycle (mount, update, destroy) so you work with reactive props instead of calling imperative methods directly.

React

Install the wrapper:

npm install react-apexcharts apexcharts

import ReactApexChart from 'react-apexcharts'

function MyChart() {
  const series = [{ name: 'Revenue', data: [44, 55, 41, 67, 22] }]
  const options = {
    chart: { type: 'bar' },
    xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] }
  }

  return <ReactApexChart type="bar" series={series} options={options} height={350} />
}

Changing series or options state causes the chart to update automatically. The wrapper uses deep equality to avoid unnecessary re-renders.

Full guide: React Charts

Vue

Install the wrapper (Vue 3):

npm install vue3-apexcharts apexcharts

<script setup>
import { ref } from 'vue'
import VueApexCharts from 'vue3-apexcharts'

const series = ref([{ name: 'Revenue', data: [44, 55, 41, 67, 22] }])
const options = ref({
  chart: { type: 'bar' },
  xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] }
})
</script>

<template>
  <VueApexCharts type="bar" :series="series" :options="options" height="350" />
</template>

For Vue 2, install vue-apexcharts instead. Both wrappers watch series and options reactively.

Full guide: Vue Charts

Angular

Install the wrapper:

npm install ng-apexcharts apexcharts

import { NgApexchartsModule } from 'ng-apexcharts'

@Component({
  selector: 'app-chart',
  standalone: true,
  imports: [NgApexchartsModule],
  template: `
    <apx-chart
      [series]="series"
      [chart]="chartOptions"
      [xaxis]="xaxis"
    ></apx-chart>
  `
})
export class ChartComponent {
  series = [{ name: 'Revenue', data: [44, 55, 41, 67, 22] }]
  chartOptions = { type: 'bar' as const, height: 350 }
  xaxis = { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] }
}

The Angular wrapper runs chart operations outside NgZone and is SSR-safe.

Full guide: Angular Charts

Blazor

Install the NuGet package:

dotnet add package Blazor-ApexCharts

@using ApexCharts

<ApexChart TItem="DataPoint" Title="Revenue">
  <ApexPointSeries TItem="DataPoint"
    Items="data"
    Name="Revenue"
    SeriesType="SeriesType.Bar"
    XValue="@(e => e.Month)"
    YValue="@(e => e.Value)" />
</ApexChart>

@code {
  List<DataPoint> data = new() {
    new("Jan", 44), new("Feb", 55), new("Mar", 41)
  };
  record DataPoint(string Month, int Value);
}

Full guide: Blazor Charts

Vanilla JavaScript

No wrapper needed. Create an instance directly:

<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
  const chart = new ApexCharts(document.querySelector('#chart'), {
    chart: { type: 'bar', height: 350 },
    series: [{ name: 'Revenue', data: [44, 55, 41, 67, 22] }],
    xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] }
  })
  chart.render()
</script>

See Installation for npm and ES module usage.