
Security News
Meet Socket at Black Hat and DEF CON 2025 in Las Vegas
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
angular-fusioncharts
Advanced tools
A simple and lightweight official Angular component for FusionCharts JavaScript charting library. angular-fusioncharts enables you to add JavaScript charts in your Angular application without any hassle.
A simple and lightweight official Angular component for FusionCharts JavaScript charting library. angular-fusioncharts enables you to add JavaScript charts in your Angular application without any hassle.
With the latest version of angular-fusioncharts@4.1.0, we are now supporting Angular 17 applications as well which were not supported till angular-fusioncharts@4.0.3 The angular-fusioncharts 4.1.0 can be used with all the versions of FusionCharts till the v3.23.0.
To install angular-fusioncharts
library, run:
$ npm install angular-fusioncharts --save
To install fusioncharts
library:
$ npm install fusioncharts --save
Here is a basic sample that shows how to create a chart using angular-fusioncharts
:
Add this in your Angular AppModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import angular-fusioncharts
import { FusionChartsModule } from 'angular-fusioncharts';
// Import FusionCharts library and chart modules
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
// For Powercharts , Widgets, and Maps
// import * as PowerCharts from 'fusioncharts/fusioncharts.powercharts';
// import * as Widgets from 'fusioncharts/fusioncharts.widgets';
// import * as Maps from 'fusioncharts/fusioncharts.maps';
// To know more about suites,
// read this https://www.fusioncharts.com/dev/getting-started/plain-javascript/install-using-plain-javascript
// For Map definition files
// import * as World from 'fusioncharts/maps/fusioncharts.world';
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
// Specify FusionChartsModule as import
FusionChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Once the library is imported, you can use its components, directives in your Angular application:
In your Angular AppComponent:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
dataSource: Object;
title: string;
constructor() {
this.title = 'Angular FusionCharts Sample';
this.dataSource = {
chart: {
caption: 'Countries With Most Oil Reserves [2017-18]',
subCaption: 'In MMbbl = One Million barrels',
xAxisName: 'Country',
yAxisName: 'Reserves (MMbbl)',
numberSuffix: 'K',
theme: 'fusion'
},
data: [
{ label: 'Venezuela', value: '290' },
{ label: 'Saudi', value: '260' },
{ label: 'Canada', value: '180' },
{ label: 'Iran', value: '140' },
{ label: 'Russia', value: '115' },
{ label: 'UAE', value: '100' },
{ label: 'US', value: '30' },
{ label: 'China', value: '30' }
]
};
}
}
<!-- You can now use fusioncharts component in app.component.html -->
<h1>
{{title}}
</h1>
<fusioncharts
width="600"
height="350"
type="Column2D"
dataFormat="JSON"
[dataSource]="dataSource"
></fusioncharts>
Fusincharts events can be subscribed from component's output params.
Usage in template :
<fusioncharts
width="600"
height="350"
type="Column2D"
dataFormat="json"
[dataSource]="dataSource"
(dataplotRollOver)="plotRollOver($event)">
</fusioncharts>
And in component's code , $event
will be an object { eventObj : {...}, dataObj: {...} }
For more on this read here
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
dataSource: Object;
title: string;
constructor() {
this.title = "Angular FusionCharts Sample";
this.dataSource = {
...// same data as above
};
}
plotRollOver($event){
var dataValue = $event.dataObj.dataValue;
console.log(`Value is ${dataValue}`);
}
}
Get the list of fusioncharts' events
Using api of charts involves getting the FusionCharts chart instance from the initialized
event.
It emits chart object which can be operated upon later.
In template, we add initialized
event
<fusioncharts
type="column2d"
width="100%"
height="400"
dataFormat="json"
[dataSource]="dataSource"
(initialized)="initialized($event)">
</fusioncharts>
<button (click)="changeLabel()">Change label</button>
And in component's code , we get $event
as { chart : ChartInstance }
So in order to use the chart instance , we need to store the chart instance.
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
dataSource: Object;
title: string;
chart: any;
constructor() {
this.title = "Angular FusionCharts Sample";
this.dataSource = {
...// same data as above
};
}
initialized($event){
this.chart = $event.chart; // Storing the chart instance
}
changeLabel(){
this.chart.setChartAttribute('caption', 'Changed caption');
}
}
From fusioncharts@3.13.3-sr.1
and angular-fusioncharts@3.0.0
, You can visualize timeseries data easily with angular.
Learn more about FusionTime here.
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import angular-fusioncharts
import { FusionChartsModule } from 'angular-fusioncharts';
// Import FusionCharts library and chart modules
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as TimeSeries from 'fusioncharts/fusioncharts.timeseries'; // Import timeseries
// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, Charts, TimeSeries);
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
// Specify FusionChartsModule as import
FusionChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
// In app.component.ts
import { Component } from '@angular/core';
import * as FusionCharts from 'fusioncharts';
const dataUrl =
'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/data.json';
const schemaUrl =
'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/schema.json';
@Component({
selector: 'app',
templateUrl: './app.component.html'
})
export class AppComponent {
dataSource: any;
type: string;
width: string;
height: string;
constructor() {
this.type = 'timeseries';
this.width = '400';
this.height = '400';
this.dataSource = {
data: null,
yAxis: {
plot: [{ value: 'Sales' }]
},
caption: {
text: 'Online Sales of a SuperStore in the US'
}
};
this.fetchData();
}
fetchData() {
let jsonify = res => res.json();
let dataFetch = fetch(dataUrl).then(jsonify);
let schemaFetch = fetch(schemaUrl).then(jsonify);
Promise.all([dataFetch, schemaFetch]).then(res => {
let data = res[0];
let schema = res[1];
let fusionTable = new FusionCharts.DataStore().createDataTable(
data,
schema
); // Instance of DataTable to be passed as data in dataSource
this.dataSource.data = fusionTable;
});
}
}
<div>
<fusioncharts
[type]="type"
[width]="width"
[height]="height"
[dataSource]="dataSource"
></fusioncharts>
</div>
Useful links for FusionTime
$ git clone https://github.com/fusioncharts/angular-fusioncharts.git
$ cd angular-component
$ npm i
$ npm start
The FusionCharts React component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FusionCharts library in your page separately, which has a separate license.
FAQs
A simple and lightweight official Angular component for FusionCharts JavaScript charting library. angular-fusioncharts enables you to add JavaScript charts in your Angular application without any hassle.
We found that angular-fusioncharts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 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.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.