CODEWITHSUNDEEP
node.jstypescriptangularchart.js
Jannik Bertram
Jannik Bertram

Reputation: 115

Usage of Chartjs in Angular2 App

I am currently exploring Angular2 in combination with TypeScript and I would like to include the Chartjs module in my application. In the chartjs documentation is shown how to do it using the common canvas html tag:

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {[...]});
</script>

How can I do similar things with Angular2 and TypeScript?

Thanks in advance!

Upvotes: 1

Views: 625

Answers (2)

XAMelleOH
XAMelleOH

Reputation: 102

You can use npm module:

angular2-chartjs

Then you can use it like this in your module: 

import { ChartModule } from 'angular2-chartjs';

@NgModule({
  imports: [ ChartModule ]
  // ...
})
export class AppModule {
}

And in html template: 

<chart [type]="type" [data]="data" [options]="options"></chart>

Don't forget to fill it with data ;)

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658037

Something like:

@Component({
  selector: 'my-component',
  template: `
<canvas #myChart" width="400" height="400"></canvas>
<script>
`)}
export class MyComponent {
  @ViewChild('myChart') myChart;

  ngAfterViewInit() {
    var myChart = new Chart(this.target.nativeElement, {[...]});
  }
}

Upvotes: 1

Related Questions