Auto resize graphs on window resize

fixes #1607
This commit is contained in:
softsimon 2022-07-07 15:46:13 +02:00
parent 0417d3b70d
commit e06819fc6f
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
2 changed files with 19 additions and 2 deletions

View File

@ -1,5 +1,5 @@
import { createChart, CrosshairMode, isBusinessDay } from 'lightweight-charts'; import { createChart, CrosshairMode, isBusinessDay } from 'lightweight-charts';
import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; import { ChangeDetectionStrategy, Component, ElementRef, HostListener, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
@Component({ @Component({
selector: 'app-lightweight-charts-area', selector: 'app-lightweight-charts-area',
@ -25,6 +25,15 @@ export class LightweightChartsAreaComponent implements OnInit, OnChanges, OnDest
private element: ElementRef, private element: ElementRef,
) { } ) { }
@HostListener('window:resize', ['$event'])
resizeCanvas(): void {
this.width = this.element.nativeElement.parentElement.offsetWidth;
this.chart.applyOptions({
width: this.width,
height: this.height,
});
}
ngOnInit() { ngOnInit() {
this.width = this.element.nativeElement.parentElement.offsetWidth; this.width = this.element.nativeElement.parentElement.offsetWidth;
this.container = document.createElement('div'); this.container = document.createElement('div');

View File

@ -1,5 +1,5 @@
import { createChart, CrosshairMode } from 'lightweight-charts'; import { createChart, CrosshairMode } from 'lightweight-charts';
import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; import { ChangeDetectionStrategy, Component, ElementRef, HostListener, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
@Component({ @Component({
selector: 'app-lightweight-charts', selector: 'app-lightweight-charts',
@ -21,6 +21,14 @@ export class LightweightChartsComponent implements OnInit, OnChanges, OnDestroy
private element: ElementRef, private element: ElementRef,
) { } ) { }
@HostListener('window:resize', ['$event'])
resizeCanvas(): void {
this.chart.applyOptions({
width: this.element.nativeElement.parentElement.offsetWidth,
height: this.height,
});
}
ngOnInit() { ngOnInit() {
this.chart = createChart(this.element.nativeElement, { this.chart = createChart(this.element.nativeElement, {
width: this.element.nativeElement.parentElement.offsetWidth, width: this.element.nativeElement.parentElement.offsetWidth,