Básicamente, al hacer clic en div (jquery), tengo una ventana emergente modal de arranque que tiene un gráfico. El gráfico funciona bien y la representación es perfecta, el problema surge cuando hago clic en otro div.

Aquí está mi HTML

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="card"> <div class="text-right cross"> hello<i class="fa fa-times"></i> </div> <div id="chartDiv" *ngIf="chart"><canvas #chart>{{ chart }}</canvas></div> </div> </div> </div>

En una nota aparte, estoy usando Chart.register(...registerables) en mi constructor. Aquí va mi TS (solo el código relevante):

 import { Chart, registerables } from 'chart.js'; export class HomeComponent implements OnInit{ @ViewChild('chart') canvas: ElementRef; chart: any = []; ngOnInit(): void { $('#myModal').on('hide.bs.modal', function () { $(".canvas").remove(); }) $('#myModal').on('show.bs.modal', function () { $("div.chart").append('<canvas #chart>{{chart}}</canvas>'); $('#chart').trigger('focus') }) } divClick() { $('#myModal').modal('show'); this.chart = this.getChartData() } getChartData(): Chart { this.chart = new Chart(this.canvas.nativeElement.getContext('2d'), {data}) //please don't worry about data its coming from api and it works fine return this.chart } }

Todo esto es de muy alto nivel, pero estoy feliz de incluir cualquier otro código necesario. Investigué tantos artículos y formas de solucionar este error, pero no pude encontrar ninguno. Si puede indicarme un recurso donde se implemente Chart js usando Angular, sería útil. Además, probé la función "destruir" en this.chart pero tampoco funciona. ¿Hay alguna otra forma de usar esto en lugar de exponer el lienzo? Simplemente no sé lo que estoy haciendo mal. Incluso intenté eliminar y volver a agregar clases de lienzo a través de jquery (en onInit), pero eso tampoco funciona. (Chartjs v3.7.0)