@ariefsn/svelte-apexcharts

A lightweight Svelte 5 wrapper for ApexCharts with reactive options support.

Installation

npm install @ariefsn/svelte-apexcharts apexcharts
# or
bun add @ariefsn/svelte-apexcharts apexcharts

Usage

<script lang="ts">
  import { Chart } from '@ariefsn/svelte-apexcharts';
  import type { ApexOptions } from 'apexcharts';

  const options: ApexOptions = {
    chart: { type: 'line' },
    series: [{ name: 'Sales', data: [30, 40, 35, 50, 49, 60] }],
    xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] }
  };
</script>

<Chart {options} />

Props

Reactive Options

Options changes are automatically reflected in the chart:

<script lang="ts">
  import { Chart } from '@ariefsn/svelte-apexcharts';
  import type { ApexOptions } from 'apexcharts';

  let darkMode = $state(false);

  const options = $derived<ApexOptions>({
    chart: { type: 'bar', background: darkMode ? '#1a1a2e' : '#fff' },
    series: [{ name: 'Revenue', data: [44, 55, 57, 56, 61, 58] }],
    xaxis: { categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6'] },
    theme: { mode: darkMode ? 'dark' : 'light' }
  });
</script>

<button onclick={() => (darkMode = !darkMode)}>Toggle Theme</button>
<Chart {options} />

Accessing the Node

Bind to node to get the underlying DOM element:

<script lang="ts">
  import { Chart } from '@ariefsn/svelte-apexcharts';

  let chartNode = $state<HTMLDivElement | undefined>(undefined);
</script>

<Chart options={...} bind:node={chartNode} />

Chart Types

Supports all ApexCharts chart types: Line, Area, Bar, Column, Pie, Donut, RadialBar, Scatter, Bubble, Heatmap, Candlestick, BoxPlot, Treemap, Radar, PolarArea, RangeBar, RangeArea.

Links

• GitHub
• npm
• ApexCharts Docs
• Changelog

License

MIT License — Copyright (c) 2026 Arief Setiyo Nugroho