@bn3t/svelte-apexcharts

Svelte wrapper for ApexCharts to build interactive visualizations in svelte.

Download and Installation

Install via npm

npm install @bn3t/svelte-apexcharts apexcharts

Usage

The interface of this component is similar to the interface used in the react-apexcharts implementation. More specifically there is an options and a series properties which can be used separatly. Also, this library is compatible with SvelteKit.

The global ApexCharts object is exposed by this library which allows to call ApexCharts methods directly.

import ApexChart, { ApexCharts } from '@bn3t/svelte-apexcharts';
import type { SvelteApexOptions, SvelteApexSeries } from '@bn3t/svelte-apexcharts';

To create a basic bar chart with minimal configuration, write as follows:

<script lang="ts">
  import ApexChart from '$lib';
  import type { SvelteApexOptions, SvelteApexSeries } from '$lib';

  let animate = true;

  let series: SvelteApexSeries = [
    {
      name: 'series-1',
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    }
  ];

  let options: SvelteApexOptions = {
    chart: {
      id: 'apexchart-example'
    },
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
    }
  };
</script>

<div class="root">
  <ApexChart {options} {series} {animate} />
</div>

<style>
  .root {
    width: 100%;
    height: 400px;
  }
</style>