diff --git a/src/app/Dashboard/AddCard.tsx b/src/app/Dashboard/AddCard.tsx
index f099c65ec..9e3ffa66c 100644
--- a/src/app/Dashboard/AddCard.tsx
+++ b/src/app/Dashboard/AddCard.tsx
@@ -40,7 +40,7 @@ import { dashboardConfigAddCardIntent, StateDispatch } from '@app/Shared/Redux/R
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { EmptyText } from '@app/Topology/Shared/EmptyText';
 import QuickSearchIcon from '@app/Topology/Shared/QuickSearchIcon';
-import { fakeServices } from '@app/utils/fakeData';
+import { fakeChartContext, fakeServices } from '@app/utils/fakeData';
 import { useFeatureLevel } from '@app/utils/useFeatureLevel';
 import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { portalRoot } from '@app/utils/utils';
@@ -103,6 +103,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { Observable, of } from 'rxjs';
+import { ChartContext } from './Charts/ChartContext';
 import { DashboardCardDescriptor, getConfigByTitle, getDashboardCards, PropControl } from './Dashboard';
 
 interface AddCardProps {
@@ -204,7 +205,12 @@ export const AddCard: React.FC<AddCardProps> = ({ variant, ..._props }) => {
       case 'icon-button':
         return (
           <Tooltip content={'Add card'}>
-            <Button data-quickstart-id={'dashboard-add-btn'} variant="plain" onClick={handleStart} style={{ padding: 0 }}>
+            <Button
+              data-quickstart-id={'dashboard-add-btn'}
+              variant="plain"
+              onClick={handleStart}
+              style={{ padding: 0 }}
+            >
               <QuickSearchIcon />
             </Button>
           </Tooltip>
@@ -408,7 +414,9 @@ export const CardGallery: React.FC<CardGalleryProps> = ({ selection, onSelect })
                     }}
                     className="non-interactive-overlay"
                   />
-                  <ServiceContext.Provider value={fakeServices}>{preview}</ServiceContext.Provider>
+                  <ServiceContext.Provider value={fakeServices}>
+                    <ChartContext.Provider value={fakeChartContext}>{preview}</ChartContext.Provider>
+                  </ServiceContext.Provider>
                 </div>
               ) : (
                 <Bullseye>
diff --git a/src/app/Dashboard/Charts/mbean/MBeanMetricsChartCard.tsx b/src/app/Dashboard/Charts/mbean/MBeanMetricsChartCard.tsx
index c6ebc880e..9b53b48a5 100644
--- a/src/app/Dashboard/Charts/mbean/MBeanMetricsChartCard.tsx
+++ b/src/app/Dashboard/Charts/mbean/MBeanMetricsChartCard.tsx
@@ -574,7 +574,7 @@ export const MBeanMetricsChartCardDescriptor: DashboardCardDescriptor = {
       themeColor={'blue'}
       chartKind={chartKinds[0].displayName}
       duration={60}
-      period={10}
+      period={1}
       span={12}
       isFullHeight
       isDraggable={false}
diff --git a/src/app/utils/fakeData.ts b/src/app/utils/fakeData.ts
index 73fbfda38..9ed3b7a95 100644
--- a/src/app/utils/fakeData.ts
+++ b/src/app/utils/fakeData.ts
@@ -36,6 +36,8 @@
  * SOFTWARE.
  */
 
+import { JFRMetricsChartController } from '@app/Dashboard/Charts/jfr/JFRMetricsChartController';
+import { MBeanMetricsChartController } from '@app/Dashboard/Charts/mbean/MBeanMetricsChartController';
 import { EventType } from '@app/Events/EventTypes';
 import { Notifications, NotificationsInstance } from '@app/Notifications/Notifications';
 import { Rule } from '@app/Rules/Rules';
@@ -44,6 +46,7 @@ import {
   ActiveRecordingFilterInput,
   ApiService,
   ArchivedRecording,
+  ChartControllerConfig,
   EventProbe,
   EventTemplate,
   MBeanMetrics,
@@ -56,8 +59,9 @@ import {
 import { LoginService } from '@app/Shared/Services/Login.service';
 import { CachedReportValue, ReportService, RuleEvaluation } from '@app/Shared/Services/Report.service';
 import { defaultServices, Services } from '@app/Shared/Services/Services';
+import { SettingsService } from '@app/Shared/Services/Settings.service';
 import { Target, TargetService } from '@app/Shared/Services/Target.service';
-import { from, Observable, of } from 'rxjs';
+import { Observable, of } from 'rxjs';
 
 export const fakeTarget: Target = {
   jvmId: 'rpZeYNB9wM_TEnXoJvAFuR0jdcUBXZgvkXiKhjQGFvY=',
@@ -148,6 +152,18 @@ class FakeReportService extends ReportService {
   }
 }
 
+class FakeSetting extends SettingsService {
+  chartControllerConfig(
+    _defaultConfig = {
+      minRefresh: 0.1,
+    }
+  ): ChartControllerConfig {
+    return {
+      minRefresh: 0.1,
+    };
+  }
+}
+
 class FakeApiService extends ApiService {
   constructor(target: TargetService, notifications: Notifications, login: LoginService) {
     super(target, notifications, login);
@@ -155,7 +171,7 @@ class FakeApiService extends ApiService {
 
   // MBean Metrics card
   getTargetMBeanMetrics(_target: Target, _queries: string[]): Observable<MBeanMetrics> {
-    return from([{ os: { processCpuLoad: 0 } }, { os: { processCpuLoad: 1 } }, { os: { processCpuLoad: 0.5 } }]);
+    return of({ os: { processCpuLoad: Math.random() } });
   }
 
   // JFR Metrics card
@@ -244,10 +260,22 @@ class FakeApiService extends ApiService {
 const target = new FakeTargetService();
 const api = new FakeApiService(target, NotificationsInstance, defaultServices.login);
 const reports = new FakeReportService(NotificationsInstance, defaultServices.login);
+const settings = new FakeSetting();
 
 export const fakeServices: Services = {
   ...defaultServices,
   target,
   api,
   reports,
+  settings,
+};
+
+export const fakeChartContext = {
+  jfrController: new JFRMetricsChartController(
+    fakeServices.api,
+    fakeServices.target,
+    fakeServices.notificationChannel,
+    fakeServices.settings
+  ),
+  mbeanController: new MBeanMetricsChartController(fakeServices.api, fakeServices.target, fakeServices.settings),
 };