diff --git a/web/src/elements/charts/AdminLoginsChart.ts b/web/src/elements/charts/AdminLoginsChart.ts
index 4b827a781..6a89f6645 100644
--- a/web/src/elements/charts/AdminLoginsChart.ts
+++ b/web/src/elements/charts/AdminLoginsChart.ts
@@ -1,5 +1,5 @@
 import { customElement } from "lit-element";
-import { ChartDataset } from "chart.js";
+import { ChartData } from "chart.js";
 import { AdminApi, LoginMetrics } from "authentik-api";
 import { AKChart } from "./Chart";
 import { DEFAULT_CONFIG } from "../../api/Config";
@@ -11,31 +11,33 @@ export class AdminLoginsChart extends AKChart<LoginMetrics> {
         return new AdminApi(DEFAULT_CONFIG).adminMetricsList();
     }
 
-    getDatasets(data: LoginMetrics): ChartDataset[] {
-        return [
-            {
-                label: "Failed Logins",
-                backgroundColor: "rgba(201, 25, 11, .5)",
-                spanGaps: true,
-                data: data.loginsFailedPer1h?.map((cord) => {
-                    return {
-                        x: cord.xCord || 0,
-                        y: cord.yCord || 0,
-                    };
-                }) || [],
-            },
-            {
-                label: "Successful Logins",
-                backgroundColor: "rgba(189, 229, 184, .5)",
-                spanGaps: true,
-                data: data.loginsPer1h?.map((cord) => {
-                    return {
-                        x: cord.xCord || 0,
-                        y: cord.yCord || 0,
-                    };
-                }) || [],
-            },
-        ];
+    getChartData(data: LoginMetrics): ChartData {
+        return {
+            datasets: [
+                {
+                    label: "Failed Logins",
+                    backgroundColor: "rgba(201, 25, 11, .5)",
+                    spanGaps: true,
+                    data: data.loginsFailedPer1h?.map((cord) => {
+                        return {
+                            x: cord.xCord || 0,
+                            y: cord.yCord || 0,
+                        };
+                    }) || [],
+                },
+                {
+                    label: "Successful Logins",
+                    backgroundColor: "rgba(189, 229, 184, .5)",
+                    spanGaps: true,
+                    data: data.loginsPer1h?.map((cord) => {
+                        return {
+                            x: cord.xCord || 0,
+                            y: cord.yCord || 0,
+                        };
+                    }) || [],
+                },
+            ]
+        };
     }
 
 }
diff --git a/web/src/elements/charts/ApplicationAuthorizeChart.ts b/web/src/elements/charts/ApplicationAuthorizeChart.ts
index d9f513b45..4484de7f4 100644
--- a/web/src/elements/charts/ApplicationAuthorizeChart.ts
+++ b/web/src/elements/charts/ApplicationAuthorizeChart.ts
@@ -2,7 +2,7 @@ import { customElement, property } from "lit-element";
 import { Coordinate, CoreApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AKChart } from "./Chart";
-import { ChartDataset } from "chart.js";
+import { ChartData } from "chart.js";
 
 @customElement("ak-charts-application-authorize")
 export class ApplicationAuthorizeChart extends AKChart<Coordinate[]> {
@@ -14,20 +14,22 @@ export class ApplicationAuthorizeChart extends AKChart<Coordinate[]> {
         return new CoreApi(DEFAULT_CONFIG).coreApplicationsMetrics({ slug: this.applicationSlug });
     }
 
-    getDatasets(data: Coordinate[]): ChartDataset[] {
-        return [
-            {
-                label: "Authorizations",
-                backgroundColor: "rgba(189, 229, 184, .5)",
-                spanGaps: true,
-                data: data.map((cord) => {
-                    return {
-                        x: cord.xCord || 0,
-                        y: cord.yCord || 0,
-                    };
-                }) || [],
-            },
-        ];
+    getChartData(data: Coordinate[]): ChartData {
+        return {
+            datasets: [
+                {
+                    label: "Authorizations",
+                    backgroundColor: "rgba(189, 229, 184, .5)",
+                    spanGaps: true,
+                    data: data.map((cord) => {
+                        return {
+                            x: cord.xCord || 0,
+                            y: cord.yCord || 0,
+                        };
+                    }) || [],
+                },
+            ]
+        };
     }
 
 }
diff --git a/web/src/elements/charts/Chart.ts b/web/src/elements/charts/Chart.ts
index 8a425dcc3..5167260ca 100644
--- a/web/src/elements/charts/Chart.ts
+++ b/web/src/elements/charts/Chart.ts
@@ -1,5 +1,5 @@
 import { css, CSSResult, html, LitElement, TemplateResult } from "lit-element";
-import { Chart, ChartDataset, Tick, LineController, TimeScale, LinearScale, BarController, BarElement, ChartConfiguration, Legend } from "chart.js";
+import { Chart, ChartDataset, Tick, LineController, TimeScale, LinearScale, BarController, BarElement, ChartConfiguration, Legend, ChartData } from "chart.js";
 import "chartjs-adapter-moment";
 
 Chart.register(LineController, TimeScale, LinearScale, BarController, BarElement, Legend);
@@ -7,7 +7,7 @@ Chart.register(LineController, TimeScale, LinearScale, BarController, BarElement
 export abstract class AKChart<T> extends LitElement {
 
     abstract apiRequest(): Promise<T>;
-    abstract getDatasets(data: T): ChartDataset[];
+    abstract getChartData(data: T): ChartData;
 
     chart?: Chart;
 
@@ -39,9 +39,7 @@ export abstract class AKChart<T> extends LitElement {
     configureChart(data: T, ctx: CanvasRenderingContext2D): Chart {
         const config = {
             type: "bar",
-            data: {
-                datasets: this.getDatasets(data),
-            },
+            data: this.getChartData(data),
             options: {
                 maintainAspectRatio: false,
                 scales: {
diff --git a/web/src/elements/charts/UserChart.ts b/web/src/elements/charts/UserChart.ts
index 854bcc699..e68e0780d 100644
--- a/web/src/elements/charts/UserChart.ts
+++ b/web/src/elements/charts/UserChart.ts
@@ -2,7 +2,7 @@ import { customElement, property } from "lit-element";
 import { CoreApi, UserMetrics } from "authentik-api";
 import { AKChart } from "./Chart";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { ChartDataset } from "chart.js";
+import { ChartData } from "chart.js";
 
 @customElement("ak-charts-user")
 export class UserChart extends AKChart<UserMetrics> {
@@ -16,42 +16,44 @@ export class UserChart extends AKChart<UserMetrics> {
         });
     }
 
-    getDatasets(data: UserMetrics): ChartDataset[] {
-        return [
-            {
-                label: "Failed Logins",
-                backgroundColor: "rgba(201, 25, 11, .5)",
-                spanGaps: true,
-                data: data.loginsFailedPer1h?.map((cord) => {
-                    return {
-                        x: cord.xCord || 0,
-                        y: cord.yCord || 0,
-                    };
-                }) || [],
-            },
-            {
-                label: "Successful Logins",
-                backgroundColor: "rgba(189, 229, 184, .5)",
-                spanGaps: true,
-                data: data.loginsPer1h?.map((cord) => {
-                    return {
-                        x: cord.xCord || 0,
-                        y: cord.yCord || 0,
-                    };
-                }) || [],
-            },
-            {
-                label: "Application authorizations",
-                backgroundColor: "rgba(43, 154, 243, .5)",
-                spanGaps: true,
-                data: data.authorizationsPer1h?.map((cord) => {
-                    return {
-                        x: cord.xCord || 0,
-                        y: cord.yCord || 0,
-                    };
-                }) || [],
-            },
-        ];
+    getChartData(data: UserMetrics): ChartData {
+        return {
+            datasets: [
+                {
+                    label: "Failed Logins",
+                    backgroundColor: "rgba(201, 25, 11, .5)",
+                    spanGaps: true,
+                    data: data.loginsFailedPer1h?.map((cord) => {
+                        return {
+                            x: cord.xCord || 0,
+                            y: cord.yCord || 0,
+                        };
+                    }) || [],
+                },
+                {
+                    label: "Successful Logins",
+                    backgroundColor: "rgba(189, 229, 184, .5)",
+                    spanGaps: true,
+                    data: data.loginsPer1h?.map((cord) => {
+                        return {
+                            x: cord.xCord || 0,
+                            y: cord.yCord || 0,
+                        };
+                    }) || [],
+                },
+                {
+                    label: "Application authorizations",
+                    backgroundColor: "rgba(43, 154, 243, .5)",
+                    spanGaps: true,
+                    data: data.authorizationsPer1h?.map((cord) => {
+                        return {
+                            x: cord.xCord || 0,
+                            y: cord.yCord || 0,
+                        };
+                    }) || [],
+                },
+            ]
+        };
     }
 
 }