diff --git a/webui/src/app/charting/chart.component.html b/webui/src/app/charting/chart.component.html
index 0012a34b..6c6c2c7e 100644
--- a/webui/src/app/charting/chart.component.html
+++ b/webui/src/app/charting/chart.component.html
@@ -16,15 +16,21 @@ <h4>
       </mat-card-title>
     </mat-card-header>
     <mat-card-content>
-      <canvas
-        baseChart
-        [data]="chartConfig.data"
-        [options]="chartConfig.options"
-        [type]="chartConfig.type"
-        [height]="height"
-        [width]="width"
+      <div
+        [class]="
+          breakpoints.sizeAtLeast('Large') ? 'app-chart' : 'app-chart-small'
+        "
       >
-      </canvas>
+        <canvas
+          baseChart
+          [data]="chartConfig.data"
+          [options]="chartConfig.options"
+          [type]="chartConfig.type"
+          [height]="height"
+          [width]="width"
+        >
+        </canvas>
+      </div>
     </mat-card-content>
   </mat-card>
 </ng-container>
diff --git a/webui/src/app/charting/chart.component.scss b/webui/src/app/charting/chart.component.scss
index 1f1cf934..78e299ff 100644
--- a/webui/src/app/charting/chart.component.scss
+++ b/webui/src/app/charting/chart.component.scss
@@ -8,3 +8,12 @@
     opacity: 1;
   }
 }
+
+.app-chart {
+  position: relative;
+}
+
+.app-chart-small {
+  position: relative;
+  width: calc(40vw + 100px);
+}
diff --git a/webui/src/app/charting/chart.component.ts b/webui/src/app/charting/chart.component.ts
index 787a96e6..b82feddf 100644
--- a/webui/src/app/charting/chart.component.ts
+++ b/webui/src/app/charting/chart.component.ts
@@ -12,6 +12,7 @@ import {
 import { MatIcon } from "@angular/material/icon";
 import { MatTooltip } from "@angular/material/tooltip";
 import { ThemeInfoService } from "../themes/theme-info.service";
+import { BreakpointsService } from "../layout/breakpoints.service";
 import { ChartAdapter } from "./types";
 
 @Component({
@@ -35,6 +36,7 @@ export class ChartComponent<Data = unknown, Type extends ChartType = ChartType>
 {
   private themeInfo = inject(ThemeInfoService);
   private transloco = inject(TranslocoService);
+  breakpoints = inject(BreakpointsService);
 
   @Input() title: string;
   @Input() $data: Observable<Data> = new Observable();