Add Interactive Angular Charts to ng-bootstrap Components

In this Angular 14 Chart tutorial, we will learn how to add charts to display data within ng-bootstrap tabs. 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 gives much information with the help of charts. In this tutorial, I'm showing how to add CanvasJS chart in ng-bootstrap navs (tabs). I've built the app in Angular 14 but CanvasJS & ng-bootstrap works across multiple versions of angular. CanvasJS is 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.

Note: This tutorial was made using the latest versions at the time of writing:
• Angular: v14.0.0
• Ng-bootstrap: v13.0.0
• CanvasJS Charts: v3.6.7

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 so do you can use keep 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.