Svelte-FusionCharts

A simple and lightweight official Svelte component for FusionCharts JavaScript charting library. svelte-fusioncharts enables you to add JavaScript charts in your Svelte application or project without any hassle.

Demo

- Github Repo: https://github.com/fusioncharts/svelte-fusioncharts
- Support: https://www.fusioncharts.com/contact-support
- FusionCharts
- Official Website: https://www.fusioncharts.com/
- Official NPM Package: https://www.npmjs.com/package/fusioncharts
- Issues: https://github.com/fusioncharts/svelte-fusioncharts/issues

---

Table of Contents

- Getting Started
- Requirements
- Installation
- Usage
- Working with chart API
- Working with events
- Quick Start
- Going Beyond Charts
- Usage and Integration of FusionTime
- For Contributors
- Licensing

Getting Started

$3

- Node.js, NPM/Yarn installed globally in your OS.
- FusionCharts and Svelte installed in your project, as detailed below:

$3

There are multiple ways to install svelte-fusioncharts component.

Install from NPM

``
npm install --save svelte-fusioncharts
`

See npm documentation to know more about npm usage.

$3

Import svelte-fusioncharts and FusionCharts in your app:

`

`

Note: This way of import will not work in IE11 and below.

Quick Start

Here is a basic sample that shows how to create a chart using svelte-fusioncharts:

`javascript



`

Render FusionMaps

To render a map, import the FusionMaps module along with the map definition.

`javascript



`

Working with Events

To attach event callbacks to a FusionCharts component, follow the sample below.

`javascript


{...chartConfigs}
on:dataplotClick={dataplotClickHandler}
on:renderComplete={renderCompleteHandler}
/>
`

Working with APIs

To call APIs we will need the chart object. To get the chart object for an SvelteFC component, bind a variable with the chart property of SvelteFC component.

`javascript


{
sliceDataPlot(1);
}}>
Slice out

{
sliceDataPlot(1, false);
}} >
Slice in

`

links to help you get started:

- Live samples with code
- Documentation
- Use Chart API events & methods in Svelte
- Chart gallery
- FusionCharts API

Usage and integration of FusionTime

From fusioncharts@3.13.3-sr.1, You can visualize timeseries data.

Learn more about FusionTime here.

$3

`javascript



`

Useful links for FusionTime

- How FusionTime works
- Create your first chart

Going Beyond Charts

- Explore 20+ pre-built business specific dashboards for different industries like energy and manufacturing to business functions like sales, marketing and operations here.
- See Data Stories built using FusionCharts’ interactive JavaScript visualizations and learn how to communicate real-world narratives through underlying data to tell compelling stories.

For Contributors

- Clone the repository and install dependencies

`
git clone https://github.com/fusioncharts/svelte-fusioncharts.git
cd svelte-fusioncharts
npm i
npm run dev
`

- Run npm run build` to create a production build.

Licensing

The FusionCharts Svelte component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FusionCharts library in your page separately, which has a separate license.