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

by

4👍

✅

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

10👍

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.

Leave a comment