Problem with ChartJs and Editor

[arielcessario]

Hi, we are having a problem, when we load in the same project Chart.Js and the editor, the page freezes.

We did the following test:

1. New project with angular
2. Installed both libraries
3. Set up components (example bellow)
4. Run project

Package.json

{ "name": "charts-editor", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~13.2.0", "@angular/common": "~13.2.0", "@angular/compiler": "~13.2.0", "@angular/core": "~13.2.0", "@angular/forms": "~13.2.0", "@angular/platform-browser": "~13.2.0", "@angular/platform-browser-dynamic": "~13.2.0", "@angular/router": "~13.2.0", "@kolkov/angular-editor": "^2.0.0", "chart.js": "^3.7.0", "rxjs": "~6.6.0", "tslib": "^2.0.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~13.2.0", "@angular/cli": "~13.2.0", "@angular/compiler-cli": "~13.2.0", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.12", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.5.5" } }

app.module import { HttpClientModule } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { AngularEditorModule } from '@kolkov/angular-editor';

import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';

@NgModule({ declarations: [AppComponent], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, AngularEditorModule, FormsModule ], providers: [], bootstrap: [AppComponent], }) export class AppModule {}

app.component.ts import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'; import { registerables, Chart, ChartType, ChartTypeRegistry, ChartDataset, CartesianScaleOptions, CategoryScale, LinearScale, LineElement, PointElement, Title, Tooltip, Legend, LineController, } from 'chart.js';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent implements AfterViewInit { title = 'charts-editor'; @ViewChild('theCanvas') canvasRef: ElementRef; chart: Chart; content = ''; constructor() { Chart.register(...registerables); } ngAfterViewInit(): void { setTimeout(() => { this.generateChart(['this.labels'], [1, 2, 2, 3, 4, 4, 1, 2]); }, 0); }

generateChart(xlabels, datasets) { let ctx = this.canvasRef.nativeElement.getContext('2d');

this.chart = new Chart(ctx, {
  type: 'line',

  data: {
    labels: xlabels,
    datasets: [
      {
        label: 'Population (millions)',
        data: [2478, 5267, 734, 784, 433],
      },
    ],
  },

  options: {
    maintainAspectRatio: false,

    elements: {
      line: {
        tension: 0.1,
      },
    },
    plugins: {
      legend: {
        display: true,
        position: 'bottom',
      },
    },
    scales: {
      x: {
        display: true,
      },
      y: {
        display: true,
      },
      y2: {
        type: 'linear',
        position: 'right',
        reverse: false,
        ticks: {
          color: '#ff55aa',
        },
        grid: {
          drawOnChartArea: false,
        },
        display: true,
      },
    },
  },
});

} }

app.component.html <canvas height="155" style="width: 100%" id="theCanvas" #theCanvas>{{ chart }}

<angular-editor [placeholder]="'Ingrese un texto...'" [(ngModel)]="content"

theCanvas

Commenting one of the two components of the html will load the page correctly

[djouf007]

Hi,

I have the same problems ? did you find a solution ?

Need help really ... :(

[cccaaannn]

The problem still exists.

But I found a solution for my case, I am not using them in the same view so removing chartjs on destroy solves my random freeze issue.

I am adding my component here it might be helpful for someone. 🤷🏻‍♂️

import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { Chart, registerables } from 'chart.js';

export type ChartType = "bar" | "pie" | "doughnut" | "polarArea" | "radar" | "bubble" | "scatter";

@Component({
    selector: 'my-chart',
    template: '<div style="width: 100% !important; height: 100% !important;"><canvas #Chart></canvas></div>'
})
export class MyChartComponent implements AfterViewInit, OnChanges, OnInit, OnDestroy {

    @ViewChild("Chart")
    canvasRef!: ElementRef;

    @Input()
    chartType!: ChartType;

    @Input()
    chartData: any;

    @Input()
    chartOptions: any;

    private chartRef!: Chart;

    ngOnInit(): void {
        Chart.register(...registerables);
    }

    ngOnDestroy(): void {
        Chart.unregister(...registerables);
        this.chartRef.destroy();
    }

    ngAfterViewInit(): void {
        this.renderChart();
    }

    ngOnChanges(changes: SimpleChanges): void {
        if (this.chartRef) {
            this.chartRef.update();
        }
    }

    private renderChart() {
        let chartCtx = this.canvasRef?.nativeElement.getContext('2d');

        this.chartRef = new Chart(chartCtx, {
            type: this.chartType,
            data: this.chartData,
            options: this.chartOptions
        });
    }

}

[vc-pratik-padia]

@kolkov It Seems this issue has been open for a long, is there any permanent solution?

I'm using chart and angular-editor both in a single component and due to this issue, the tab is getting frozen.

[vc-kathan]

Chart.unregister(...registerables);

❤️ You are life saver 😮‍💨