Add Interactive Angular Charts to ng-bootstrap Components

• Download source code - 314.2 KB

Introduction

A chart is basically a graphical representation of data, they summarize large data or information in a visual easy-to-understand manner. Being a web-designer / developer, one would obviously work on dashboard at some point of time. Dashboards give much information with the help of charts. In this tutorial, I'm showing how to add CanvasJS chart in ng-bootstrap navs (tabs) in Angular 14 application. I've built the app in Angular 14 but CanvasJS & ng-bootstrap works across multiple versions of angular. ng-bootstrap is a bootstrap widget designed for angular ecosystem. CanvasJS is a robust charting library for web designers & developers. Chart component supports more than 30 chart types & are responsive, interactive, easy to customize & allows you to create beautiful charts that can match your webpage / application design.

Using the Code

/* app.component.html */
<h1 class="text-center">CanvasJS Angular Charts in ng-bootstap Tabs</h1>
<div class="container">
    <ul ngbNav #nav="ngbNav" class="nav-tabs" (shown)="navChangeEvent($event)" 
    (hidden)="navHiddenEvent($event)">
      <li [ngbNavItem]="1">
        <a ngbNavLink>Line Chart</a>
        <ng-template ngbNavContent>
          <canvasjs-chart
          *ngIf="showChart"
          [options]="lineChartOptions"
          (chartInstance)="getChartInstance($event)"
          [styles]="{ width: '100%', height: '360px' }"
          ></canvasjs-chart>
        </ng-template>
      </li>
      <li [ngbNavItem]="2">
        <a ngbNavLink>Column Chart</a>
        <ng-template ngbNavContent>
          <canvasjs-chart
          *ngIf="showChart"
          [options]="columnChartOptions"
          (chartInstance)="getChartInstance($event)"
          [styles]="{ width: '100%', height: '360px' }"
          ></canvasjs-chart>
        </ng-template>
      </li>
      <li [ngbNavItem]="3">
        <a ngbNavLink>Pie Chart</a>
        <ng-template ngbNavContent>
          <canvasjs-chart
          *ngIf="showChart"
          [options]="pieChartOptions"
          (chartInstance)="getChartInstance($event)"
          [styles]="{ width: '100%', height: '360px' }"
          ></canvasjs-chart>
        </ng-template>
      </li>
    </ul>
    
    <div [ngbNavOutlet]="nav" class="mt-2"></div>
</div>

/* app.module.ts */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;

@NgModule({
  declarations: [
    AppComponent,
    CanvasJSChart
  ],
  imports: [
    BrowserModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

/* app.component.ts */
import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  active = 1;
  chart: any;
  showChart: Boolean = false;
  columnChartOptions = {
    animationEnabled: true,
    title: {
      text: 'Angular Column Chart in Bootstrap Tabs',
    },
    data: [{
        type: 'column',
        dataPoints: [
          { label: 'apple', y: 10 },
          { label: 'orange', y: 15 },
          { label: 'banana', y: 25 },
          { label: 'mango', y: 30 },
          { label: 'grape', y: 28 }
        ]
    }]
  };
  lineChartOptions = {
    animationEnabled: true,
    title: {
      text: 'Angular Line Chart in Bootstrap Tabs',
    },
    data: [{
        type: 'line',
        dataPoints: [
          { label: 'apple', y: 10 },
          { label: 'orange', y: 15 },
          { label: 'banana', y: 25 },
          { label: 'mango', y: 30 },
          { label: 'grape', y: 28 }
        ]
      }]
  };
  pieChartOptions = {
    animationEnabled: true,
    title: {
      text: 'Angular Pie Chart in Bootstrap Tabs',
    },
    data: [{
        type: 'pie',
        dataPoints: [
          { label: 'apple', y: 10 },
          { label: 'orange', y: 15 },
          { label: 'banana', y: 25 },
          { label: 'mango', y: 30 },
          { label: 'grape', y: 28 }
        ]
    }]
  };
  getChartInstance(chart: object) {
    this.chart = chart;
  }
  navChangeEvent(e: any) {
    this.showChart = true;
  }
  navHiddenEvent(e: any) {
    this.showChart = false;
  }
  ngAfterViewInit() {
    this.showChart = true;
  }
}

Step by Step Instructions

Create Angular App & Add ng-bootstrap

1. Create Angular Project

Create a fresh Angular project using Angular CLI. Ignore this step if you already have an app.

ng new angular-bootstrap-charts

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

2. Add ng-bootstrap & CanvasJS Angular Chart Components to the Project

Once the Angular project is created, add ng-bootstrap & CanvasJS angular charts to your project. ng-bootstrap can be added either using Angular CLI way or manually, you can just perform 'npm install package-name'. Below are the syntaxes for both the approaches.

/* Angular CLI Way */
ng add @ng-bootstrap/ng-bootstrap
 
/* Manual Way */
npm install @ng-bootstrap/ng-bootstrap --save

And CanvasJS angular charts can be downloaded from their official site (npm package is not the official one) & save it in assets folder to import to the project.

Once the package is installed, let's import the module & register it. Open app.module.ts file & register the module.

/* app.module.ts */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
 
import { AppComponent } from './app.component';
 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;
 
@NgModule({
  declarations: [
    AppComponent,
    CanvasJSChart
  ],
  imports: [
    BrowserModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add Bootstrap Nav (Tabs) Component

To keep it simple, let's add bootstrap tabs to the app. You can consider adding any bootstrap component like modal, accordion, etc.

1. Add Bootstrap Navs

<ul ngbNav #nav="ngbNav" class="nav-tabs">
  <li [ngbNavItem]="1">
    <a ngbNavLink>Line Chart</a>
    <ng-template ngbNavContent>
    </ng-template>
  </li>
  .
  .
  .
</ul>
 
<div [ngbNavOutlet]="nav" class="mt-2"></div>

2. Add Chart to the Nav

<ul ngbNav #nav="ngbNav" class="nav-tabs">
  <li [ngbNavItem]="1">
    <a ngbNavLink>Line Chart</a>
    <ng-template ngbNavContent>
      <canvasjs-chart
      [options]="lineChartOptions"
      [styles]="{ width: '100%', height: '360px' }"
      ></canvasjs-chart>
    </ng-template>
  </li>
  .
  .
  .
</ul>
 
<div [ngbNavOutlet]="nav" class="mt-2"></div>

3. Show chart only in Active Tabs

In tabs, content of active tabs will be shown while the content inactive tabs will be hidden. Hence, conditional rendering is required so that charts in inactive tabs are not rendered. To do so, you can use a flag that keeps toggling when a tab is visible or hidden. Based on the flag, you can render the chart.

<ul ngbNav #nav="ngbNav" class="nav-tabs" (shown)="navChangeEvent($event)" 
    (hidden)="navHiddenEvent($event)">
  <li [ngbNavItem]="1">
    <a ngbNavLink>Line Chart</a>
    <ng-template ngbNavContent>
      <canvasjs-chart
      *ngIf="showChart"
      [options]="lineChartOptions"
      (chartInstance)="getChartInstance($event)"
      [styles]="{ width: '100%', height: '360px' }"
      ></canvasjs-chart>
    </ng-template>
  </li>
  .
  .
  .
</ul>

At the time of writing this article, CanvasJS v3.6.7 was used in Angular 14 project. However, CanvasJS charts work across all versions of Angular. If you are new to CanvasJS Angular charts or CanvasJS API or need a refresher, I would recommend reading the CanvasJS Charts documentation. And for ng-bootstrap, check out this documentation page.

History

• 2^nd August, 2022: Initial version