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 3.21.1 introduces new maps for all 24 Argentinian departments, all 26 Peruvian departments, and all 7 provinces from Costa Rica.
- FusionCharts version 3.21.1 introduces the new function that removes any cross-site scripting that might be causing errors in your code.
- FusionCharts version 3.21.1 updated the
Ramda
dependency package version to the latest version, version 0.29. - When using Multiseries Line charts, similar values overlapped in the chart. FusionCharts version 3.21 improved the
drawcrossline
attribute to prevent overlapping values and display a clean chart. - Improved the
numberSuffix
attribute to work as expected when using numeric and Arabic characters. Previously, the characters were displayed in an incorrect order. Now, enabling thehasRtlText
attribute corrects the suffix and prefix positions, showing the characters in the correct order. - Improved the
Sunburst
chart by adding theshowLabelValue
property that allows users to control label visibility for each node at all levels in the chart. - Improved the
dataLabelstyles
function to handle the properties, attributes, and conditions for the data label styles. Previously, whenplotHighlightEffect
was set, and if value-related cosmetics were applied at the dataset level, the value-related cosmetics did not display as expected upon hovering on the legends. - Improved the accessibility feature. Now, when using React or Angular, you can enable the accessibility feature to import directly from the node modules packages.
- Improved the
Doughnut
andPie
charts by allowing users to display legend and data values as percentages or as absolute values. - And several bug fixes under the hood, please read the release details on the FusionCharts Blog for detailed report.
- Installing FusionCharts
- Getting Started
- Using FusionCharts as an ES Module
- Related Packages
- 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 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.
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 |
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 |
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:
- 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.
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.