Svelte Apex Charts

Create and update dynamic SVG charts in Svelte(Kit) using ApexCharts - demo

Quick-Start

1pnpm add apexcharts svelte-chart-apex -D
2npm i apexcharts svelte-chart-apex -D
3# Bring your own ApexCharts library.
4# It is listed as a peer dependency.

1<script>
2  import { renderChart } from 'svelte-chart-apex';
3
4  /** @type {import('svelte-chart-apex').Chart} */
5  const chart = {
6    options: {
7      // Provide your own ApexChars options.
8      chart: { type: 'bar' },
9      series: [{ name: 'sales', data: [5, 6, 13, 26] }],
10      xaxis: { categories: [2020, 2021, 2022, 2023] }
11    }
12  };
13</script>
14
15<!-- After the chart is created, chart.ref and chart.node are set. -->
16<!-- This allows all ApexCharts methods to be used. (e.g. dataURI) -->
17<div use:renderChart={chart}></div>
18
19<!-- When the <div> element is unmounted, the chart gets destroyed. -->
20
21<button
22  type="button"
23  on:click={() => {
24    // chart.node is also available, which points to the <div> element.
25    chart.ref?.updateSeries([{ data: [7, 10, 20, 23] }]);
26  }}
27>
28  Update Series
29</button>

Features

Compared to the svelte-apexcharts library,

• Supports SvelteKit - no more window is not defined error.
• Supports TypeScript - be confident with the chart options.
• Provides the chart reference - all Apex methods can be used.

1chart.ref?.updateOptions({ xaxis: { labels: { show: false } }, yaxis: { min: 20, max: 100 } });
2chart.ref?.addXaxisAnnotation({ x: 40, label: { text: 'Lorem Ipsum' } });
3// And many more. Reference the ApexCharts documentation.

Notes

The Chart Object

• Create a chart object and pass the reference as the action parameter.
• This is necessary to update and provide chart.ref and chart.node.

1<div use:renderChart={chart}></div>

Server-Side Rendering

• ApexCharts does not support SSR, and the issue is marked as stale.
• This StackOverflow post shows other ways of handling SSR errors.