svelte-apexcharts

A Svelte wrapper for the popular ApexCharts library. Easily create interactive and responsive charts for your Svelte projects.

Installation

Install the package using pnpm:

1pnpm add @edde746/svelte-apexcharts

Alternatively, use npm or yarn:

1npm install @edde746/svelte-apexcharts

1yarn add @edde746/svelte-apexcharts

Usage

Import the Chart component from the package and use it in your Svelte components:

1<script>
2  import Chart from '@edde746/svelte-apexcharts';
3</script>
4
5<div>
6  <h1>svelte-apexcharts demo</h1>
7  <Chart
8    options={{
9      chart: {
10        type: 'bar',
11      },
12      series: [
13        {
14          name: 'sales',
15          data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
16        },
17      ],
18      xaxis: {
19        categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
20      },
21    }}
22  />
23</div>
24
25<style>
26  div {
27    max-width: 24rem;
28    margin: 12rem auto;
29    text-align: center;
30    font: 1em sans-serif;
31  }
32</style>

Configuration

You can pass any valid ApexCharts options to the options prop of the Chart component. For example, to create a line chart, you can update the chart.type property:

1<Chart
2  options={{
3    chart: {
4      type: 'line',
5    },
6    // ...other options
7  }}
8/>

Updating Data

To update the chart data, simply update the options prop with the new data. The chart will automatically update to reflect the changes:

1<script>
2  let chartOptions = {
3    // ...initial options
4  };
5
6  function updateData() {
7    chartOptions = {
8      ...chartOptions,
9      series: [
10        {
11          name: 'sales',
12          data: [45, 60, 55, 70, 69, 80, 90, 111, 140],
13        },
14      ],
15    };
16  }
17</script>
18
19<button on:click={updateData}>Update Data</button>
20<Chart options={chartOptions} />

License

This project is licensed under the GPL v3.0 License - see the LICENSE file for details.