- Back to Docs
- Get Started
- Integrations
- Configuring your Charts
- List of Charts
- Chart Attributes
- API
- Options & Properties
- Methods
- Events
- Other References
- Concepts
- Browser and Technology Support
- Change Log
- License Activation
Create a Chart in Angular
We have built a simple and lightweight Angular component which provides bindings for Froala Charts. The angular-froalacharts component allows you to easily add rich and interactive charts to any Angular project.
On this page, you'll see how to install Froala Charts and render a chart using the angular-froalacharts
component.
Prerequisite
Angular requires Node.js To download and install Node.js, please visit nodejs.org.
One of the best ways to set up the development environment is using angular-cli
. Find more about it here. Install the angular-cli
with the following command
npm install -g @angular/cli
Open the terminal, and run:
ng new first-froalacharts-project cd first-froalacharts-project ng serve --open
first-froalacharts-project
is the working directory where an Angular app will be installed along with all the utilities and dependencies.
Installation and Including Dependencies
To install froalacharts and the angular-froalacharts modules via npm follow the steps below:
Run the following command:
npm install froalacharts angular-froalacharts --save
After installing the froalacharts components, you can replace the code in the src/app/app.module.ts
file with the consolidated code shown below to create your first chart. Import all the required dependencies in @NgModule
to get started.
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { FroalaChartsModule } from "angular-froalacharts";
// Import Froala Charts library and chart modules
import * as FroalaCharts from "froalacharts";
import * as FroalaTheme from "froalacharts/themes/froalacharts.theme.froala";
// Pass the froalacharts library and chart modules
FroalaChartsModule.fcRoot(FroalaCharts, FroalaTheme);
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FroalaChartsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Preparing the Data
Let's create a chart showing a "Comparison of Quarterly Revenue".
Quarter | Revenues |
---|---|
Q1 | 10000 |
Q2 | 11500 |
Q3 | 12500 |
Q4 | 15000 |
Since we are plotting a single dataset, create a column chart with 'Quarter' as data labels along the x-axis and 'Revenues (In USD)' as data values along y-axis.
Froala Charts accepts the data in JSON format.
const chartData = [
{
data: [
{
value: "10000",
},
{
value: "11500",
},
{
value: "12500",
},
{
value: "15000",
}]
}];
Configure your Chart
Next, work on the styling, positioning and giving your chart a context.
// Create a JSON object to store the chart configurations
const chartConfig = {
//Specify the chart type
type: "column",
//Set the container object
renderAt: "ft",
//Specify chart dimensions
width: "800",
height: "500",
//Set the type of data
dataSource: {
chart: {
//Set the theme for your chart
theme: "froala",
//Set the chart caption
caption: "Comparison of Quarterly Revenue",
//Set the x-axis name
xAxisname: "Quarter",
//Set the y-axis name
yAxisName: "Revenues (In USD)",
numberPrefix: "$",
},
categories: [
{
category: [
{
label: "Q1",
},
{
label: "Q2",
},
{
label: "Q3",
},
{
label: "Q4",
}
]
}
],
dataset: chartData
}
};
Render the chart
Finally, get ready to render your first chart. Follow the steps mentioned below:
Specify the chart data within the AppComponent class in src/app/app.component.ts
file in your root project folder.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html"
})
export class AppComponent {
dataSource: Object;
constructor() {
//chart Data
const chartData = [
{
data: [
{
value: "10000",
},
{
value: "11500",
},
{
value: "12500",
},
{
value: "15000",
}]
}];
//Step 3 : Create your configuration object
const dataSource = {
chart: {
//Set the theme for your chart
theme: "froala",
//Set the chart caption
caption: "Comparison of Quarterly Revenue",
//Set the x-axis name
xAxisname: "Quarter",
//Set the y-axis name
yAxisName: "Revenues (In USD)",
numberPrefix: "$"
},
categories: [
{
category: [
{
label: "Q1"
},
{
label: "Q2"
},
{
label: "Q3"
},
{
label: "Q4"
}]
}],
dataset: chartData
};
this.dataSource = dataSource;
}
}
Now using the froalacharts component create the chart container in app.component.html
and set the width
, height
, type
attributes as shown.
<h1>
{{title}}
</h1>
<froalacharts
width="700"
height="400"
type="Column"
[dataSource]="dataSource">
</froalacharts>
See your chart
You should be able to see the chart as shown below.