Create a Chart in SvelteJS Using FusionCharts

FusionCharts is a JavaScript charting library that lets you create interactive charts, gauges, maps, and dashboards using JavaScript. We have built a simple and lightweight SvelteJS directive, which provides bindings for svelte-fusioncharts and lets you add JavaScript charts in your Svelte application or project without any hassle.

In this page, you will see how to install FusionCharts and render a chart using the svelte-fusioncharts directive.

Prerequisite

Before you begin, make sure your development environment includes Node.js and an npm package manager. SvelteJS requires Node.js version 10.9.0 or later. To download and install Node.js, please visit nodejs.org.

You need to have a Svelte project set up before proceeding any further. If not, you can follow the steps mentioned below, to initiate the project.

Open a new terminal and execute the following command:

npx degit sveltejs/template my-first-svelte-project

The above command creates a new project folder named my-first-svelte-project, and downloads the svelte default project template into that folder. Before running the project, we need to make sure that all needed development dependencies are being installed.

cd my-first-svelte-project
npm install

Open the terminal and enter npm run dev to serve your app on localhost:5000.

Installing and Including Dependencies

To install fusioncharts and the svelte-fusioncharts directive via npm follow the steps below:

Install svelte-fusioncharts and fusioncharts libraries with the following command:

npm install svelte-fusioncharts fusioncharts --save

After installing the FusionCharts components, you can replace the code in App.svelte file with the code shown in the steps below to create your first chart. Import all the required dependencies in the <script> tag to get started.

<script>
  //Import the Fusioncharts library
  import FusionCharts from "fusioncharts";

  //Import the chart modules
  import Charts from "fusioncharts/fusioncharts.charts";

  //Import the theme as fusion
  import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

  //Import the Svelte component
  import SvelteFC, { fcRoot } from "svelte-fusioncharts";

  // Always set FusionCharts as the first parameter
  fcRoot(FusionCharts, Charts, FusionTheme);
</script>

That completes the installation of FusionCharts and the svelte-fusioncharts directive.

Preparing the Data

Let's create a chart showing the "Countries with Most Oil Reserves". The data of the oil reserves present in various countries is shown in tabular form below.

Country	No. of Oil Reserves
Venezuela	290K
Saudi	260K
Canada	180K
Iran	140K
Russia	115K
UAE	100K
US	30K
China	30K

Since we are plotting a single dataset, let us create a column 2D chart with 'Countries' as data labels along X-axis and 'No. of Oil Reserves' as data values along Y-axis. Let us prepare the data for a single-series chart.

FusionCharts accepts the data in JSON format. Include the data object in the <script> tag of App.svelte file. So the above data in the tabular form will look as follows:

// Preparing the chart data
const chartData = [
  { 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" }
];

Configure Your Chart

Now that the data is ready, let's work on the styling, positioning and giving your chart a context.

Store the chart configurations in a JSON object. In this JSON object:

//Create your configuration object
const chartConfigs = {
  type: "column2d", //Select the chart type
  width: 600, //Set the width of the chart
  height: 400, //Set the height of the chart
  dataFormat: "json", //Set the input dataFormat to json
  dataSource: {
    chart: {
      caption: "Countries With Most Oil Reserves [2017-18]", //Set the caption to your chart
      subCaption: "In MMbbl = One Million Barrels", //Set a sub-caption to your chart
      xAxisName: "Country", //Assign a relevant name to your x-axis
      yAxisName: "Reserves (MMbbl)", //Assign a relevant name to your y-axis
      numberSuffix: "K",
      theme: "fusion" //Apply a theme to your chart
    },
    //Include chartData from STEP 2
    data: chartData
  }
};

Render the Chart

Finally, get ready to render your first chart. Follow the steps mentioned below:

Step 1: In App.svelte include the necessary files and import the fusioncharts dependency.

Store the chart configurations in a JSON object.

The consolidated code is shown 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);
  //STEP 2 : preparing the chart Data
  const chartData = [
    { 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" }
  ];

  //STEP 3: Create your configuration object
  const chartConfigs = {
    type: "column2d", //Select the chart type
    width: 600, //Set the width of the chart
    height: 400, //Set the height of the chart
    dataFormat: "json", //Set the input dataFormat to json
    dataSource: {
      chart: {
        caption: "Countries With Most Oil Reserves [2017-18]",
        subCaption: "In MMbbl = One Million barrels",
        xAxisName: "Country", //Assign a relevant name to your x-axis
        yAxisName: "Reserves (MMbbl)", //Assign a relevant name to your y-axis
        numberSuffix: "K",
        theme: "fusion" //Apply a theme to your chart
      },
      //Include chartData from STEP 2
      data: chartData
    }
  };
</script>

<SvelteFC {...chartConfigs} />

Step 2: Export the app from main.js.

import App from "./App.svelte";
var app = new App({
  target: document.body
});

export default app;

Step 3: Run npm run dev command in the terminal. Once the build is successful, open the localhost file to see your chart.

See Your Chart

You should be able to see the chart as shown below.

FusionCharts will load here..

If you are getting a JavaScript error on your page, check your browser console for the exact error and fix accordingly. If you're unable to solve it, click here to get in touch with our support team.

That's it! Your first chart using svelte-fusioncharts is ready.

Products

Developer

Important Links