kagklis

let mouseMoveEnabled: boolean = false;

function mousemove(data: any): void {
   if (!mouseMoveEnabled) return;
   const tooltip = chart.tooltip;
   const mousePoint = { x: data.x, y: data.y };
   const nearest1 = getNearestElementByX(chart.getDatasetMeta(0), mousePoint);
   const nearest2 = getNearestElementByX(chart.getDatasetMeta(1), mousePoint);
   if (!isTouched(nearest1, mousePoint) && !isTouched(nearest2, mousePoint)) {
      tooltip.setActiveElements([]);

kagklis

@Component({
   // ...
})
export class ChartComponent implements AfterViewInit {
   // ...
   
   private createCanvas() {
      const currentCanvas = document.createElement('canvas');
      const chartCanvas = document.getElementById('chartCanvas');
      chartCanvas.append(currentCanvas);

kagklis

/// <reference lib="webworker" />

// ...

function resize(data: any): void {
   canvas.width = data.width;
   canvas.height = data.height;
   chart.resize();
}

kagklis

@Component({
   // ...
})
export class ChartComponent implements AfterViewInit {
   private get size() {
      return {
         width: (3 * window.innerWidth) / 4,
         height: (3 * window.innerHeight) / 4,
      };
   }

kagklis

/// <reference lib="webworker" />
importScripts(
   'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js'
);

declare const Chart: any;
let canvas: any;
let chart: any;

function firstDraw(data: any): void {

kagklis

@Component({
   // ...
})
export class ChartComponent implements AfterViewInit {
   private currentWorker: Worker;
   private get size() {
      return {
         width: (3 * window.innerWidth) / 4,
         height: (3 * window.innerHeight) / 4,
      };

kagklis

@Component({
   // ...
})
export class ChartComponent implements AfterViewInit {
   @ViewChild('chartCanvas') chartCanvas!: any;
   private dataSubscription!: Subscription;
   public isLoading: boolean = true;

   constructor(private dataService: DataService) {}
   

kagklis

export const INIT_LENGTH = 500;

@Injectable({
   providedIn: 'root'
})
export class DataService {
   private dataLengthSubject = new BehaviorSubject<number>(INIT_LENGTH);
   private dataLength$ = this.dataLengthSubject.asObservable();
   public data$: Observable<ChartData> = this.dataLength$.pipe(
      debounceTime(1_000),

kagklis

@Component({
  // ...
})
export class ChartComponent implements AfterViewInit, OnDestroy {
   public dataLength: number = INIT_LENGTH;
   public isLoading: boolean = true;

   constructor(private dataService: DataService) { }

   public modelChange(newValue: number): void {

kagklis

<div>
   <input 
      type="range" 
      min="500" max="50000" step="500"
      [ngModel]="dataLength"
      (ngModelChange)="modelChange($event)"
   />
   <div>
      <div
         *ngIf="!chart"