import { Component, Input, OnChanges } from "@angular/core";
import { Chart } from 'chart.js'
@Component({
selector: "ngx-echarts-dropdown",
template: `<canvas id="myChart" width="400" height="400"></canvas>`
})
export class EchartsDropdownComponent implements OnChanges {
canvas = <HTMLCanvasElement> document.getElementById('myChart');
ctx = this.canvas.getContext('2d');
myChart = new Chart(this.ctx, {
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}]]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}
});
I am trying to plot scatter graph in Angular 12. Am getting below error.
Please help me with solution for the same
You should place the chart creation code inside the method ngAfterViewInit and don't forget to specify the chart type.
export class EchartsDropdownComponent implements AfterViewInit, OnChanges {
ngAfterViewInit() {
myChart = new Chart('myChart', {
type: 'scatter', // <- define the chart type
data: {
datasets: [{
label: 'Scatter Dataset',
...
}