diff --git a/dashboard/src/components/GraphItem.vue b/dashboard/src/components/GraphItem.vue
new file mode 100644
index 000000000..e7633b727
--- /dev/null
+++ b/dashboard/src/components/GraphItem.vue
@@ -0,0 +1,236 @@
+
+<script setup>
+
+import moment from 'moment-timezone';
+import { onMounted, useTemplateRef, watch } from 'vue';
+import Chart from 'chart.js/auto';
+import { prettyDecimalSize } from 'pankow/utils';
+
+const LIVE_REFRESH_INTERVAL_MSECS = 500;
+const LIVE_REFRESH_HISTORY_MSECS = 5*60*1000; // last 5 mins
+
+const graphNode = useTemplateRef('graphNode');
+
+let graph = null;
+let liveRefreshIntervalId = null;
+
+const props = defineProps({
+  title: String,
+  subtext: String,
+  period: Object, // { hours, format, tooltpFormat }
+  datasetLabels: {
+    type: Array,
+    validator: (val) => Array.isArray(val) && val.every(item => typeof item === 'string')
+  },
+  yscale: String, // cpu, memory
+  memory: Object,
+  cpu: Object
+});
+
+function createGraphOptions({ yscale, period }) {
+  const now = Date.now();
+
+  return {
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        callbacks: {
+          title: (tooltipItem) => moment(tooltipItem[0].raw.x).format(period.tooltipFormat),
+          label: (tooltipItem) => yscale.ticks.callback(tooltipItem.raw.y)
+        }
+      }
+    },
+    scales: {
+      x: {
+        // we used to use 'time' type but it relies on the data to generate ticks. we may not have data for our time periods
+        type: 'linear',
+        min: now - (period.hours === 0 ? LIVE_REFRESH_HISTORY_MSECS : period.hours*60*60*1000),
+        max: now,
+        ticks: {
+          autoSkip: true, // skip tick labels as needed
+          autoSkipPadding: 20, // padding between ticks
+          maxRotation: 0, // don't rotate the labels
+          count: 7, // tick labels to show. anything more than 7 will not work for "7 days"
+          callback: function (value) {
+            if (period.hours === 0) return `${5-(value-this.min)/60000}min`;
+            return moment(value).format(period.format);
+          },
+          stepSize: period.hours === 0 ? 60*1000 : null // // for realtime graph, generate steps of 1min and appropriate tick text
+        },
+        grid: {
+          drawOnChartArea: false,
+        },
+      },
+      y: yscale,
+    },
+    interaction: {
+      intersect: false,
+      mode: 'nearest',
+      axis: 'x'
+    }
+  };
+}
+
+function transformData(data) {
+  const x = data[1]*1000; // convert to msecs
+  // in non-memory case, for relative values like cpu, if null make it 0
+  const y = props.yscale === 'memory' ? (data[0] / 1024 / 1024 / 1024).toFixed(2) : (data[0] || 0);
+  return { x, y };
+}
+
+function setData(...data) {
+  for (const [index, items] of data.entries()) {
+    graph.data.datasets[index].data = items.map(transformData);
+  }
+  graph.update('none');
+}
+
+function pruneGraphData(dataset, options) {
+  while (dataset.data.length && (dataset.data[0].x < options.scales.x.min)) { // remove elements beyond our time window
+    dataset.data.shift();
+  }
+}
+
+function advance() {
+  graph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
+  graph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
+  graph.update('none');
+}
+
+function pushData(...data) {
+  for (const [index, item] of data.entries()) {
+    graph.data.datasets[index].data.push(transformData(item));
+    pruneGraphData(graph.data.datasets[index], graph.options);
+  }
+  graph.update('none');
+}
+
+function onPeriodChanged() {
+  if (liveRefreshIntervalId) {
+    clearInterval(liveRefreshIntervalId);
+    liveRefreshIntervalId = null;
+  }
+
+  const data = { datasets: [] };
+
+  for (const label of props.datasetLabels) {
+    data.datasets.push({
+      label: label,
+      data: [],
+      pointRadius: 0,
+      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
+      tension: 0.4,
+      showLine: true,
+      fill: true
+    });
+  }
+
+  let yscale = null;
+
+  if (props.yscale === 'cpu') {
+    yscale = {
+      type: 'linear',
+      min: 0,
+      max: 4 * 100,
+      ticks: {
+        callback: (value) => `${value.toFixed(2)}%`,
+        maxTicksLimit: 6 // max tick labels to show
+      },
+      beginAtZero: true,
+    };
+  } else if (props.yscale === 'memory') {
+    const giB = 1024 * 1024 * 1024;
+    const roundedMemory = Math.ceil(props.memory.memory / giB) * giB; // we have to scale up so that the graph can show the data!
+    const roundedSwap = Math.ceil(props.memory.swap / giB) * giB;
+
+    yscale = {
+      type: 'linear',
+      min: 0,
+      max: (roundedMemory + roundedSwap)/ giB,
+      ticks: {
+        stepSize: 1,
+        autoSkip: true, // skip tick labels as needed
+        autoSkipPadding: 20, // padding between ticks
+        callback: (value) => `${value} GiB`,
+        maxTicksLimit: 8 // max tick labels to show
+      },
+      beginAtZero: true,
+      stacked: true,
+    };
+  } else if (props.yscale === 'disk') {
+    yscale = {
+      type: 'linear',
+      min: 0,
+      grace: 100*1000, // add 100kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
+      ticks: {
+        callback: (value) => `${prettyDecimalSize(value)}ps`,
+        maxTicksLimit: 6 // max tick labels to show
+      },
+      beginAtZero: true,
+      stacked: false,
+    };
+  } else if (props.yscale === 'network') {
+    yscale = {
+      type: 'linear',
+      min: 0,
+      grace: 50*1000, // add 50kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
+      ticks: {
+        callback: (value) => `${prettyDecimalSize(value)}ps`,
+        maxTicksLimit: 6 // max tick labels to show
+      },
+      beginAtZero: true,
+      stacked: false,
+    };
+  }
+
+  // this sets a min 'x' based on current timestamp. so it has to re-created every time the period changes
+  const graphOptions = createGraphOptions({ yscale, period: props.period });
+
+  if (!graph) {
+    graph = new Chart(graphNode.value, { type: 'line', data, options: graphOptions });
+  } else {
+    graph.data = data;
+    graph.options = graphOptions;
+    graph.update('none');
+  }
+
+  // advances the time window. this is independent of incoming data vis pushData()
+  if (props.period.hours === 0) liveRefreshIntervalId = setInterval(advance, LIVE_REFRESH_INTERVAL_MSECS);
+}
+
+watch(() => props.period, onPeriodChanged);
+
+onMounted(async function () {
+    await onPeriodChanged();
+});
+
+defineExpose({
+  setData,
+  pushData,
+});
+
+</script>
+
+<template>
+  <label>{{ title }} <span class="pull-right text-small">{{ subtext }}</span></label>
+  <div class="graph">
+    <canvas ref="graphNode"></canvas>
+  </div>
+</template>
+
+<style scoped>
+
+.graphs label {
+  margin: 16px 0;
+}
+
+.graph {
+  position: relative;
+  width: 100%;
+  height: 160px;
+}
+
+</style>
diff --git a/dashboard/src/components/SystemMetrics.vue b/dashboard/src/components/SystemMetrics.vue
index 3686501a3..901c41e18 100644
--- a/dashboard/src/components/SystemMetrics.vue
+++ b/dashboard/src/components/SystemMetrics.vue
@@ -4,13 +4,12 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';
-import Chart from 'chart.js/auto';
-import moment from 'moment-timezone';
-import { SingleSelect, Spinner } from 'pankow';
+import { ref, onMounted, onUnmounted, useTemplateRef, nextTick } from 'vue';
+import { SingleSelect } from 'pankow';
 import Section from './Section.vue';
 import SystemModel from '../models/SystemModel.js';
 import { prettyDecimalSize } from 'pankow/utils';
+import GraphItem from './GraphItem.vue';
 
 const systemModel = SystemModel.create();
 
@@ -24,12 +23,12 @@ const periods = [
   { hours: 24*30, label: t('app.graphs.period.30d'), format: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' },
 ];
 
-const busy = ref(false);
+const busy = ref(true);
 const period = ref(periods[0]);
-const cpuGraphNode = useTemplateRef('cpuGraphNode');
-const memoryGraphNode = useTemplateRef('memoryGraphNode');
-const networkGraphNode = useTemplateRef('networkGraphNode');
-const diskGraphNode = useTemplateRef('diskGraphNode');
+const cpuGraphItem = useTemplateRef('cpuGraphItem');
+const memoryGraphItem = useTemplateRef('memoryGraphItem');
+const diskGraphItem = useTemplateRef('diskGraphItem');
+const networkGraphItem = useTemplateRef('networkGraphItem');
 
 const networkReadTotal = ref(0);
 const networkWriteTotal = ref(0);
@@ -39,34 +38,9 @@ const blockWriteTotal = ref(0);
 
 let systemMemory = {};
 let systemCpus = {};
-let cpuGraph = null;
-let memoryGraph = null;
-let diskGraph = null;
-let networkGraph = null;
 let metricStream = null;
 
 const LIVE_REFRESH_INTERVAL_MSECS = 500;
-const LIVE_REFRESH_HISTORY_MSECS = 5*60*1000; // last 5 mins
-
-function pruneGraphData(dataset, options) {
-  while (dataset.data.length && (dataset.data[0].x < options.scales.x.min)) { // remove elements beyond our tme window
-    dataset.data.shift();
-  }
-}
-
-function transformGiB(data) {
-  return {
-    x: data[1]*1000,
-    y: (data[0] / 1024 / 1024 / 1024).toFixed(2)
-  };
-}
-
-function transformMsecs(data) {
-  return {
-    x: data[1]*1000,
-    y: data[0] || 0 // for relative values like cpu, if null make it 0
-  };
-}
 
 async function liveRefresh() {
   metricStream = await systemModel.getMetricStream(LIVE_REFRESH_INTERVAL_MSECS);
@@ -74,340 +48,40 @@ async function liveRefresh() {
   metricStream.onmessage = (message) => {
     const data = JSON.parse(message.data);
 
-    ///////////// CPU Graph
-    cpuGraph.data.datasets[0].data.push(transformMsecs(data.cpu));
-    pruneGraphData(cpuGraph.data.datasets[0], cpuGraph.options);
-    cpuGraph.update('none');
-
-    ///////////// Memory Graph
-    memoryGraph.data.datasets[0].data.push(transformGiB(data.memory));
-    pruneGraphData(memoryGraph.data.datasets[0], memoryGraph.options);
-
-    memoryGraph.data.datasets[1].data.push(transformGiB(data.memory));
-    pruneGraphData(memoryGraph.data.datasets[1], memoryGraph.options);
-
-    memoryGraph.update('none');
-
-    ///////////// Disk Graph
-    diskGraph.data.datasets[0].data.push(transformMsecs(data.blockReadRate));
-    pruneGraphData(memoryGraph.data.datasets[0], memoryGraph.options);
-
-    diskGraph.data.datasets[1].data.push(transformMsecs(data.blockWriteRate));
-    pruneGraphData(diskGraph.data.datasets[1], diskGraph.options);
-
-    diskGraph.update('none');
+    cpuGraphItem.value.pushData(data.cpu);
+    memoryGraphItem.value.pushData(data.memory, data.swap);
+    diskGraphItem.value.pushData(data.blockReadRate, data.blockWriteRate);
+    networkGraphItem.value.pushData(data.networkReadRate, data.networkWriteRate);
 
     blockReadTotal.value = prettyDecimalSize(data.blockReadTotal);
     blockWriteTotal.value = prettyDecimalSize(data.blockWriteTotal);
-
-    ///////////// Network Graph
-    networkGraph.data.datasets[0].data.push(transformMsecs(data.networkReadRate));
-    pruneGraphData(memoryGraph.data.datasets[0], memoryGraph.options);
-
-    networkGraph.data.datasets[1].data.push(transformMsecs(data.networkWriteRate));
-    pruneGraphData(networkGraph.data.datasets[1], networkGraph.options);
-
-    networkGraph.update('none');
-
     networkReadTotal.value = prettyDecimalSize(data.networkReadTotal);
     networkWriteTotal.value = prettyDecimalSize(data.networkWriteTotal);
   };
-
-  // advances the time window by 500ms. this is independent of incoming data
-  metricStream.intervalId = setInterval(function () {
-    for (const graph of [ cpuGraph, memoryGraph, diskGraph, networkGraph]) {
-      graph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
-      graph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
-      graph.update('none');
-    }
-  }, LIVE_REFRESH_INTERVAL_MSECS);
-}
-
-async function getMetrics(hours) {
-  const metrics = {
-    cpu: [],
-    memory: [],
-    swap: [],
-    blockReadRate: [],
-    blockWriteRate: [],
-    networkReadRate: [],
-    networkWriteRate: [],
-
-    // these are just scalars and not timeseries
-    blockReadTotal: 0,
-    blockWriteTotal: 0,
-    networkReadTotal: 0,
-    networkWriteTotal: 0
-  };
-
-  if (hours === 0) return metrics; // empty result. values will come from stream and not graphite
-
-  const [error, result] = await systemModel.getMetrics({ fromSecs: hours * 60 * 60, intervalSecs: 300 });
-  if (error) return console.error(error);
-
-  metrics.cpu = result.cpu.map(transformMsecs); // cpu is already scaled to cpu*100
-  metrics.memory = result.memory.map(transformGiB);
-  metrics.swap = result.swap.map(transformGiB);
-  metrics.blockReadRate = result.blockReadRate.map(transformMsecs);
-  metrics.blockWriteRate = result.blockWriteRate.map(transformMsecs);
-  metrics.networkReadRate = result.networkReadRate.map(transformMsecs);
-  metrics.networkWriteRate = result.networkWriteRate.map(transformMsecs);
-
-  metrics.networkReadTotal = result.networkReadTotal;
-  metrics.networkWriteTotal = result.networkWriteTotal;
-  metrics.blockReadTotal = result.blockReadTotal;
-  metrics.blockWriteTotal = result.blockWriteTota;
-
-  return metrics;
-}
-
-function createGraphOptions({ yscale, realtime }) {
-  const now = Date.now();
-
-  return {
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        display: false
-      },
-      tooltip: {
-        callbacks: {
-          title: (tooltipItem) => moment(tooltipItem[0].raw.x).format(period.value.tooltipFormat),
-          label: (tooltipItem) => yscale.ticks.callback(tooltipItem.raw.y)
-        }
-      }
-    },
-    scales: {
-      x: {
-        // we used to use 'time' type but it relies on the data to generate ticks. we may not have data for our time periods
-        type: 'linear',
-        min: now - (period.value.hours === 0 ? LIVE_REFRESH_HISTORY_MSECS : period.value.hours*60*60*1000),
-        max: now,
-        ticks: {
-          autoSkip: true, // skip tick labels as needed
-          autoSkipPadding: 20, // padding between ticks
-          maxRotation: 0, // don't rotate the labels
-          count: 7, // tick labels to show. anything more than 7 will not work for "7 days"
-          callback: function (value) {
-            if (period.value.hours === 0) return `${5-(value-this.min)/60000}min`;
-            return moment(value).format(period.value.format);
-          },
-          stepSize: realtime ? 60*1000 : null // // for realtime graph, generate steps of 1min and appropriate tick text
-        },
-        grid: {
-          drawOnChartArea: false,
-        },
-      },
-      y: yscale,
-    },
-    interaction: {
-      intersect: false,
-      mode: 'nearest',
-      axis: 'x'
-    }
-  };
 }
 
 // CPU and Memory graph have known min/max set and auto-scaling gets disabled
 // Disk and Network graphs auto-scale the y values.
 async function onPeriodChange() {
-  const metrics = await getMetrics(period.value.hours);
-
-  ///////////// CPU Graph
-  const cpuGraphData = {
-    datasets: [{
-      label: 'CPU',
-      data: metrics.cpu,
-      pointRadius: 0,
-      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
-      tension: 0.4,
-      showLine: true,
-      fill: true
-    }]
-  };
-
-  const cpuYscale = {
-    type: 'linear',
-    min: 0,
-    max: systemCpus.length * 100,
-    ticks: {
-      callback: (value) => `${value}%`,
-      maxTicksLimit: 6 // max tick labels to show
-    },
-    beginAtZero: true,
-  };
-  const cpuGraphOptions = createGraphOptions({ yscale: cpuYscale, realtime: period.value.hours === 0 });
-
-  if (!cpuGraph) {
-    cpuGraph = new Chart(cpuGraphNode.value, { type: 'line', data: cpuGraphData, options: cpuGraphOptions });
-  } else {
-    cpuGraph.data = cpuGraphData;
-    cpuGraph.options = cpuGraphOptions;
-    cpuGraph.update('none');
-  }
-
-  ///////////// Memory Graph
-  const giB = 1024 * 1024 * 1024;
-  const roundedMemory = Math.ceil(systemMemory.memory / giB) * giB; // we have to scale up so that the graph can show the data!
-  const roundedSwap = Math.ceil(systemMemory.swap / giB) * giB;
-
-  const memoryGraphData = {
-    datasets: [{
-      label: 'RAM',
-      data: metrics.memory,
-      stack: 'memory+swap',
-      pointRadius: 0,
-      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
-      tension: 0.4,
-      showLine: true,
-      fill: true,
-      color: '#9ad0f5'
-    },{
-      label: 'Swap',
-      data: metrics.swap,
-      stack: 'memory+swap',
-      pointRadius: 0,
-      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
-      tension: 0.4,
-      showLine: true,
-      fill: true,
-      color: '#ffb1c1'
-    }]
-  };
-
-  const memoryYscale = {
-    type: 'linear',
-    min: 0,
-    max: (roundedMemory + roundedSwap)/ giB,
-    ticks: {
-      stepSize: 1,
-      autoSkip: true, // skip tick labels as needed
-      autoSkipPadding: 20, // padding between ticks
-      callback: (value) => `${value} GiB`,
-      maxTicksLimit: 8 // max tick labels to show
-    },
-    beginAtZero: true,
-    stacked: true,
-  };
-
-  const memoryGraphOptions = createGraphOptions({ yscale: memoryYscale, realtime: period.value.hours === 0 });
-
-  if (!memoryGraph) {
-    memoryGraph = new Chart(memoryGraphNode.value, { type: 'line', data: memoryGraphData, options: memoryGraphOptions });
-  } else {
-    memoryGraph.data = memoryGraphData;
-    memoryGraph.options = memoryGraphOptions;
-    memoryGraph.update('none');
-  }
-
-  ///////////// Disk Graph
-  const diskGraphData = {
-    datasets: [{
-      label: 'Block Read',
-      data: metrics.blockReadRate,
-      stack: 'blockread',
-      pointRadius: 0,
-      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
-      tension: 0.4,
-      showLine: true,
-      fill: true,
-      color: '#9ad0f5'
-    },{
-      label: 'Block Write',
-      data: metrics.blockWriteRate,
-      stack: 'blockwrite',
-      pointRadius: 0,
-      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
-      tension: 0.4,
-      showLine: true,
-      fill: true,
-      color: '#ffb1c1'
-    }]
-  };
-
-  const diskYscale = {
-    type: 'linear',
-    min: 0,
-    grace: 100*1000, // add 100kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
-    ticks: {
-      callback: (value) => `${prettyDecimalSize(value)}ps`,
-      maxTicksLimit: 6 // max tick labels to show
-    },
-    beginAtZero: true,
-    stacked: false,
-  };
-
-  const diskGraphOptions = createGraphOptions({ yscale: diskYscale, realtime: period.value.hours === 0 });
-
-  if (!diskGraph) {
-    diskGraph = new Chart(diskGraphNode.value, { type: 'line', data: diskGraphData, options: diskGraphOptions });
-  } else {
-    diskGraph.data = diskGraphData;
-    diskGraph.options = diskGraphOptions;
-    diskGraph.update('none');
-  }
-
-  ///////////// Network Graph
-  const networkGraphData = {
-    datasets: [{
-      label: 'RX',
-      data: metrics.networkReadRate,
-      stack: 'networkread',
-      pointRadius: 0,
-      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
-      tension: 0.4,
-      showLine: true,
-      fill: true,
-      color: '#9ad0f5'
-    },{
-      label: 'TX',
-      data: metrics.networkWriteRate,
-      stack: 'networkwrite',
-      pointRadius: 0,
-      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
-      tension: 0.4,
-      showLine: true,
-      fill: true,
-      color: '#ffb1c1'
-    }]
-  };
-
-  const networkYscale = {
-    type: 'linear',
-    min: 0,
-    grace: 50*1000, // add 50kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
-    ticks: {
-      callback: (value) => `${prettyDecimalSize(value)}ps`,
-      maxTicksLimit: 6 // max tick labels to show
-    },
-    beginAtZero: true,
-    stacked: false,
-  };
-
-  const networkGraphOptions = createGraphOptions({ yscale: networkYscale, realtime: period.value.hours === 0 });
-
-  if (!networkGraph) {
-    networkGraph = new Chart(networkGraphNode.value, { type: 'line', data: networkGraphData, options: networkGraphOptions });
-  } else {
-    networkGraph.data = networkGraphData;
-    networkGraph.options = networkGraphOptions;
-    networkGraph.update('none');
-  }
-
-  ///////////// Scalars
-  networkReadTotal.value = prettyDecimalSize(metrics.networkReadTotal);
-  networkWriteTotal.value = prettyDecimalSize(metrics.networkWriteTotal);
-
-  blockReadTotal.value = prettyDecimalSize(metrics.blockReadTotal);
-  blockWriteTotal.value = prettyDecimalSize(metrics.blockWriteTotal);
-
   if (metricStream) {
-    clearInterval(metricStream.intervalId);
     metricStream.close();
     metricStream = null;
   }
 
-  if (period.value.hours === 0) liveRefresh();
+  if (period.value.hours === 0) return await liveRefresh();
+
+  const [error, metrics] = await systemModel.getMetrics({ fromSecs: period.value.hours * 60 * 60, intervalSecs: 300 });
+  if (error) return console.error(error);
+
+  cpuGraphItem.value.setData(metrics.cpu);
+  memoryGraphItem.value.setData(metrics.memory, metrics.swap);
+  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 () => {
@@ -422,14 +96,14 @@ onMounted(async () => {
 
   systemCpus = result;
 
+  busy.value = false;
+  await nextTick();
+
   await onPeriodChange();
 });
 
 onUnmounted(async () => {
-  if (metricStream) {
-    clearInterval(metricStream.intervalId);
-    metricStream.close();
-  }
+  if (metricStream) metricStream.close();
 });
 
 </script>
@@ -440,31 +114,44 @@ onUnmounted(async () => {
       <SingleSelect @select="onPeriodChange()" v-model="period" :options="periods" option-label="label"/>
     </template>
 
-    <div class="graphs">
-      <label>{{ $t('system.cpuUsage.title') }} <span class="pull-right text-small">{{ systemCpus.length ? `${systemCpus.length} Core "${systemCpus[0].model}"` : '' }}</span></label>
-      <div style="text-align: center" v-if="busy"><Spinner/></div>
-      <div class="graph">
-        <canvas v-show="!busy" ref="cpuGraphNode"></canvas>
-      </div>
+    <div class="graphs" v-if="!busy">
+      <GraphItem ref="cpuGraphItem"
+        :title="$t('system.cpuUsage.title')"
+        :subtext='systemCpus.length ? `${systemCpus.length} Core "${systemCpus[0].model}"` : ""'
+        :period="period"
+        yscale="cpu"
+        :dataset-labels="['CPU']"
+        :cpu="systemCpus"
+        >
+      </GraphItem>
 
-      <label style="margin-top: 10px; display: block;">{{ $t('system.systemMemory.title') }} <span class="pull-right text-small">RAM: {{ prettyDecimalSize(systemMemory.memory) }} Swap: {{ prettyDecimalSize(systemMemory.swap) }}</span></label>
-      <div style="text-align: center" v-if="busy"><Spinner/></div>
-      <div class="graph">
-        <canvas v-show="!busy" ref="memoryGraphNode"></canvas>
-      </div>
+      <GraphItem ref="memoryGraphItem"
+        :title="$t('system.systemMemory.title')"
+        :subtext="`RAM: ${prettyDecimalSize(systemMemory.memory)} Swap: ${prettyDecimalSize(systemMemory.swap)}`"
+        :period="period"
+        yscale="memory"
+        :dataset-labels="['Memory', 'Swap']"
+        :memory="systemMemory"
+        >
+      </GraphItem>
 
-      <label style="margin-top: 10px; display: block;">Disk I/O <span class="pull-right text-small">{{ $t('app.graphs.diskIOTotal', { read: blockReadTotal, write: blockWriteTotal }) }}</span></label>
-      <div style="text-align: center" v-if="busy"><Spinner/></div>
-      <div class="graph">
-        <canvas v-show="!busy" ref="diskGraphNode"></canvas>
-      </div>
-
-      <label style="margin-top: 10px; display: block;">Network I/O <span class="pull-right text-small">{{ $t('app.graphs.networkIOTotal', { inbound: networkReadTotal, outbound: networkWriteTotal }) }}</span></label>
-      <div style="text-align: center" v-if="busy"><Spinner/></div>
-      <div class="graph">
-        <canvas v-show="!busy" ref="networkGraphNode"></canvas>
-      </div>
+      <GraphItem ref="diskGraphItem"
+        title="Disk I/O"
+        :subtext="$t('app.graphs.diskIOTotal', { read: blockReadTotal, write: blockWriteTotal })"
+        :period="period"
+        yscale="disk"
+        :dataset-labels="['Read', 'Write']"
+        >
+      </GraphItem>
 
+      <GraphItem ref="networkGraphItem"
+        title="Network I/O"
+        :subtext="$t('app.graphs.networkIOTotal', { inbound: networkReadTotal, outbound: networkWriteTotal })"
+        :period="period"
+        yscale="network"
+        :dataset-labels="['RX', 'TX']"
+        >
+      </GraphItem>
     </div>
   </Section>
 </template>