How can I resolve the issue of getting a blank div and no output while trying to display a chart where the options, labels, and other data are initialized in the TypeScript controller and then used on the HTML page?
I added the angular-chart.js library using the nuget package manager.
Below is the initialization code in the 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'
}
]
}
};
}
Here's the corresponding HTML code:
<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>