Awesome Open Source
Awesome Open Source

FusionCharts - Build beautiful web & mobile dashboards FusionCharts jsDelivr Hits FusionCharts Downloads FusionCharts NPM Version

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

What's New

FusionCharts

  • Improved Angular and Vue Integration Components ๐Ÿ”ฅ
  • Accessibility Theme ๐Ÿ†•
  • Improved Excel/CSV Export โœ‰๏ธ
  • API Events and Methods Enhancements ๐Ÿ’ฅ
  • Improvements across axis, legend, and API events and methods ๐Ÿ’ฅ

FusionTime

  • Weekly Data Binning ๐Ÿ†•๐Ÿ”ฅ
  • Improved Space Management ๐Ÿ“
  • Improvements across API events and methods, zooming/panning, and data store ๐Ÿ’ฅ

Table of Contents

Installing FusionCharts

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

Direct Download

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

Using CDN

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>

Install from NPM

npm install --save fusioncharts [node version v12.4.0 (npm v6.9.0)]

See npm documentation to know more about npm usage.

Getting Started

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:

Using FusionCharts as an ES Module

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.

Related Packages

Front-end Integrations

AngularJS (1.x and above) Github Repo Documentation
Angular (2.x and above) Github Repo Documentation
jQuery Github Repo Documentation
React Github Repo Documentation
Vue Github Repo Documentation
Ember Github Repo Documentation

Back-end Integrations

ASP.NET (C#) Github Repo Documentation
ASP.NET (VB) Github Repo Documentation
Java (JSP) Github Repo Documentation
Django Github Repo Documentation
PHP Github Repo Documentation
Ruby on Rails Github Repo Documentation

Using Themes

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>

Using themes in ES6

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

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:

Going beyond Charts

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

Version History

Contact Support

Fill this form or drop an email to [[email protected]](mailto: [email protected])

Folder Structure

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.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,556,467)ย 
Visualization (5,547)ย 
Graph (3,813)ย 
Dashboard (3,225)ย 
Chart (2,244)ย 
Dataviz (555)ย 
Related Projects
Advertising ๐Ÿ“ฆย 9
All Projects
Application Programming Interfaces ๐Ÿ“ฆย 120
Applications ๐Ÿ“ฆย 181
Artificial Intelligence ๐Ÿ“ฆย 72
Blockchain ๐Ÿ“ฆย 70
Build Tools ๐Ÿ“ฆย 111
Cloud Computing ๐Ÿ“ฆย 79
Code Quality ๐Ÿ“ฆย 28
Collaboration ๐Ÿ“ฆย 30
Command Line Interface ๐Ÿ“ฆย 48
Community ๐Ÿ“ฆย 81
Companies ๐Ÿ“ฆย 60
Compilers ๐Ÿ“ฆย 60
Computer Science ๐Ÿ“ฆย 74
Configuration Management ๐Ÿ“ฆย 39
Content Management ๐Ÿ“ฆย 167
Control Flow ๐Ÿ“ฆย 197
Data Formats ๐Ÿ“ฆย 77
Data Processing ๐Ÿ“ฆย 266
Data Storage ๐Ÿ“ฆย 132
Economics ๐Ÿ“ฆย 60
Frameworks ๐Ÿ“ฆย 198
Games ๐Ÿ“ฆย 122
Graphics ๐Ÿ“ฆย 103
Hardware ๐Ÿ“ฆย 148
Integrated Development Environments ๐Ÿ“ฆย 47
Learning Resources ๐Ÿ“ฆย 147
Legal ๐Ÿ“ฆย 28
Libraries ๐Ÿ“ฆย 119
Lists Of Projects ๐Ÿ“ฆย 21
Machine Learning ๐Ÿ“ฆย 336
Mapping ๐Ÿ“ฆย 61
Marketing ๐Ÿ“ฆย 15
Mathematics ๐Ÿ“ฆย 55
Media ๐Ÿ“ฆย 228
Messaging ๐Ÿ“ฆย 97
Networking ๐Ÿ“ฆย 304
Operating Systems ๐Ÿ“ฆย 84
Operations ๐Ÿ“ฆย 120
Package Managers ๐Ÿ“ฆย 52
Programming Languages ๐Ÿ“ฆย 229
Runtime Environments ๐Ÿ“ฆย 96
Science ๐Ÿ“ฆย 42
Security ๐Ÿ“ฆย 375
Social Media ๐Ÿ“ฆย 26
Software Architecture ๐Ÿ“ฆย 70
Software Development ๐Ÿ“ฆย 68
Software Performance ๐Ÿ“ฆย 57
Software Quality ๐Ÿ“ฆย 127
Text Editors ๐Ÿ“ฆย 45
Text Processing ๐Ÿ“ฆย 131
User Interface ๐Ÿ“ฆย 310
User Interface Components ๐Ÿ“ฆย 465
Version Control ๐Ÿ“ฆย 29
Virtualization ๐Ÿ“ฆย 68
Web Browsers ๐Ÿ“ฆย 38
Web Servers ๐Ÿ“ฆย 25
Web User Interface ๐Ÿ“ฆย 194