Angular-chart.js blank div

Question

I am trying to display a chart where the options, labels and other data is initialized in the TypeScript controller and then using it on the HTML page. However I get blank div and no output. Please Help.

I installed the angular-chart.js using the nuget package manager.

TypeScript controller:

$onInit() {
  this.Init();
  this.labels = ["January", "February", "March", "April", "May", "June", "July"];
  this.series = ['Series A', 'Series B'];
  this.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  this.onClick = function(points, evt) {
    console.log(points, evt);
  };
  this.datasetOverride = [{
    yAxisID: 'y-axis-1'
  }, {
    yAxisID: 'y-axis-2'
  }];
  this.options = {
    scales: {
      yAxes: [{
          id: 'y-axis-1',
          type: 'linear',
          display: true,
          position: 'left'
        },
        {
          id: 'y-axis-2',
          type: 'linear',
          display: true,
          position: 'right'
        }
      ]
    }
  };
}

HTML:

<canvas id="line" class="chart chart-line" chart-data="{{$ctrl.data}}"
        chart-labels="{{$ctrl.labels}}" chart-series="{{$ctrl.series}}" 
        chart-options="{{$ctrl.options}}" chart-dataset-override="{{$ctrl.datasetOverride}}">
</canvas>

Answer 1

Do not use interpolation while binding data , change it as,

<canvas id="line" class="chart chart-line" chart-data="$ctrl.data"
        chart-labels="$ctrl.labels" chart-series="$ctrl.series" chart-options="$ctrl.options" chart-dataset-override="$ctrl.datasetOverride"></canvas>