1

I am attempting to use Chart.js 2.0 in an Angular2 application that is written in typescript. To start with I've just been trying to get the basic chart shown in the documentation to work (see http://www.chartjs.org/docs/#getting-started-creating-a-chart) but haven't had much luck. My chart object is created but never rendered in the browser.

My Component looks like this:

import {Component,  Input, AfterViewInit, NgZone} from 'angular2/core';


declare var Chart;

@Component({
    selector: 'chart',
    templateUrl: '/app/components/chart.template.html'
})


export class ChartComponent implements AfterViewInit {

    constructor(private zone: NgZone) { }

    ngAfterViewInit() {
        console.log('In the after function')
        this.zone.runOutsideAngular(() => {
            var ctx = document.getElementById("myChart");
            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
                            }
                        }]
                    }
                }
            });
            console.log(myChart);
        });

    }
}

My template is very simple, only one line setting up the canvas:

<canvas id="myChart" width="400" height="400"></canvas>

I can see from my log statement that the chart object is being created and with the correct data, it just never appears to render in the browser. When I look at the source in Firebug I see:

<chart>
   <iframe style="width: 100%; display: block; border: 0px none; height: 0px; margin: 0px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;" class="chartjs-hidden-iframe"></iframe>
   <canvas style="width: 0px; height: 0px;" width="0" id="myChart" height="0"></canvas>
</chart>

I've tried adding myChart.render() and myChart.draw() but don't seem to see any difference.

Can anyone see what I'm doing wrong?

Matt Watson
  • 5,065
  • 4
  • 30
  • 48
  • Looks like a dup of http://stackoverflow.com/questions/37011559/chart-js-v2-charts-do-not-display-inside-angular-2-but-chart-js-v1-works-perfec – Günter Zöchbauer May 06 '16 at 14:54

1 Answers1

1

I wouldn't use Zones here but rather something like that:

export class ChartComponent implements AfterViewInit {
  @ViewChild('myChart')
  myChart:ElementRef;

  ngAfterViewInit() {
    var myChart = new Chart(this.myChart.nativeElement, {
    (...)
  }
}

And in the template:

<canvas #myChart width="400" height="400"></canvas>

This question could also help you:

Community
  • 1
  • 1
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • If you don't use zone for chart initialization you could end up with Browser hanging forever. So it's better to use zone.js. for "new Chart(..)" – roma2341 Jul 25 '22 at 11:52