Chart.js v2 charts do not display inside angular 2 (but Chart.js v1 works perfectly)

Question

I am rendering a chart inside an angular2 attribute directive (an approach taken by the angular2 team). This approach works with chart.js but not chart.js 2.x

code for attribute directive is ...

import {Directive, ElementRef, Input} from '@angular/core';

declare var Chart:any;

@Directive({
  selector: '[bargraph]'
})

export class BarGraphDirective {

  el:any;
  myChart:any;

  constructor(element:ElementRef) {
    this.el = element.nativeElement;
  }

  ngAfterViewInit() {
    var canvas = this.el;
    var ctx = canvas.getContext('2d');

    var _data = {
      labels: ["01-01",
        "01-04",
        "01-15",
        "02-03",
        "03-25",
        "04-03",
        "04-14",
        "05-27",
        "05-27",
        "08-03"],
      datasets: [{
        data: [5, 13, 23, 20, 5, 13, 23, 20, 110, 2],
        label: "female",
        borderColor: "rgba(197,23,1,0.8)",
        backgroundColor: "rgba(197,23,1,0.4)",
        hoverBackgroundColor: "rgba(197,23,1,1)",
        borderWidth: 1,
        pointBorderColor: "rgba(197,23,1,1)",
        pointBackgroundColor: "rgba(255,255,255,0.8)",
        pointBorderWidth: 1.5,
        tension: -1,
        yAxisID: "y-axis-1",
      }, ],
    };

    var _options = {
      scales: {
        xAxes: [{
          categorySpacing: 0
        }],
        yAxes: [{
          type: "linear",
          display: true,
          position: "left",
          id: "y-axis-1",
        }]
      }
    };

    this.myChart = new Chart(ctx, {
      type: "line",
      data: _data,
      options: _options
    });

    console.log(ctx);
    console.log(this.myChart);
  }
}

styling is ...

canvas[bargraph] {
  height: 400px !important;
  width: 700px !important;
}

the component using this has ...

<canvas bargraph width="700" height="400"></canvas>

in the template.

everything is as expected. The console.log statements reveal ctx and this.myChart are both defined inside the ngAfterViewInit lifecycle hook. There are no errors. The graph simply does not display.

PS The Chart.js v2 code works fine outside Angular2 as per this JS Fiddle - http://jsfiddle.net/beehe4eg/

The only difference between the JSFiddle and my code is the hook into the DOM ...

document.getElementById("barChart") // for the fiddle

element.nativeElement // in my code as per the approach in the angular 2 docs

docs for attribute directive and particularly for DOM hook is ... https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#our-first-draft

The element.nativeElement hook works fine for chart.js v1 with angular2 (using an identical approach).

NOTE that github repo ... https://github.com/valor-software/ng2-charts is using chart.js v1 so this doesn't help

Hoping someone out there might know a solution or can fix it! Thanks in advance.

Answer 1

The canvas element parent MUST be a valid HTML element, it can't be an Angular2 component tag like my-app.

So this doesn't works when using Chart.js:

<my-chart-component>
  <canvas></canvas>
</my-chart-component>

This works:

<div>
  <canvas></canvas>
</div>

Not sure if this is your problem though.

Answer 2

Follup up:

Another possible issue is that you try to render canvas inside non-block element.

By default any Angular component with tag selector is inline

So you could just make it block:

:host {
  display: block;
}

Answer

Today current version is 2.1.0. API has changes. Version 2.0-alpha was released on 5 Jun 2015. https://github.com/chartjs/Chart.js/releases/tag/v2.0-alpha Version that you use in jsfiddle is 2.0.0-alpha4 (22 Jun 2015, hash 9368c6079d989527dcd2072b6f18780b53e3113c)

You need to change your code as described below:

this.myChart = new Chart(ctx).Line({
  data: _data,
  options: _options
});

See working example with chart v2.0-alpha https://plnkr.co/edit/IFdEeMcS9lHGWrsUwkGb?p=preview

If you use syntax 2.1.3 then you can write like this:

this.myChart = new Chart(ctx, {
  type: 'line',
  data: _data,
  options: _options
});

Example with v2.1.3 https://plnkr.co/edit/GubwdD9Voo3mBPYYKEEL?p=preview