C3.js Angular Tutorial

C3.js Angular Code Example

In this example, we'll demonstrate how to integrate the C3.js chart library with Angular to create dynamic and responsive charts. We will create a simple line chart component using C3.js.

Step 1: Setup Angular Project

First, ensure that you have Angular CLI installed. If not, you can install it using npm:

npm install -g @angular/cli

Next, create a new Angular project:

ng new angular-c3-example

Navigate into your project directory:

cd angular-c3-example

Step 2: Install C3.js and D3.js

C3.js is built on top of D3.js, so we need to install both libraries:

npm install c3 d3

Step 3: Include C3.js CSS

Add the C3.js stylesheet link to the angular.json file under the styles array:


"styles": [
 "src/styles.css",
 "./node_modules/c3/c3.min.css"
],


Step 4: Create the Chart Component

Generate a new component for the chart:

ng generate component line-chart

In the line-chart.component.ts file, import C3 and D3 and implement the chart:


import { Component, OnInit } from '@angular/core';
import * as c3 from 'c3';
import * as d3 from 'd3';

@Component({
 selector: 'app-line-chart',
 templateUrl: './line-chart.component.html',
 styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit {

 constructor() { }

 ngOnInit() {
   this.generateChart();
 }

 generateChart() {
   const chart = c3.generate({
     bindto: '#chart',
     data: {
       columns: [
         ['data1', 30, 200, 100, 400, 150, 250],
         ['data2', 50, 20, 10, 40, 15, 25]
       ]
     }
   });
 }
}


Then, add a div element for the chart in the line-chart.component.html file:

<div id="chart"></div>

Step 5: Include the Chart Component

Finally, add the line chart component to your app component template (app.component.html):

<app-line-chart></app-line-chart>

This will display the line chart when you run your Angular application.

Step 6: Running the Application

Start the development server with Angular CLI:

ng serve

Open your browser and navigate to http://localhost:4200/ to see the chart.

With these steps, you've successfully integrated C3.js charts into your Angular application. You can customize the chart data and options as needed for your project.