diff --git a/dashboard/src/components/SystemMetrics.vue b/dashboard/src/components/SystemMetrics.vue
index dbf2ee94a..4a20e6ace 100644
--- a/dashboard/src/components/SystemMetrics.vue
+++ b/dashboard/src/components/SystemMetrics.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted, onUnmounted, useTemplateRef, nextTick, watch } from 'vue';
+import { ref, onMounted, onUnmounted, useTemplateRef, nextTick } from 'vue';
 import { SingleSelect, MultiSelect } from 'pankow';
 import Section from './Section.vue';
 import SystemModel from '../models/SystemModel.js';
diff --git a/dashboard/src/components/app/Graphs.vue b/dashboard/src/components/app/Graphs.vue
index ed2241127..fd4fe9cb4 100644
--- a/dashboard/src/components/app/Graphs.vue
+++ b/dashboard/src/components/app/Graphs.vue
@@ -43,44 +43,71 @@ const appMemory = app.memoryLimit || app.manifest.memoryLimit || 256*1024*1024;
 let systemCpus = {};
 let metricStream = null;
 
+function createDatasets() {
+  const datasets = {
+      cpu: [{ label: 'CPU', color: '#9ad0f5', stack: 'cpu', data: [] }],
+      memory: [{ label: 'Memory', color: '#9ad0f5', stack: 'memory', data: [] }],
+      disk: [
+        { label: 'Read', color: '#9ad0f5', stack: 'read', data: [] },
+        { label: 'Write', color: '#ffb1c1', stack: 'write', data: [] }
+      ],
+      network: [
+        { label: 'RX', color: '#9ad0f5', stack: 'rx', data: [] },
+        { label: 'TX', color: '#ffb1c1', stack: 'tx', data: [] }
+      ],
+  };
+  return datasets;
+}
+
 async function liveRefresh() {
   metricStream = await appsModel.getMetricStream(app.id);
   metricStream.onerror = (error) => console.log('event stream error:', error);
   metricStream.onmessage = (message) => {
     const data = JSON.parse(message.data);
 
-    cpuGraphItem.value.pushData(data.cpu);
-    memoryGraphItem.value.pushData(data.memory);
-    diskGraphItem.value.pushData(data.blockReadRate, data.blockWriteRate);
-    networkGraphItem.value.pushData(data.networkReadRate, data.networkWriteRate);
+    cpuGraphItem.value.pushData(0, data[app.id].cpu);
+    memoryGraphItem.value.pushData(0, data[app.id].memory);
+    diskGraphItem.value.pushData(0, data[app.id].blockReadRate, data[app.id].blockWriteRate);
+    networkGraphItem.value.pushData(0, data[app.id].networkReadRate, data[app.id].networkWriteRate);
 
-    blockReadTotal.value = prettyDecimalSize(data.blockReadTotal);
-    blockWriteTotal.value = prettyDecimalSize(data.blockWriteTotal);
-    networkReadTotal.value = prettyDecimalSize(data.networkReadTotal);
-    networkWriteTotal.value = prettyDecimalSize(data.networkWriteTotal);
+    blockReadTotal.value = prettyDecimalSize(data[app.id].blockReadTotal);
+    blockWriteTotal.value = prettyDecimalSize(data[app.id].blockWriteTotal);
+    networkReadTotal.value = prettyDecimalSize(data[app.id].networkReadTotal);
+    networkWriteTotal.value = prettyDecimalSize(data[app.id].networkWriteTotal);
   };
 }
 
-async function onPeriodChange() {
+async function rebuild() {
   if (metricStream) {
     metricStream.close();
     metricStream = null;
   }
 
+  const datasets = createDatasets();
+
+  if (period.value.hours !== 0) {
+    const [error, metrics] = await appsModel.getMetrics(app.id, { fromSecs: period.value.hours * 60 * 60, intervalSecs: period.value.intervalSecs });
+    if (error) return console.error(error);
+
+      datasets.cpu[0].data = metrics[app.id].cpu;
+      datasets.memory[0].data = metrics[app.id].memory;
+      datasets.disk[0].data = metrics[app.id].blockReadRate;
+      datasets.disk[1].data = metrics[app.id].blockWriteRate;
+      datasets.network[0].data = metrics[app.id].networkReadRate;
+      datasets.network[1].data = metrics[app.id].networkWriteRate;
+
+      networkReadTotal.value = prettyDecimalSize(metrics.networkReadTotal);
+      networkWriteTotal.value = prettyDecimalSize(metrics.networkWriteTotal);
+      blockReadTotal.value = prettyDecimalSize(metrics.blockReadTotal);
+      blockWriteTotal.value = prettyDecimalSize(metrics.blockWriteTotal);
+  }
+
+  cpuGraphItem.value.setDatasets(datasets.cpu);
+  memoryGraphItem.value.setDatasets(datasets.memory);
+  diskGraphItem.value.setDatasets(datasets.disk);
+  networkGraphItem.value.setDatasets(datasets.network);
+
   if (period.value.hours === 0) return await liveRefresh();
-
-  const [error, metrics] = await appsModel.getMetrics(app.id, { fromSecs: period.value.hours * 60 * 60, intervalSecs: period.value.intervalSecs });
-  if (error) return console.error(error);
-
-  cpuGraphItem.value.setData(metrics.cpu);
-  memoryGraphItem.value.setData(metrics.memory);
-  diskGraphItem.value.setData(metrics.blockReadRate, metrics.blockWriteRate);
-  networkGraphItem.value.setData(metrics.networkReadRate, metrics.networkWriteRate);
-
-  networkReadTotal.value = prettyDecimalSize(metrics.networkReadTotal);
-  networkWriteTotal.value = prettyDecimalSize(metrics.networkWriteTotal);
-  blockReadTotal.value = prettyDecimalSize(metrics.blockReadTotal);
-  blockWriteTotal.value = prettyDecimalSize(metrics.blockWriteTotal);
 }
 
 onMounted(async () => {
@@ -92,7 +119,7 @@ onMounted(async () => {
   busy.value = false;
   await nextTick();
 
-  await onPeriodChange();
+  await rebuild();
 });
 
 onUnmounted(async () => {
@@ -103,15 +130,13 @@ onUnmounted(async () => {
 
 <template>
     <div class="graphs" v-if="!busy">
-      <div style="text-align: right"><SingleSelect @select="onPeriodChange()" v-model="period" :options="periods" option-label="label"/></div>
+      <div style="text-align: right"><SingleSelect @select="rebuild()" v-model="period" :options="periods" option-label="label"/></div>
 
       <GraphItem ref="cpuGraphItem"
         :title="$t('system.cpuUsage.title')"
         :subtext="`${app.cpuQuota}% of ${systemCpus.length} Core ${systemCpus[0].model}`"
         :period="period"
         yscale="cpu"
-        :dataset-labels="['CPU']"
-        :dataset-colors="['#9ad0f5']"
         :cpu-count="systemCpus.length"
         :high-mark="systemCpus.length * app.cpuQuota/100"
         >
@@ -122,8 +147,6 @@ onUnmounted(async () => {
         :subtext="`RAM: ${prettyBinarySize(app.memoryLimit || app.manifest.memoryLimit || 256*1024*1024)}`"
         :period="period"
         yscale="memory"
-        :dataset-labels="['Memory']"
-        :dataset-colors="['#9ad0f5']"
         :memory="appMemory"
         :high-mark="appMemory"
         >
@@ -134,8 +157,6 @@ onUnmounted(async () => {
         :subtext="$t('app.graphs.diskIOTotal', { read: blockReadTotal, write: blockWriteTotal })"
         :period="period"
         yscale="disk"
-        :dataset-labels="['Read', 'Write']"
-        :dataset-colors="['#9ad0f5', '#ffb1c1']"
         >
       </GraphItem>
 
@@ -144,8 +165,6 @@ onUnmounted(async () => {
         :subtext="$t('app.graphs.networkIOTotal', { inbound: networkReadTotal, outbound: networkWriteTotal })"
         :period="period"
         yscale="network"
-        :dataset-labels="['RX', 'TX']"
-        :dataset-colors="['#9ad0f5', '#ffb1c1']"
         >
       </GraphItem>
     </div>
diff --git a/src/metrics.js b/src/metrics.js
index 3b8692bb7..d22f1ef0f 100644
--- a/src/metrics.js
+++ b/src/metrics.js
@@ -363,11 +363,11 @@ async function get(options) {
 
     if (options.system) result.system = await readSystemFromGraphite(options);
 
-    for (const appId of options.appIds) {
+    for (const appId of (options.appIds || [])) {
         result[appId] = await getContainer(appId, options);
     }
 
-    for (const serviceId of options.serviceIds) {
+    for (const serviceId of (options.serviceIds || [])) {
         result[serviceId] = await getContainer(serviceId, options);
     }
 
@@ -485,11 +485,11 @@ async function getStream(options) {
     });
 
     if (options.system) pipeSystemMetrics(metricsStream, ac);
-    for (const appId of options.appIds) {
+    for (const appId of (options.appIds || [])) {
         pipeContainerMetrics(appId, metricsStream, ac);
     }
 
-    for (const serviceId of options.serviceIds) {
+    for (const serviceId of (options.serviceIds || [])) {
         pipeContainerMetrics(serviceId, metricsStream, ac);
     }
 
diff --git a/src/routes/apps.js b/src/routes/apps.js
index 6cd454e10..cbd16061a 100644
--- a/src/routes/apps.js
+++ b/src/routes/apps.js
@@ -1085,7 +1085,7 @@ async function getMetrics(req, res, next) {
 async function getMetricStream(req, res, next) {
     if (req.headers.accept !== 'text/event-stream') return next(new HttpError(400, 'This API call requires EventStream'));
 
-    const [error, metricStream] = await safe(metrics.getStream(req.resources.app.id, { appIds: [req.resources.app.id] }));
+    const [error, metricStream] = await safe(metrics.getStream({ appIds: [req.resources.app.id] }));
     if (error) return next(BoxError.toHttpError(error));
 
     res.writeHead(200, {
diff --git a/src/routes/services.js b/src/routes/services.js
index 0e27f63ae..b59a5edd7 100644
--- a/src/routes/services.js
+++ b/src/routes/services.js
@@ -146,7 +146,7 @@ async function getMetrics(req, res, next) {
     const intervalSecs = parseInt(req.query.intervalSecs);
     const noNullPoints = !!req.query.noNullPoints;
 
-    const [error, result] = await safe(metrics.get(req.params.service, { fromSecs, intervalSecs, noNullPoints, serviceIds: [req.params.service] }));
+    const [error, result] = await safe(metrics.get({ fromSecs, intervalSecs, noNullPoints, serviceIds: [req.params.service] }));
     if (error) return next(new HttpError(500, error));
 
     next(new HttpSuccess(200, result));