FusionCharts is a JavaScript charting library providing 100+ charts and 2,000+ maps for your web and mobile applications. All the visualizations are interactive and animated, which are rendered in SVG and VML (for IE 6/7/8).

This package also contains FusionTime (timeseries charts), FusionWidgets (gauges, real-time charts), PowerCharts (statistical and advanced charts), and FusionMaps (choropleth geo maps).

• Official Website: https://www.fusioncharts.com/
• Documentation: https://www.fusioncharts.com/dev/
• Download page: https://www.fusioncharts.com/download/
• Licensing: Legal Terms & Customer Agreements
• Support: https://www.fusioncharts.com/contact-support
• Issues: https://github.com/fusioncharts/fusioncharts-dist/issues

• FusionCharts version 4.0.0 introduces Ask FusionDev AI knowledge base and documentation assistant which:
  • Improves discoverability and unblocks developers by finding instant answers to questions about using FusionCharts.
  • Increases developer productivity by providing instant access to clear, concise, and up-to-date documentation.
  • Improves development efficiency with automated code generation.
• An attribute called autoUpdateStartEndDateColumn was introduced. This attribute updates the actual start date / actual end date columns in the Gantt Chart when taskbars are getting dragged.
• An attribute called allowTaskbarOverlap was introduced. When this attribute is set to 1, it allows the dragging of the taskbar over adjacent taskbars in the Gantt Chart.
• The attributes marginLeft, marginRight, marginTop, and marginBottom were introduced in the milestone option of Gantt Chart. These attributes are used to position the milestone per the numeric value provided.

• FusionCharts version 4.0.0 improved the behavior of taskbar dragging in Gantt charts. Now you will also drag the connectors along with the taskbar, and they will stay connected until the drag ends.
• FusionCharts version 4.0.0 introduced the increase/decrease width functionality for taskbars. Whenever the taskbar hovers, the stretch icon at both ends of the taskbar can be used to increase/decrease the same width. An arrow icon was added at the end of taskbars for increasing/decreasing width.
• FusionCharts version 4.0.0 improved the behavior of taskbar dragging in the case of parent and child taskbars. The parent taskbars will auto-extend in case the child taskbars are dragged.
• Upgraded framework integrations for React, Angular, Vue & Svelte.
  • React FusionCharts upgraded to v18. React upgraded to version 18 in package.json file.
  • Angular FusionCharts upgraded to v17. Angular packages version upgraded to 17 in package.json folder. Typescript packages are also upgraded to support Angular 17.
  • Vue FusionCharts upgraded to v3. Vue package already had v3, only a minor version upgrade was done in package.json file.
  • Svelte FusionCharts upgraded to v4. Svelte was upgraded to the latest version 4 in package.json file. The bundler used in the Avelte package was rollup which had some old APIs, they were replaced with the new APIs.
• FusionCharts ASP.Net has been updated to support .NET versions (6.0, 7.0, and 8.0).
• FusionCharts 4.0.0 enhanced product stability and security through Automation Repository Upgrade & Optimization.

• Resolved the issue of plotHighlightEffect attribute resetting all the dataset-level attributes when series were shown/hidden using legends.
• Fixed the issue of resizeTo method not working when the chart was rendered using XML data format.
• Fixed the issue where charts were not exported on iPad with Safari browser.
• Fixed the issue where taskbar drags position update event dataplotdragmove was logging duplicate values in Gantt charts.
• Resolved the issue when the tooltip was not visible on the delayed part of taskbars in Gantt charts.
• Resolved the visual bug with data labels and their background when transposeAxis was enabled for multi-series bar charts. Improved the visual clarity of Multi-series Bar charts by addressing transposeAxis attribute bug.
• Resolved an issue where inline styles used for Pie chart watermarks and tooltips triggered CSP errors, potentially hindering chart display.
• Fixed the bug where the scroll bar position was getting reset to the initial position, when setChartData is used to update the chart’s data.
• Handled the case of negative values for radial bar in Radial Bar charts. For negative values, the radial bar will stick to the 0 position.
• Fixed the issue where React FusionCharts wrapper was not working in strict mode. In react wrapper, if the chart is already rendered then the dispose method is used to delete the instance to avoid render callback in loop.
• Resolved the issue where data values were not visible for plots in the Bar2D chart when the bar width value was very low.
• Optimized user experience with Gauge charts through seamless resizing.

• Installing FusionCharts
• Getting Started
• Using FusionCharts as an ES Module
• Related Packages
  • Front-end Integrations
  • Back-end Integrations
• Using Themes
• FusionMaps
• Going beyond Charts
• Version History
• Contact Support
• Folder Structure

There are multiple ways to install FusionCharts. For general instructions, refer to this developer docs page.

All binaries are located on our github repository. You can also download zipped version here.

Instead of downloading, you can also use FusionCharts’s CDN to access files directly. See below for details

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>

npm install --save fusioncharts [node version v14.12.0 (npm v6.14.8)]

See npm documentation to know more about npm usage.

Easiest way to start with FusionCharts is to include the JavaScript library in your webpage, create a <div> container and chart instance, configure the data and render. Check this HTML snippet below:

<!doctype html>
<html>
<head>
    <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
</head>
<body>
    <div id="chart-container"></div>
    <script>
        FusionCharts.ready(function () {
            // chart instance
            var chart = new FusionCharts({
                type: "column2d",
                renderAt: "chart-container", // container where chart will render
                width: "600",
                height: "400",
                dataFormat: "json",
                dataSource: {
                    // chart configuration
                    chart: {
                        caption: "Countries With Most Oil Reserves [2017-18]",
                        subcaption: "In MMbbl = One Million barrels"
                    },
                    // chart data
                    data: [
                        { label: "Venezuela", value: "290000" },
                        { label: "Saudi", value: "260000" },
                        { label: "Canada", value: "180000" },
                        { label: "Iran", value: "140000" },
                        { label: "Russia", value: "115000" },
                        { label: "UAE", value: "100000" },
                        { label: "US", value: "30000" },
                        { label: "China", value: "30000" }
                    ]
                }
            }).render();
        });
    </script>
</body>
</html>

Here’re links to quick start guides:

• FusionCharts
• FusionTime
• FusionWidgets
• FusionMaps

FusionCharts can be loaded as an ES module via transpilers.

The following examples presumes you are using npm to install FusionCharts, see Install FusionCharts for more details.

import FusionCharts from "fusioncharts/core";

// include chart from viz folder - import ChartType from fusioncharts/viz/[ChartType];
import Column2D from "fusioncharts/viz/column2d";

// add chart as dependency - FusionCharts.addDep(ChartType);
FusionCharts.addDep(Column2D);

// instantiate the chart.
var chartInstance = new FusionCharts({
  type: "Column2D",
  renderAt: "chart-container", // div container where chart will render
  width: "600",
  height: "400",
  dataFormat: "json",
  dataSource: {
    // chart configuration
    chart: {
      caption: "Countries With Most Oil Reserves [2017-18]",
      subcaption: "In MMbbl = One Million barrels",
    },
    // chart data
    data: [
      { label: "Venezuela", value: "290000" },
      { label: "Saudi", value: "260000" },
      { label: "Canada", value: "180000" },
      { label: "Iran", value: "140000" },
      { label: "Russia", value: "115000" },
      { label: "UAE", value: "100000" },
      { label: "US", value: "30000" },
      { label: "China", value: "30000" },
    ],
  },
});

// render the chart
chartInstance.render();

Want to render data-driven maps (FusionMaps) - check out this link.

FusionCharts provides several out-of-the box themes that can be applied to all the charts to configure the visual appearance of the charts. Below is an example on how to use a theme:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
  </head>
  <body>
    <div id="chart-container"></div>
    <script>
      FusionCharts.ready(function () {
        // chart instance
        var chart = new FusionCharts({
          type: "column2d",
          renderAt: "chart-container", // container where chart will render
          width: "600",
          height: "400",
          dataFormat: "json",
          dataSource: {
            // chart configuration
            chart: {
              caption: "Countries With Most Oil Reserves [2017-18]",
              subcaption: "In MMbbl = One Million barrels",
              theme: "fusion", //Specifying which theme to use
            },
            // chart data
            data: [
              { label: "Venezuela", value: "290000" },
              { label: "Saudi", value: "260000" },
              { label: "Canada", value: "180000" },
              { label: "Iran", value: "140000" },
              { label: "Russia", value: "115000" },
              { label: "UAE", value: "100000" },
              { label: "US", value: "30000" },
              { label: "China", value: "30000" },
            ],
          },
        }).render();
      });
    </script>
  </body>
</html>

import FusionCharts from "fusioncharts/core";

// include chart from viz folder - import ChartType from fusioncharts/viz/[ChartType];
import Column2D from "fusioncharts/viz/column2d";

// include theme from themes folder
import fusionTheme from "fusioncharts/themes/es/fusioncharts.theme.fusion";

// add chart as dependency - FusionCharts.addDep(ChartType);
FusionCharts.addDep(Column2D);
FusionCharts.addDep(fusionTheme);

// instantiate the chart.
var chartInstance = new FusionCharts({
  type: "Column2D",
  renderAt: "chart-container", // container where chart will render
  width: "600",
  height: "400",
  dataFormat: "json",
  dataSource: {
    // chart configuration
    chart: {
      caption: "Countries With Most Oil Reserves [2017-18]",
      subcaption: "In MMbbl = One Million barrels",
      theme: "fusion",
    },
    // chart data
    data: [
      { label: "Venezuela", value: "290000" },
      { label: "Saudi", value: "260000" },
      { label: "Canada", value: "180000" },
      { label: "Iran", value: "140000" },
      { label: "Russia", value: "115000" },
      { label: "UAE", value: "100000" },
      { label: "US", value: "30000" },
      { label: "China", value: "30000" },
    ],
  },
});

// render the chart
chartInstance.render();

See all the themes live here. Check out this link to know more about themes. Want us to build a theme to suit your corporate branding? Request one here!

FusionMaps is a companion package meant to be used in conjunction with FusionCharts to render choropleth geo maps. FusionMaps provide over 1,400+ geographical maps, including all countries, US states, and regions in Europe for plotting business data like revenue by regions, employment levels by state and office locations. See below links to know more:

• Examples
• Documentation
• Github Repo and NPM Package

• 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.

• What’s New
• Change Log
• Changed Behaviour & Depreciation

Fill this form or drop an email to [email protected]

fusioncharts/
  ├── core/ - Contains the FusionCharts core.
  ├── viz/ - Contains all the individual vizualizations (Column2D, SplineArea, AngularGauge etc.)
  ├── charts/ - Contains all the visualizations of the Charts package (similar to fusioncharts.charts.js).
  ├── powercharts/ - Contains all the visualizations of the PowerCharts package.
  ├── timeseries/ - Contains all the visualizations of the FusionTime package.
  ├── widgets/ - Contains all the visualizations of the FusionWidgets package.
  ├── maps/ - Contains the map renderer
  │   └── es/ - Contains the map definition files of World and USA
  └── themes/es - Contains all the theme files.