fusioncharts
Advanced tools
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).
ignoredepthforlineplots attribute, which, when set to true, makes the leftover line plot in an mscolumn3dlinedy or stackedcolumn3dlinedy chart act as a 2D line. Otherwise, the line continues to appear in 3D.reversexaxis and reverseyaxis to true in the chart configuration.legendWidth attribute, which allows managing legend width and avoiding unwanted scrollbars on legendbox.react-fusioncharts integration supports up to the latest version of React v19.vue-fusioncharts integration supports up to Vue 3.5.17.angular-fusioncharts integration supports up toAngular v20.chartBottomMargin attribute, ensure that the value is set to a value higher than 5px; otherwise, the trial watermark and legend will overlap.scrollColumn2d, scrollBar2D, scrollcombi2d, and scrollStackedBar2D.displayValue was unable to render the ampersand (&) symbol in various chart types.react-fusioncharts component from rendering correctly inside the shadow DOM.Errorline chart. Now, the tooltips are shown as expected.react-fusioncharts version 4.1, while those using React version 18 or higher should use the latest react-fusioncharts version.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 fusioncharts
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:
Fill this form or drop an email to support@fusioncharts.com
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.
FAQs
FusionCharts JavaScript charting framework
The npm package fusioncharts receives a total of 22,605 weekly downloads. As such, fusioncharts popularity was classified as popular.
We found that fusioncharts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.