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: https://www.fusioncharts.com/buy/eula-perpetual
- Support: https://www.fusioncharts.com/contact-support
- Issues: https://github.com/fusioncharts/fusioncharts-dist/issues
- 🛠 Added support to customize legend position on 12 different places.
- 📏 Ability to place axis and scrollbar on opposite sides of the canvas.
- 🔒 Improved Cross-site scripting (XSS) security.
- 🔠 Improved data export for gantt, candlestick, bubble, and spark charts.
- 🆕 Added area and column range plots for FusionTime 🔥
- ✅ Added support for clipping of time-axis.
- 🛠 Added support to customize caption and sub-caption position.
Table of Contents
- Installing FusionCharts
- Getting Started
- Using FusionCharts as an ES Module
- Related Packages
- Using Themes
- 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
Install from NPM
npm install --save fusioncharts
See npm documentation to know more about npm usage.
<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;</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.
// include chart from viz folder - import ChartType from fusioncharts/viz/[ChartType];;// add chart as dependency - FusionCharts.addDep(ChartType);FusionCharts;// instantiate the chart.var chartInstance =type: 'Column2D'renderAt: "chart-container" // div container where chart will renderwidth: "600"height: "400"dataFormat: "json"dataSource:// chart configurationchart:caption: "Countries With Most Oil Reserves [2017-18]"subcaption: "In MMbbl = One Million barrels"// chart datadata: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 chartchartInstance;
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|
|ASP.NET (C#)||Github Repo||Documentation|
|ASP.NET (VB)||Github Repo||Documentation|
|Java (JSP)||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:
Using themes in ES6
// include chart from viz folder - import ChartType from fusioncharts/viz/[ChartType];;// include theme from themes folder;// add chart as dependency - FusionCharts.addDep(ChartType);FusionCharts;FusionCharts;// instantiate the chart.var chartInstance =type: 'Column2D'renderAt: "chart-container" // container where chart will renderwidth: "600"height: "400"dataFormat: "json"dataSource:// chart configurationchart:caption: "Countries With Most Oil Reserves [2017-18]"subcaption: "In MMbbl = One Million barrels"theme: "fusion"// chart datadata: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 chartchartInstance;
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:
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.
Fill this form or drop an email to firstname.lastname@example.org
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.