svelte-apexcharts

Build interactive visualizations in Svelte. Powered by ApexCharts.

Quick start

Install it:

npm install apexcharts @jsrob/svelte-apexcharts

Use it:

<script>
	import { SvelteApexCharts } from '@jsrob/svelte-apexcharts';

	const options = {
		xaxis: {
			categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
		}
	};
	let series = $state([
		{
			name: 'series-1',
			data: [30, 40, 35, 50, 49, 60, 70, 91]
		}
	]);
</script>

<SvelteApexCharts type="bar" width="500" {options} {series} />

This will render the following chart

Props

| Prop | Type | Description | | ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | series* | Array | The series is an array which accepts an object in the following format. To know more about the format of dataSeries, checkout Series docs on the website. | | type* | String | line, area, bar, pie, donut, scatter, bubble, heatmap, radialBar, candlestick, polarArea | | width | Number/String | Possible values for width can be 100% or 400px or 400 | | height | Number/String | Possible values for height can be 100% or 300px or 300 | | options | Object | The configuration object, see options on API (Reference) |

How do I update the chart?

Simple! Just change the series or any option and it will automatically re-render the chart.

Here's an example updating the chart data with some random series to illustrate the point.

<script>
	import { SvelteApexCharts } from '@jsrob/svelte-apexcharts';

	const options = {
		xaxis: {
			categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
		}
	};
	let series = $state([
		{
			name: 'series-1',
			data: [30, 40, 35, 50, 49, 60, 70, 91]
		}
	]);

	onMount(() => {
		const max = 90;
		const min = 20;

		setInterval(() => {
			const newData = series[0]!.data.map(() => {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			});
			series = [{ name: 'series-1', data: newData }];
		}, 1000);
	});
</script>

<SvelteApexCharts type="bar" width="500" {options} {series} />

License

MIT