diff --git a/apps/web/src/app/(app)/[organizationId]/[projectId]/overview-metrics.tsx b/apps/web/src/app/(app)/[organizationId]/[projectId]/overview-metrics.tsx
index 36772e5a..05a6acd4 100644
--- a/apps/web/src/app/(app)/[organizationId]/[projectId]/overview-metrics.tsx
+++ b/apps/web/src/app/(app)/[organizationId]/[projectId]/overview-metrics.tsx
@@ -205,7 +205,12 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
         </WidgetHead>
         <WidgetBody>
           <Suspense fallback={<ChartLoading />}>
-            <Chart hideID {...selectedMetric} chartType="linear" />
+            <Chart
+              key={selectedMetric.id}
+              hideID
+              {...selectedMetric}
+              chartType="linear"
+            />
           </Suspense>
         </WidgetBody>
       </Widget>
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
index db9d5a2a..8a42ef2c 100644
--- a/apps/web/src/middleware.ts
+++ b/apps/web/src/middleware.ts
@@ -4,7 +4,11 @@ import { authMiddleware } from '@clerk/nextjs';
 // Please edit this to allow other routes to be public as needed.
 // See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
 export default authMiddleware({
-  publicRoutes: ['/share/overview/:id', '/api/trpc/chart.chart'],
+  publicRoutes: [
+    '/share/overview/:id',
+    '/api/trpc/chart.chart',
+    '/api/trpc/chart.values',
+  ],
 });
 
 export const config = {