diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx
index 752d31ef75c18d..a9012278982858 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx
@@ -75,10 +75,11 @@ export default function PageViewsBarChart() {
           grid={{ horizontal: true }}
           slotProps={{
             legend: {
-              labelStyle: { fontSize: 14 },
+              position: { vertical: 'top', horizontal: 'right' },
               itemMarkWidth: 12,
               itemMarkHeight: 12,
-              position: { vertical: 'top', horizontal: 'right' },
+              itemGap: 24,
+              labelStyle: { fontSize: 14 },
             },
           }}
         />
diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx b/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx
index 5b75b1a1387263..a6032f44609c9b 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx
@@ -128,6 +128,7 @@ export default function PageViewsChart() {
                 labelStyle: { fontSize: 14 },
                 itemMarkWidth: 12,
                 itemMarkHeight: 12,
+                itemGap: 24,
                 position: { vertical: 'top', horizontal: 'right' },
               },
             }}