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

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:

1<script>
2  import FusionCharts from 'fusioncharts';
3  import Charts from 'fusioncharts/fusioncharts.charts';
4  import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
5  import SvelteFC, { fcRoot } from 'svelte-fusioncharts';
6
7  // Always set FusionCharts as the first parameter
8  fcRoot(FusionCharts, Charts, FusionTheme);
9
10  const dataSource = {
11    chart: {
12      caption: 'Countries With Most Oil Reserves [2017-18]',
13      subCaption: 'In MMbbl = One Million barrels',
14      xAxisName: 'Country',
15      yAxisName: 'Reserves (MMbbl)',
16      numberSuffix: 'K',
17      theme: 'fusion'
18    },
19    data: [
20      { label: 'Venezuela', value: '290' },
21      { label: 'Saudi', value: '260' },
22      { label: 'Canada', value: '180' },
23      { label: 'Iran', value: '140' },
24      { label: 'Russia', value: '115' },
25      { label: 'UAE', value: '100' },
26      { label: 'US', value: '30' },
27      { label: 'China', value: '30' }
28    ]
29  };
30
31  const chartConfigs = {
32    type: 'column2d',
33    width: 600,
34    height: 400,
35    dataFormat: 'json',
36    dataSource: dataSource
37  };
38</script>
39
40<SvelteFC {...chartConfigs} />

Render FusionMaps

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

1<script>
2  import FusionCharts from 'fusioncharts';
3  import Maps from 'fusioncharts/fusioncharts.maps';
4  import World from 'fusioncharts/maps/fusioncharts.world';
5  import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
6  import SvelteFC, { fcRoot } from 'svelte-fusioncharts';
7
8  // Always set FusionCharts as the first parameter
9  fcRoot(FusionCharts, Maps, World, FusionTheme);
10
11  const dataSource = {
12    chart: {
13      caption: 'Average Annual Population Growth',
14      subcaption: ' 1955-2015',
15      numbersuffix: '%',
16      includevalueinlabels: '1',
17      labelsepchar: ': ',
18      entityFillHoverColor: '#FFF9C4',
19      theme: 'fusion'
20    },
21    colorrange: {
22      minvalue: '0',
23      code: '#FFE0B2',
24      gradient: '1',
25      color: [
26        { minvalue: '0.5', maxvalue: '1.0', color: '#FFD74D' },
27        { minvalue: '1.0', maxvalue: '2.0', color: '#FB8C00' },
28        { minvalue: '2.0', maxvalue: '3.0', color: '#E65100' }
29      ]
30    },
31    data: [
32      { id: 'NA', value: '.82', showLabel: '1' },
33      { id: 'SA', value: '2.04', showLabel: '1' },
34      { id: 'AS', value: '1.78', showLabel: '1' },
35      { id: 'EU', value: '.40', showLabel: '1' },
36      { id: 'AF', value: '2.58', showLabel: '1' },
37      { id: 'AU', value: '1.30', showLabel: '1' }
38    ]
39  };
40
41  const chartConfigs = {
42    type: 'world',
43    width: 600,
44    height: 400,
45    dataFormat: 'json',
46    dataSource: dataSource
47  };
48</script>
49
50<SvelteFC {...chartConfigs} />

Working with Events

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

1<script>
2  import FusionCharts from 'fusioncharts';
3  import Charts from 'fusioncharts/fusioncharts.charts';
4  import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
5  import SvelteFC, { fcRoot } from 'svelte-fusioncharts';
6
7  // Always set FusionCharts as the first parameter
8  fcRoot(FusionCharts, Charts, FusionTheme);
9
10  const dataSource = {
11      chart: {
12        caption: 'Countries With Most Oil Reserves [2017-18]',
13        subCaption: 'In MMbbl = One Million barrels',
14        xAxisName: 'Country',
15        yAxisName: 'Reserves (MMbbl)',
16        numberSuffix: 'K',
17        theme: 'fusion'
18      },
19      data: [
20        { label: 'Venezuela', value: '290' },
21        { label: 'Saudi', value: '260' },
22        { label: 'Canada', value: '180' },
23        { label: 'Iran', value: '140' },
24        { label: 'Russia', value: '115' },
25        { label: 'UAE', value: '100' },
26        { label: 'US', value: '30' },
27        { label: 'China', value: '30' }
28      ]
29    },
30    dataplotClickHandler = event => {
31      // code for dataplotClick event handler
32    },
33    renderCompleteHandler = event => {
34      // code for renderComplete event handler
35    };
36
37  const chartConfigs = {
38    type: 'column2d',
39    width: 600,
40    height: 400,
41    dataFormat: 'json',
42    dataSource: dataSource
43  };
44</script>
45
46<SvelteFC
47  {...chartConfigs}
48  on:dataplotClick={dataplotClickHandler}
49  on:renderComplete={renderCompleteHandler}
50/>

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.

1<script>
2  import FusionCharts from 'fusioncharts';
3  import Charts from 'fusioncharts/fusioncharts.charts';
4
5  import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
6  import SvelteFC, { fcRoot } from 'svelte-fusioncharts';
7
8  fcRoot(FusionCharts, Charts, FusionTheme);
9
10  let chartObj,
11    dataSource = {
12      "chart": {
13        "caption": "Market Share of Web Servers",
14        "plottooltext": "<b>$percentValue</b> of web servers run on $label servers",
15        "showLegend": "1",
16        "showPercentValues": "1",
17        "legendPosition": "bottom",
18        "useDataPlotColorForLabels": "1",
19        "enablemultislicing": "0",
20        "showlegend": "0",
21        "theme": "fusion",
22      },
23      "data": [{
24        "label": "Apache",
25        "value": "32647479"
26      }, {
27        "label": "Microsoft",
28        "value": "22100932"
29      }, {
30        "label": "Zeus",
31        "value": "14376"
32      }, {
33        "label": "Other",
34        "value": "18674221"
35      }]
36    },
37    chartConfig = {
38      type: 'pie2d',
39      width: '600',
40      height: '400',
41      renderAt: 'chart-container',
42      dataSource
43    };
44
45  const sliceDataPlot = (index, sliceOut = true) => {
46    chartObj.slicePlotItem(index, sliceOut)
47  };
48</script>
49
50<div id="chart-container" >
51  <SvelteFC {...chartConfig} bind:chart={chartObj} />
52</div>
53
54<button on:click={() => {
55  sliceDataPlot(1);
56}}>
57  Slice out
58</button>
59<button on:click={() => {
60  sliceDataPlot(1, false);
61}} >
62  Slice in
63</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

1<script>
2  import FusionCharts from 'fusioncharts';
3  import Timeseries from 'fusioncharts/fusioncharts.timeseries';
4  import SvelteFC, { fcRoot } from 'svelte-fusioncharts';
5
6  fcRoot(FusionCharts, Timeseries);
7
8  let promise,
9    jsonify = res => res.json(),
10    dataFetch = fetch(
11      'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json'
12    ).then(jsonify),
13    schemaFetch = fetch(
14      'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json'
15    ).then(jsonify);
16
17  promise = Promise.all([dataFetch, schemaFetch]);
18
19  const getChartConfig = ([data, schema]) => {
20    const fusionDataStore = new FusionCharts.DataStore(),
21      fusionTable = fusionDataStore.createDataTable(data, schema);
22
23    return {
24      type: 'timeseries',
25      width: '100%',
26      height: 450,
27      renderAt: 'chart-container',
28      dataSource: {
29        data: fusionTable,
30        caption: {
31          text: 'Sales Analysis'
32        },
33        subcaption: {
34          text: 'Grocery'
35        },
36        yAxis: [
37          {
38            plot: {
39              value: 'Grocery Sales Value',
40              type: 'line'
41            },
42            format: {
43              prefix: '$'
44            },
45            title: 'Sale Value'
46          }
47        ]
48      }
49    };
50  };
51</script>
52
53<div id="chart-container" >
54  {#await promise}
55    <p>Fetching data and schema...</p>
56  {:then value}
57    <SvelteFC
58      {...getChartConfig(value)}
59    />
60  {:catch error}
61    <p>Something went wrong: {error.message}</p>
62  {/await}
63</div>

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.