FusionCharts JavaScript Charting Library

4.2.2 · active · verified Sun Apr 19

FusionCharts is a comprehensive JavaScript charting library that provides over 100 chart types and 2,000+ geographical maps for web and mobile applications. It includes specialized modules like FusionTime for time-series charts, FusionWidgets for gauges and real-time visualizations, PowerCharts for advanced statistical charts, and FusionMaps for choropleth geo maps. All visualizations are interactive and animated, rendering primarily in SVG, with VML support for older Internet Explorer versions. The current stable version is 4.2.2, released in April 2026, indicating an active development and release cadence with regular improvements and fixes. Key differentiators include its extensive chart and map catalog, its support for legacy browser environments, and its modular architecture allowing selective loading of chart types and themes.

Common errors

```
FusionCharts is not defined or require is not defined
```
cause Attempting to use FusionCharts with CommonJS `require()` syntax in an ES Module environment or without a proper module bundler configured for CJS, or vice-versa.

fix Ensure you are using the correct module syntax for your environment. For ES Modules, use `import FusionCharts from 'fusioncharts/core';`. If using CommonJS, confirm your bundler supports it or use the CDN script tag approach.
```
Chart not rendered: No div element with ID 'chart-container' found.
```
cause The target DOM element specified in the `renderAt` property of the chart configuration does not exist in the HTML, or it is not available in the DOM when the chart attempts to render.

fix Verify that the DOM element with the specified ID (e.g., 'chart-container') exists in your HTML structure and that your JavaScript code executes after the DOM has been fully loaded (e.g., inside a `DOMContentLoaded` listener or at the end of the `<body>`).
```
Error: No chart module found for type 'column2d'.
```
cause The specific chart type module required (e.g., `Column2D` for 'column2d' chart type) has not been imported and registered as a dependency to the main `FusionCharts` instance using `FusionCharts.addDep()`.

fix Ensure you import the necessary chart module (e.g., `import Column2D from 'fusioncharts/charts/fusioncharts.charts';`) and then register it: `FusionCharts.addDep(Column2D);` before creating the chart instance.

Warnings

breaking Major version 4.x likely introduced breaking API changes from 3.x, especially around modularization and dependency management. While specific changes aren't detailed in the provided release notes, users upgrading from 3.x should consult the full migration guide.
Fix: Refer to the official FusionCharts documentation for the 3.x to 4.x migration guide on the FusionCharts developer website to understand necessary API adjustments and import changes.
gotcha FusionCharts is a commercial product. While there might be free trial or developer editions, commercial use typically requires purchasing a license. Refer to the licensing terms for details, as improper licensing can lead to legal issues or watermarks on charts.
Fix: Review the 'Legal Terms & Customer Agreements' link on the official FusionCharts website to understand licensing requirements for your specific use case and ensure compliance.
gotcha Using FusionCharts in older Internet Explorer versions (IE 6-8) relies on VML rendering, a legacy technology. This might have compatibility quirks and could require specific configurations or polyfills not typically needed for modern SVG-based rendering in contemporary browsers.
Fix: Consult the FusionCharts documentation on browser compatibility and VML rendering for optimal setup and to address any rendering issues in legacy IE environments.
gotcha The jQuery plugin's delivery method improved in v4.2.2, with official CDN hosting for versioned and latest paths. If you were previously self-hosting or using a different CDN path for the jQuery plugin, your existing links might break or require updates.
Fix: Update your jQuery plugin script tags to use the new official CDN paths (e.g., 'https://cdn.fusioncharts.com/jquery-fusioncharts/latest/jquery.fusioncharts.min.js') as described in the v4.2.2 release notes.

Install

npm install fusioncharts npm
yarn add fusioncharts yarn
pnpm add fusioncharts pnpm

Imports

FusionCharts
wrong:
```
const FusionCharts = require('fusioncharts');
```
correct:
```
import FusionCharts from 'fusioncharts/core';
```
The core FusionCharts library is imported from the 'fusioncharts/core' path, rather than directly from the main 'fusioncharts' package entry point, for tree-shaking and modularity.
Column2D
wrong:
```
import { Column2D } from 'fusioncharts';
```
correct:
```
import Column2D from 'fusioncharts/charts/fusioncharts.charts';
```
Specific chart types, like Column2D, are imported as default exports from their respective sub-paths under 'fusioncharts/charts'. After importing, they must be added as a dependency to the FusionCharts core using `FusionCharts.addDep()`.
FusionTheme
wrong:
```
import { FusionTheme } from 'fusioncharts';
```
correct:
```
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
```
Themes, such as the 'fusion' theme, are imported as default exports from their specific paths under 'fusioncharts/themes'. They also need to be registered with the core FusionCharts instance via `FusionCharts.addDep()`.

Quickstart

This quickstart demonstrates how to set up, import, and render a basic 2D column chart using FusionCharts ES modules and a specific theme. It covers registering chart types and themes, configuring data sources, and rendering the chart to a DOM element.

import FusionCharts from 'fusioncharts/core';
import Column2D from 'fusioncharts/charts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Add required chart types and themes as dependencies to FusionCharts
FusionCharts.addDep(Column2D);
FusionCharts.addDep(FusionTheme);

// Prepare chart configuration
const chartConfig = {
    type: 'column2d', // Specify the chart type
    renderAt: 'chart-container', // ID of the DOM element to render the chart into
    width: '600', // Width of the chart
    height: '400', // Height of the chart
    dataFormat: 'json', // Data format to be used
    dataSource: {
        chart: {
            caption: 'Monthly Revenue', // Chart caption
            subCaption: 'Last 5 months', // Chart sub-caption
            xAxisName: 'Month', // X-axis title
            yAxisName: 'Amount (USD)', // Y-axis title
            numberPrefix: '$', // Prefix for numbers on y-axis
            theme: 'fusion' // Apply the Fusion theme
        },
        data: [
            { label: 'Jan', value: '420000' },
            { label: 'Feb', value: '810000' },
            { label: 'Mar', value: '720000' },
            { label: 'Apr', value: '550000' },
            { label: 'May', value: '910000' }
        ]
    }
};

// Assume there's a div in your HTML like: <div id="chart-container"></div>
// Create a new FusionCharts instance
const myChart = new FusionCharts(chartConfig);

// Render the chart into the specified DOM element
myChart.render();

console.log('FusionCharts instance created and rendering initiated.');

view raw JSON →