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.
- 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
- Getting Started
- Quick Start
- Going Beyond Charts
- Usage and Integration of FusionTime
- For Contributors
- Licensing
- Node.js, NPM/Yarn installed globally in your OS.
- FusionCharts and Svelte installed in your project, as detailed below:
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.
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.
Here is a basic sample that shows how to create a chart using svelte-fusioncharts:
<script>
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import SvelteFC, { fcRoot } from 'svelte-fusioncharts';
// Always set FusionCharts as the first parameter
fcRoot(FusionCharts, Charts, FusionTheme);
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} />To render a map, import the FusionMaps module along with the map definition.
<script>
import FusionCharts from 'fusioncharts';
import Maps from 'fusioncharts/fusioncharts.maps';
import World from 'fusioncharts/maps/fusioncharts.world';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import SvelteFC, { fcRoot } from 'svelte-fusioncharts';
// Always set FusionCharts as the first parameter
fcRoot(FusionCharts, Maps, World, FusionTheme);
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} />To attach event callbacks to a FusionCharts component, follow the sample below.
<script>
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import SvelteFC, { fcRoot } from 'svelte-fusioncharts';
// Always set FusionCharts as the first parameter
fcRoot(FusionCharts, Charts, FusionTheme);
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' }
]
},
dataplotClickHandler = event => {
// code for dataplotClick event handler
},
renderCompleteHandler = event => {
// 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}
/>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>
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import SvelteFC, { fcRoot } from 'svelte-fusioncharts';
fcRoot(FusionCharts, Charts, FusionTheme);
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 = (index, sliceOut = true) => {
chartObj.slicePlotItem(index, sliceOut)
};
</script>
<div id="chart-container" >
<SvelteFC {...chartConfig} bind:chart={chartObj} />
</div>
<button on:click={() => {
sliceDataPlot(1);
}}>
Slice out
</button>
<button on:click={() => {
sliceDataPlot(1, false);
}} >
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
From fusioncharts@3.13.3-sr.1, You can visualize timeseries data.
Learn more about FusionTime here.
<script>
import FusionCharts from 'fusioncharts';
import Timeseries from 'fusioncharts/fusioncharts.timeseries';
import SvelteFC, { fcRoot } from 'svelte-fusioncharts';
fcRoot(FusionCharts, Timeseries);
let promise,
jsonify = res => res.json(),
dataFetch = fetch(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json'
).then(jsonify),
schemaFetch = fetch(
'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json'
).then(jsonify);
promise = Promise.all([dataFetch, schemaFetch]);
const getChartConfig = ([data, schema]) => {
const fusionDataStore = new FusionCharts.DataStore(),
fusionTable = fusionDataStore.createDataTable(data, schema);
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
{...getChartConfig(value)}
/>
{:catch error}
<p>Something went wrong: {error.message}</p>
{/await}
</div>Useful links for FusionTime
- 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.
- 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 buildto create a production build.
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.
