0.1.0 • Published 5 months ago
svelte-chart-apex v0.1.0
Svelte Apex Charts
Create and update dynamic SVG charts in Svelte(Kit) using ApexCharts - demo
Quick-Start
pnpm add apexcharts svelte-chart-apex -D
npm i apexcharts svelte-chart-apex -D
# Bring your own ApexCharts library.
# It is listed as a peer dependency.
<script>
import { renderChart } from 'svelte-chart-apex';
/** @type {import('svelte-chart-apex').Chart} */
const chart = {
options: {
// Provide your own ApexChars options.
chart: { type: 'bar' },
series: [{ name: 'sales', data: [5, 6, 13, 26] }],
xaxis: { categories: [2020, 2021, 2022, 2023] }
}
};
</script>
<!-- After the chart is created, chart.ref and chart.node are set. -->
<!-- This allows all ApexCharts methods to be used. (e.g. dataURI) -->
<div use:renderChart={chart}></div>
<!-- When the <div> element is unmounted, the chart gets destroyed. -->
<button
type="button"
on:click={() => {
// chart.node is also available, which points to the <div> element.
chart.ref?.updateSeries([{ data: [7, 10, 20, 23] }]);
}}
>
Update Series
</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.
chart.ref?.updateOptions({ xaxis: { labels: { show: false } }, yaxis: { min: 20, max: 100 } });
chart.ref?.addXaxisAnnotation({ x: 40, label: { text: 'Lorem Ipsum' } });
// 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
andchart.node
.
<div use:renderChart={chart}></div>
Server-Side Rendering
0.1.0
5 months ago