@jacobknobel/svelte-apexcharts
v0.0.2
Published
This project is archived and I will not work on it anymore as I don't continue with Svelte.
Downloads
3
Readme
This project is archived and I will not work on it anymore as I don't continue with Svelte.
Download and Installation
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>
Development
Development lifecycle
$ npm run dev # Run sveltkit application in dev mode
How to publish to npm
$ npm run package
$ cd package
$ npm publish