Getting Started with CanvasJS Angular StockChart Component

Angular is one of the popular frameworks for web development that aids in building rich web page applications & dashboards. So we have built angular component for CanvasJS StockChart. This Tutorial teaches you to quickly add beautiful StockCharts to your Angular Applications using CanvasJS & NPM.

In case you have any suggestions/feedback please post it in our forum.

Here are couple of things that you need to remember while using Angular StockChart Component

  1. You no longer have to call render() method during the initial render. You need to call render whenever data is updated.
  2. 2. You can get reference to the stockchart instance by passing the call-back function like (stockChartInstance)=”getStockChartInstance($event)” to the component & get the instance as a callback parameter. This allows you to access all stockchart properties and methods including render().
  3. Once you get reference to the stockchart object, you can update any of the options – like stockchart.options.title.text = “StockChart Title” and call stockchart.render(). Refer Updating StockChart Options / Data for more information.
  4. You can also style the stockchart component as shown below
    5. <canvasjs-stockchart [options]="stockChartOptions" [styles]="{width: '100%', height: '450px'}"></canvasjs-stockchart>

Step-By-Step Instruction

1. Create Angular app

Create an angular app. Please refer angular documentation for prerequisites, environment setup & tutorial on creating angular app.

2. Install CanvasJS Angular StockCharts via NPM

Install CanvasJS Angular StockCharts package to your Angular application via NPM. 

npm install @canvasjs/angular-stockcharts

3. Import Angular StockChart Module & register it

Import Angular StockChart module into your Angular application (app.component.ts) & register it. 

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { CanvasJSAngularStockChartsModule } from '@canvasjs/angular-stockcharts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet,
    CanvasJSAngularStockChartsModule,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent { }

4. Set the stockchart-options & create chart

Set the stockchart-options in app.component.ts & use ‘canvasjs-stockchart’ selector in app.component.html to create stockchart. 

//app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { CanvasJSAngularStockChartsModule } from '@canvasjs/angular-stockcharts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet,
    CanvasJSAngularStockChartsModule,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
	
export class AppComponent {
  stockChartOptions = {
    title: {
      text: "CanvasJS Angular StockChart"
    },
    theme: "light2",
    charts: [{
      data: [{
        type: "line",
        dataPoints: [
          { x: new Date("2018-01-01"), y: 71 },
          { x: new Date("2018-02-01"), y: 55 },
          { x: new Date("2018-03-01"), y: 50 },
          { x: new Date("2018-04-01"), y: 65 },
          { x: new Date("2018-05-01"), y: 95 },
          { x: new Date("2018-06-01"), y: 68 },
          { x: new Date("2018-07-01"), y: 28 },
          { x: new Date("2018-08-01"), y: 34 },
          { x: new Date("2018-09-01"), y: 14 },
          { x: new Date("2018-10-01"), y: 71 },
          { x: new Date("2018-11-01"), y: 55 },
          { x: new Date("2018-12-01"), y: 50 },
          { x: new Date("2019-01-01"), y: 34 },
          { x: new Date("2019-02-01"), y: 50 },
          { x: new Date("2019-03-01"), y: 50 },
          { x: new Date("2019-04-01"), y: 95 },
          { x: new Date("2019-05-01"), y: 68 },
          { x: new Date("2019-06-01"), y: 28 },
          { x: new Date("2019-07-01"), y: 34 },
          { x: new Date("2019-08-01"), y: 65 },
          { x: new Date("2019-09-01"), y: 55 },
          { x: new Date("2019-10-01"), y: 71 },
          { x: new Date("2019-11-01"), y: 55 },
          { x: new Date("2019-12-01"), y: 50 }
        ]
      }]
    }],
    navigator: {
      slider: {
        minimum: new Date("2018-07-01"),
        maximum: new Date("2019-06-30")
      }
    }
  }
}
	
//app.component.html
<div>
  <canvasjs-stockchart [options]="stockChartOptions"></canvasjs-stockchart>
</div>

In order to make it simpler we have also created various examples with different sets of use-cases. Please check out our Angular StockChart Gallery for the same.

If you have any questions, please feel free to ask in our forums.Ask Question