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 } ] } }Esto no funciona: no reconoce la propiedad de tipo como debería en la documentación oficial.
let myChart = new Chart(gananciaContexto, { tipo: 'línea',
¿Qué hice mal?
Podemos hacer esto de tres maneras.
Al importar:
import { Chart, registerables } from 'chart.js';y luego registrar todos los componentes
Chart.register(...registerables);finalmente, hay una ruta separada para hacer exactamente lo anterior por usted, en una línea:
import Chart from 'chart.js/auto';Importando y registrando la parte requerida como comenta @Tatyana Molchanova
import { Chart, ChartConfiguration, LineController, LineElement, PointElement, LinearScale, Title} from 'chart.js'y luego regístrelo en el componente antes de instanciar el nuevo gráfico
Chart.register(LineController, LineElement, PointElement, LinearScale, Title);Angular 12 aquí. La respuesta de Gaurev funcionó para mí. Tuve que usar:
import { Chart, registerables } from 'chart.js'; export class ChartTest { constructor() { Chart.register(...registerables); } // methods to actually make the chart per documentation }actualice el paquete npm, funcionó para mí
npm i chart.js@2.9.4