Create a Chart in Vue 3 Using FusionCharts

FusionCharts is a JavaScript charting library for creating interactive charts, gauges, maps, and dashboards. The vue-fusioncharts component provides Vue bindings that make it easier to add FusionCharts visualizations to Vue applications.

In this tutorial, you will create a Vue 3 application with Vite and render an interactive column chart using FusionCharts.

Prerequisites

Before you begin, make sure you have the following installed:

• A current Node.js version
• npm
• A code editor such as Visual Studio Code
• Basic knowledge of Vue components and JavaScript

You can check your installed Node.js and npm versions by running:

node --version
npm --versionCOPY

Create a Vue 3 Project with Vite

Vue recommends using its official create-vue scaffolding tool to create new Vue applications. The generated project uses Vite as its development and build tool.

Open a terminal and run:

npm create vue@latestCOPY

When prompted for a project name, enter:

fusioncharts-vue-demoCOPY

You can accept the default options for this tutorial. TypeScript, Vue Router, Pinia, testing tools, ESLint, and Prettier are optional and are not required for this example.

When prompted to skip the example code and start with a blank Vue project, select Yes. This creates a cleaner project structure for the chart example.

Move into the project directory:

cd fusioncharts-vue-demoCOPY

Install the project dependencies:

npm installCOPY

Start the Vite development server:

npm run devCOPY

Vite will display a local development URL, usually:

http://localhost:5173/COPY

npm install -g @vue/cliCOPY

Open the URL in your browser to view the Vue application.

For more details about creating a Vue application with Vite, refer to the official Vue 3 Quick Start Guide.

Install FusionCharts and the Vue Wrapper

Stop the development server if it is running, and install the fusioncharts and vue-fusioncharts packages:

npm install fusioncharts vue-fusionchartsCOPY

The packages serve different purposes:

• fusioncharts provides the charting library, chart types, themes, maps, and widgets.
• vue-fusioncharts provides the Vue component used to render FusionCharts in a Vue application.

Register FusionCharts in the Vue Application

Open src/main.js and replace its contents with the following code:

import { createApp } from 'vue';
import App from './App.vue';

import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

import './assets/main.css';

const app = createApp(App);

app.use(
  VueFusionCharts,
  FusionCharts,
  Charts,
  FusionTheme
);

app.mount('#app');COPY

This code performs the following steps:

1. Imports Vue’s createApp function.
2. Imports the root App component.
3. Imports the Vue FusionCharts wrapper.
4. Imports the FusionCharts core library.
5. Imports the standard FusionCharts chart module.
6. Imports the Fusion theme.
7. Registers the FusionCharts Vue component globally.
8. Mounts the Vue application to the page.

After global registration, you can use the <fusioncharts> component anywhere in the application.

Preparing the Chart Data

In this example, you will create a column chart showing monthly website traffic.

The chart will contain the following data:

A FusionCharts data source normally contains two main sections:

• chart: Defines chart captions, axes, number formatting, appearance, and other settings.
• data: Contains the labels and values displayed in the chart.

Create the Chart Component

Open src/App.vue and replace its contents with the following code:

<script setup>
const chartType = 'column2d';
const chartWidth = '100%';
const chartHeight = '420';
const dataFormat = 'json';

const dataSource = {
  chart: {
    caption: 'Monthly Website Traffic',
    subCaption: 'January to June 2026',
    xAxisName: 'Month',
    yAxisName: 'Website visits',
    numberSuffix: '',
    formatNumberScale: '0',
    showValues: '1',
    usePlotGradientColor: '0',
    showPlotBorder: '0',
    animation: '1',
    theme: 'fusion'
  },
  data: [
    {
      label: 'January',
      value: '42000'
    },
    {
      label: 'February',
      value: '48500'
    },
    {
      label: 'March',
      value: '53000'
    },
    {
      label: 'April',
      value: '61500'
    },
    {
      label: 'May',
      value: '68000'
    },
    {
      label: 'June',
      value: '76500'
    }
  ]
};
</script>

<template>
  <main class="chart-page">
    <section class="chart-container">
      <h1>Vue 3 FusionCharts Example</h1>

      <p>
        This column chart displays monthly website traffic for the first six
        months of 2026.
      </p>

      <fusioncharts
        :type="chartType"
        :width="chartWidth"
        :height="chartHeight"
        :data-format="dataFormat"
        :data-source="dataSource"
      />
    </section>
  </main>
</template>

<style scoped>
.chart-page {
  min-height: 100vh;
  padding: 40px 20px;
  background: #f5f7fa;
}

.chart-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
}

h1 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 2rem;
}

p {
  margin-bottom: 28px;
  color: #4b5563;
}
</style>COPY

This example uses Vue 3’s <script setup> syntax. Variables declared in the <script setup> block are automatically available in the component template.

Update the Global CSS

The default Vue starter styles may restrict the width of the application. Open src/assets/main.css and replace its contents with the following styles.

Note: If the src/assets/main.css file does not exist in your project, create it and add the following styles. Then import it in main.js if it’s not done (import './assets/main.css';).

* {
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-width: 320px;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}COPY

This ensures that the chart can use the available width of its container.

Run the Vue Application

Start the development server:

npm run devCOPY

Open the local URL displayed in the terminal, usually:

http://localhost:5173/COPY

You should now see an interactive column chart showing monthly website traffic.

How the FusionCharts Component Works

The chart is rendered through the <fusioncharts> Vue component:

<fusioncharts
  :type="chartType"
  :width="chartWidth"
  :height="chartHeight"
  :data-format="dataFormat"
  :data-source="dataSource"
/>COPY

The component receives the following properties:

type

Specifies the chart type to render.

const chartType = 'column2d';COPY

For a complete list of available chart types, see the FusionCharts Chart Gallery.

The required FusionCharts modules must be registered before their corresponding chart types can be used.

width

Controls the chart width.

const chartWidth = '100%';COPY

Using 100% makes the chart adapt to the width of its parent container.

height

Controls the chart height.

const chartHeight = '420';COPY

data-format

Defines the format of the chart data.

const dataFormat = 'json';COPY

This example uses JSON data.

data-source

Provides the chart configuration and data:

const dataSource = {
  chart: {
    caption: 'Monthly Website Traffic',
    theme: 'fusion'
  },
  data: [
    {
      label: 'January',
      value: '42000'
    }
  ]
};COPY

Because dataSource is bound with Vue’s: syntax, updates to reactive chart data can also update the rendered chart.

Project Structure

After completing the tutorial, the relevant project files should look like this:

fusioncharts-vue-demo/
├── src/
│   ├── assets/
│   │   └── main.css
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
└── vite.config.jsCOPY

Build the Application for Production

To create a production build, run:

npm run buildCOPY

Vite will generate the optimized application files in the dist directory.

You can preview the production build locally by running:

npm run previewCOPY

Troubleshooting

The fusioncharts component cannot be resolved

An error similar to the following means the Vue FusionCharts plugin has not been registered correctly:

Failed to resolve component: fusionchartsCOPY

Check that src/main.js contains:

app.use(
  VueFusionCharts,
  FusionCharts,
  Charts,
  FusionTheme
);COPY

Also confirm that the application is mounted after plugin registration:

app.mount('#app');COPY

The chart container is blank

Check the following:

• fusioncharts and vue-fusioncharts are installed.
• The chart module has been imported.
• The chart type is valid.
• The data source contains a chart object and a data array.
• Each data item contains valid label and value properties.
• The chart has a valid height.

You can confirm that the packages are installed by running:

npm list fusioncharts vue-fusionchartsCOPY

The Fusion theme is not applied

Make sure the Fusion theme is imported:

import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';COPY

It must also be passed when registering the plugin:

app.use(
  VueFusionCharts,
  FusionCharts,
  Charts,
  FusionTheme
);COPY

Finally, include the theme in the chart configuration:

chart: {
  theme: 'fusion'
};COPY

The chart does not use the full page width

Set the chart width to 100%:

const chartWidth = '100%';COPY

Also check that the chart’s parent container does not have an overly restrictive fixed width.

Next Steps

You have now created an interactive FusionCharts chart in a Vue 3 application powered by Vite.

You can continue by learning how to:

• Render different chart types
• Update chart data dynamically
• Handle FusionCharts events in Vue
• Add drill-down behavior
• Export charts as images or PDFs
• Create maps, gauges, and dashboards
• Visualize time-series data with FusionTime