Create a Chart in SvelteJS Using FusionCharts

FusionCharts is a JavaScript charting library that lets you create interactive charts, gauges, maps, and dashboards for web applications.

The svelte-fusioncharts component provides bindings for FusionCharts, allowing you to integrate FusionCharts visualizations into Svelte applications.

In this tutorial, you will learn how to create a Svelte 4 application, install FusionCharts and the Svelte FusionCharts component, prepare chart data, configure a chart, and render your first interactive chart.

Prerequisite

Before you begin, ensure the following is installed:

• Node.js
• npm

You can check the installed version by running the following command:

node -v
npm -vCOPY

This tutorial uses the following versions:

Svelte: 4.0.0
FusionCharts: 4.2.2 
svelte-fusioncharts: 1.1.0
Vite: 4.5.14
@sveltejs/vite-plugin-svelte: 2.4.6COPY

Note: Svelte 4.0.0 is the latest version of Svelte currently supported by FusionCharts.

Create a Svelte Project

Create a Svelte application using Vite, see the command below as an example:

npm create vite@4 my-first-svelte-project -- --template svelteCOPY

Navigate to the project directory using the following command:

cd my-first-svelte-projectCOPY

The latest Svelte project templates may use dependencies or application code designed for newer versions of Svelte. Since this tutorial uses Svelte 4.0.0, update the project dependencies to versions compatible with it.

Open package.json and update the devDependencies section as follows:

"devDependencies": {
  "@sveltejs/vite-plugin-svelte": "2.4.6",
  "svelte": "4.0.0",
  "vite": "4.5.14"
}COPY

The complete package.json should look as follows:

{
  "name": "my-first-svelte-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "2.4.6",
    "svelte": "4.0.0",
    "vite": "4.5.14"
  }
}COPY

Remove the existing dependencies and lock file:

rm -rf node_modules package-lock.jsonCOPY

Then install the dependencies as follows:

npm installCOPY

Configure the Svelte 4 Entry Point

Newer Svelte templates may use the Svelte 5 mount() API. Svelte 4 uses the component constructor instead.

Open the file:

src/main.jsCOPY

and replace its content with the one below:

import './app.css'
import App from './App.svelte'

const target = document.getElementById('app')

if (!target) {
  throw new Error('App target element not found')
}

const app = new App({
  target,
})

export default appCOPY

This mounts the Svelte application to the element with the app ID in index.html.

Remove the Default Svelte 5 Example Component

Some Vite Svelte templates may include example components that use Svelte 5 syntax. It is necessary to remove them.

Open:

src/App.svelteCOPY

and remove any default imports or components such as:

import Counter from './lib/Counter.svelte'COPY

You may also remove the default Counter.svelte file if it exists.

Before continuing, verify that Svelte 4 is working by temporarily using:

<script>
  let message = 'Svelte 4 is working'
</script>

<main>
  <h1>{message}</h1>
</main>COPY

Start the development server:

npm run devCOPY

Open the local URL displayed in your terminal, most likely:

http://localhost:5173COPY

And you should see the following message:

Svelte 4 is workingCOPY

Install FusionCharts

After confirming that the Svelte 4 application works, install FusionCharts and the Svelte FusionCharts component:

npm install fusioncharts svelte-fusionchartsCOPY

You can verify the installed versions using the following command:

npm list svelte fusioncharts svelte-fusionchartsCOPY

The tested configuration should show the following:

svelte@4.0.0
fusioncharts@4.2.2
svelte-fusioncharts@1.1.0COPY

Import FusionCharts

To import FusionCharts, first open:

src/App.svelteCOPY

Using the following command import FusionCharts, the charts module, the Fusion theme, and the Svelte FusionCharts 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)
</script>COPY

The fcRoot() function registers FusionCharts, the chart module, and the Fusion theme with the Svelte component.

Preparing the Data

In this example, you will create a Column 2D chart showing revenue by product category. The data used in the chart is shown below:

FusionCharts accepts chart data in JSON format.

Next, add the following data inside the <script> block:

// Preparing the chart data
const chartData = [
  { label: 'Electronics', value: '85' },
  { label: 'Apparel', value: '72' },
  { label: 'Home Appliances', value: '64' },
  { label: 'Books', value: '48' },
  { label: 'Sports', value: '55' },
  { label: 'Beauty', value: '42' }
];COPY

Each data object contains:

• label: The category displayed on the X-axis.
• value: The corresponding value displayed on the Y-axis.

Configure the Chart

Next, create the chart configuration object as follows:

//Create your configuration object
const chartConfigs = {
  type: 'column2d',
  width: '100%',
  height: '400',
  dataFormat: 'json',
  dataSource: {
    chart: {
      caption: 'Revenue by Product Category',
      subCaption: 'Current Sales Performance',
      xAxisName: 'Product Category',
      yAxisName: 'Revenue (USD)',
      numberPrefix: '$',
      numberSuffix: 'K',
      theme: 'fusion'
    },
    data: chartData
  }
};COPY

The configuration contains the following properties:

• type: Specifies the chart type. This example uses column2d.
• width: Sets the chart width to 100% of its container.
• height: Sets the chart height.
• dataFormat: Defines the data format as JSON.
• dataSource: Contains the chart configuration and chart data.
• caption: Defines the chart title.
• subCaption: Defines the chart subtitle.
• xAxisName: Defines the X-axis title.
• yAxisName: Defines the Y-axis title.
• theme: Applies the Fusion theme.

Render the Chart

Finally, the complete src/App.svelte file should look as follows:

<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)

  const chartData = [
    { label: 'Electronics', value: '85' },
    { label: 'Apparel', value: '72' },
    { label: 'Home Appliances', value: '64' },
    { label: 'Books', value: '48' },
    { label: 'Sports', value: '55' },
    { label: 'Beauty', value: '42' }
  ]

  const chartConfigs = {
    type: 'column2d',
    width: '100%',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      chart: {
        caption: 'Revenue by Product Category',
        subCaption: 'Current Sales Performance',
        xAxisName: 'Product Category',
        yAxisName: 'Revenue (USD)',
        numberPrefix: '$',
        numberSuffix: 'K',
        theme: 'fusion'
      },
      data: chartData
    }
  }
</script>

<main>
  <div class="chart-container">
    <SvelteFC {...chartConfigs} />
  </div>
</main>

<style>
  main {
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
  }

  .chart-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
  }
</style>COPY

The SvelteFCcomponent receives the chart properties using the following command:

<SvelteFC {...chartConfigs} />COPY

and renders the FusionCharts visualization.

Run the Application

Start the development server, as follows:

npm run devCOPY

Open the local URL shown in the terminal, most likely:

http://localhost:5173COPY

An interactive Column 2D chart should be visible and display the revenue by product category.

See Your Chart

Your Svelte application is now successfully rendering a FusionCharts visualization.

The chart displays revenue for six product categories using a responsive Column 2D chart.

Customize the chart by changing any of the following:

• Chart type
• Chart dimensions
• Data
• Captions
• Axis titles
• Theme
• Styling
• Events and interactions

Troubleshooting

This section mentions several common issues and how to troubleshoot them.

Unrecognized Option hmr

It is possible to encounter an error such as:

[plugin:vite-plugin-svelte] Unrecognized option 'hmr'COPY

This usually occurs when Svelte 4.0.0 is used with a newer incompatible version of @sveltejs/vite-plugin-svelte.

Ensure that your project uses the following:

@sveltejs/vite-plugin-svelte@2.4.6
vite@4.5.14
svelte@4.0.0COPY

You can verify the versions with the following command:

npm list svelte vite @sveltejs/vite-plugin-svelteCOPY

svelte Does Not Provide an Export Named mount

It is possible to encounter an error such as:

The requested module 'svelte' does not provide an export named 'mount'COPY

This occurs when the project uses Svelte 5 mounting syntax with Svelte 4.

To solve this, replace:

import { mount } from 'svelte'COPY

with the Svelte 4 component constructor approach:

const app = new App({
  target,
})COPY

Undefined state

If the browser console shows the following message:

ReferenceError: state is not definedCOPY

The project may still contain example components generated for a newer version of Svelte.

Remove the default Counter.svelte component and any related imports from App.svelte.

Failed to Resolve Counter.svelte

If your screen displays the following message:

Failed to resolve import "./lib/Counter.svelte"COPY

Then, remove the following import from App.svelte:

import Counter from './lib/Counter.svelte'COPY

Finally, ensure to remove any <Counter /> component references.

Verify the Install Versions

To verify the installed versions, run:

npm list svelte fusioncharts svelte-fusionchartsCOPY

The tested setup uses:

svelte@4.0.0
fusioncharts@4.2.2
svelte-fusioncharts@1.1.0COPY

Restart the Development Server

After changing dependencies or source files, stop the current development server and restart it with the following command:

npm run devCOPY

What's Next?

Now that you have successfully integrated FusionCharts with Svelte, you can explore additional FusionCharts capabilities. You can:

• Try different chart types.
• Customize chart appearance.
• Add chart events and interactions.
• Load dynamic data.
• Create dashboards with multiple charts.
• Explore gauges and maps.
• Configure advanced chart properties.

Enhance your Svelte Applications with FusionCharts

FusionCharts provides a wide range of interactive charts, maps, gauges, and visualization components for creating data-driven Svelte applications.

Whether you are building a simple visualization or an enterprise dashboard, FusionCharts offers configurable options to meet diverse application requirements.

Get Started with FusionCharts

Explore the FusionCharts documentation to learn more about available chart types, configuration options, methods, events, themes, and advanced data visualization features.

You can also download FusionCharts and start a free trial to explore its complete range of capabilities.

Frequently Asked Questions

Can I use FusionCharts with Svelte?

Yes. FusionCharts can be integrated with Svelte applications using the svelte-fusioncharts component.

Which Svelte version does FusionCharts support?

FusionCharts currently supports Svelte 4.0.0 as the latest supported Svelte version

Which versions were tested for this tutorial?

This tutorial was tested using:

Svelte 4.0.0
FusionCharts 4.2.2
svelte-fusioncharts 1.1.0
Vite 4.5.14
@sveltejs/vite-plugin-svelte 2.4.6COPY

How do I install FusionCharts in a Svelte application?

Install FusionCharts and the Svelte FusionCharts component using the following command:

npm install fusioncharts svelte-fusionchartsCOPY

Can I create responsive FusionCharts visualizations in Svelte?

Yes. You can set the chart width as follows:

width: '100%'COPY

and place the chart inside a responsive container.

Can I use other FusionCharts chart types with Svelte?

Yes. Change the type property in the chart configuration to another supported FusionCharts chart type

Share with Your Colleagues

Share this tutorial with your colleagues and help them get started with interactive data visualizations using FusionCharts and Svelte.