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
- Quick Start
- Going Beyond Charts
- Usage and Integration of FusionTime
- For Contributors
- Licensing
Getting Started
Requirements
- Node.js, NPM/Yarn installed globally in your OS.
- FusionCharts and Svelte installed in your project, as detailed below:
Installation
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.
Usage
Import svelte-fusioncharts
and FusionCharts in your app:
<script>
import FusionCharts from 'fusioncharts/core';
import Column2d from 'fusioncharts/viz/column2d';
import SvelteFC, { fcRoot } from 'svelte-fusioncharts';
fcRoot(FusionCharts, Column2d);
</script>
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
:
<script> ; ; ; ; // Always set FusionCharts as the first parameter ; const dataSource = chart: caption: 'Countries With Most Oil Reserves [2017-18]' subCaption: 'In MMbbl = One Million barrels' xAxisName: 'Country' yAxisName: 'Reserves (MMbbl)' numberSuffix: 'K' theme: 'fusion' data: label: 'Venezuela' value: '290' label: 'Saudi' value: '260' label: 'Canada' value: '180' label: 'Iran' value: '140' label: 'Russia' value: '115' label: 'UAE' value: '100' label: 'US' value: '30' label: 'China' value: '30' ; const chartConfigs = type: 'column2d' width: 600 height: 400 dataFormat: 'json' dataSource: dataSource ;</script> <SvelteFC ...chartConfigs />
Render FusionMaps
To render a map, import the FusionMaps module along with the map definition.
<script> ; ; ; ; ; // Always set FusionCharts as the first parameter ; const dataSource = chart: caption: 'Average Annual Population Growth' subcaption: ' 1955-2015' numbersuffix: '%' includevalueinlabels: '1' labelsepchar: ': ' entityFillHoverColor: '#FFF9C4' theme: 'fusion' colorrange: minvalue: '0' code: '#FFE0B2' gradient: '1' color: minvalue: '0.5' maxvalue: '1.0' color: '#FFD74D' minvalue: '1.0' maxvalue: '2.0' color: '#FB8C00' minvalue: '2.0' maxvalue: '3.0' color: '#E65100' data: id: 'NA' value: '.82' showLabel: '1' id: 'SA' value: '2.04' showLabel: '1' id: 'AS' value: '1.78' showLabel: '1' id: 'EU' value: '.40' showLabel: '1' id: 'AF' value: '2.58' showLabel: '1' id: 'AU' value: '1.30' showLabel: '1' ; const chartConfigs = type: 'world' width: 600 height: 400 dataFormat: 'json' dataSource: dataSource ;</script> <SvelteFC ...chartConfigs />
Working with Events
To attach event callbacks to a FusionCharts component, follow the sample below.
<script> ; ; ; ; // Always set FusionCharts as the first parameter ; const dataSource = chart: caption: 'Countries With Most Oil Reserves [2017-18]' subCaption: 'In MMbbl = One Million barrels' xAxisName: 'Country' yAxisName: 'Reserves (MMbbl)' numberSuffix: 'K' theme: 'fusion' data: label: 'Venezuela' value: '290' label: 'Saudi' value: '260' label: 'Canada' value: '180' label: 'Iran' value: '140' label: 'Russia' value: '115' label: 'UAE' value: '100' label: 'US' value: '30' label: 'China' value: '30' { // code for dataplotClick event handler } { // code for renderComplete event handler }; const chartConfigs = type: 'column2d' width: 600 height: 400 dataFormat: 'json' dataSource: dataSource ;</script> <SvelteFC ...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.
<script> ; ; ; ; ; let chartObj dataSource = "chart": "caption": "Market Share of Web Servers" "plottooltext": "<b>$percentValue</b> of web servers run on $label servers" "showLegend": "1" "showPercentValues": "1" "legendPosition": "bottom" "useDataPlotColorForLabels": "1" "enablemultislicing": "0" "showlegend": "0" "theme": "fusion" "data": "label": "Apache" "value": "32647479" "label": "Microsoft" "value": "22100932" "label": "Zeus" "value": "14376" "label": "Other" "value": "18674221" chartConfig = type: 'pie2d' width: '600' height: '400' renderAt: 'chart-container' dataSource ; const sliceDataPlot = { chartObj };</script> <div id="chart-container" > <SvelteFC ...chartConfig bind:chart=chartObj /></div> <button on:click= { ;}> Slice out</button><button on:click= { ;} > Slice in</button>
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.
Consider the example below for integration of FusionTime
<script> ; ; ; ; let promise res dataFetch = schemaFetch = ; promise = PromisealldataFetch schemaFetch; const getChartConfig = { const fusionDataStore = fusionTable = fusionDataStore; return type: 'timeseries' width: '100%' height: 450 renderAt: 'chart-container' dataSource: data: fusionTable caption: text: 'Sales Analysis' subcaption: text: 'Grocery' yAxis: plot: value: 'Grocery Sales Value' type: 'line' format: prefix: '$' title: 'Sale Value' ; };</script> <div id="chart-container" > #await promise <p>Fetching data and schema...</p> :then value <SvelteFC ... /> :catch error <p>Something went wrong: errormessage</p> /await</div>
Useful links for FusionTime
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.