npm package: @jsrob/svelte-apexcharts
Description: Build interactive visualizations in Svelte. Powered by [ApexCharts](https://apexcharts.com/).
Latest version: 0.1.0

# svelte-apexcharts

Build interactive visualizations in Svelte. Powered by [ApexCharts](https://apexcharts.com/).

## Quick start

Install it:

```bash
npm install apexcharts @jsrob/svelte-apexcharts
```

Use it:

```svelte
<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

<p><img src="https://raw.githubusercontent.com/wobsoriano/solid-apexcharts/main/chartexample.svg" /></p>

## 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](https://apexcharts.com/docs/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)](https://apexcharts.com/docs/options/chart/type/)                                                                                      |

## 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.

```svelte
<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