Skip to content

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".

QuarterRevenues
Q110000
Q211500
Q312500
Q415000

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.

Froala Charts will load here!

Next Steps

Explore the List of Charts.

Dive into the API documentation.

Learn about other Concepts.