Chart.js v2 not rendering in Angular 2

I was able to render charts with v1.0.2 in Angular 2, but with v2.0.0 it doesn’t render anything in the screen and doesn’t log anything on the console.

I’m using the example provided in v2 docs:

constructor(el: ElementRef) {}

ngAfterViewInit() {
    var ctx = this.el.nativeElement.firstChild.getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3]
            }]
        },
        options:{
            scales:{
                yAxes:[{
                        ticks:{
                            beginAtZero:true
                        }
                    }]
            }
        }
      });
  }

[etimberg]

@hertz1 this issue seems to be that the <chart> component has no size. V2 generally sizes to fit the parent. I added a container div around the canvas that is 100% width and height. Updated the part that gets the canvas context.

The result is: https://plnkr.co/edit/RbhYj4uEeSC8MSZZHBe3?p=preview

[jhiemer]

@hertz1 works for me, take a look here:

https://github.com/evoila/angular2-chartjs2