const gainContext = this.gainRef.nativeElement.getContext('2d')
gainContext.canvas.height = '300px'
new Chart(gainContext, createChartConfig(gainConfig))
function createChartConfig({type, labels, data, label, color}: ChartConfig): ChartConfiguration<"line">{
console.log('3 Chart.defaults', Chart.defaults)
return {
type: "line",
data: {
labels,
datasets: [
{
label,
data,
borderColor: color,
stepped: false,
fill: false
}
]
}
}This is not working: It not recognize the type property as it must in official documentation.
let myChart = new Chart(gainContext, { type: 'line',
What I do wrong?
We can do this in three ways
By importing:
import { Chart, registerables } from 'chart.js';
and then register all the coponents
Chart.register(...registerables);
finally there is an separate path to do just the above for you, in one line:
import Chart from 'chart.js/auto';
By importing and registering the required part as commented by @Tatyana Molchanova
import { Chart, ChartConfiguration, LineController, LineElement, PointElement, LinearScale, Title} from 'chart.js'
and then register it in component before instantiating new Chart
Chart.register(LineController, LineElement, PointElement, LinearScale, Title);
Angular 12 here. Gaurev's answer worked for me. I had to use:
import { Chart, registerables } from 'chart.js';
export class ChartTest {
constructor() {
Chart.register(...registerables);
}
// methods to actually make the chart per documentation
}
please upgrade npm package, its worked for me
npm i chart.js@2.9.4