diff --git a/web/package-lock.json b/web/package-lock.json
index 3b0b70fd..2992490a 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -7,6 +7,10 @@
     "": {
       "name": "potato-mesh",
       "version": "0.5.9",
+      "hasInstallScript": true,
+      "dependencies": {
+        "uplot": "^1.6.30"
+      },
       "devDependencies": {
         "istanbul-lib-coverage": "^3.2.2",
         "istanbul-lib-report": "^3.0.1",
@@ -154,6 +158,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/uplot": {
+      "version": "1.6.32",
+      "resolved": "https://registry.npmjs.org/uplot/-/uplot-1.6.32.tgz",
+      "integrity": "sha512-KIMVnG68zvu5XXUbC4LQEPnhwOxBuLyW1AHtpm6IKTXImkbLgkMy+jabjLgSLMasNuGGzQm/ep3tOkyTxpiQIw==",
+      "license": "MIT"
+    },
     "node_modules/v8-to-istanbul": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz",
diff --git a/web/package.json b/web/package.json
index 086f9d80..6cf0e1c6 100644
--- a/web/package.json
+++ b/web/package.json
@@ -4,8 +4,12 @@
   "type": "module",
   "private": true,
   "scripts": {
+    "postinstall": "node ./scripts/copy-uplot.js",
     "test": "mkdir -p reports coverage && NODE_V8_COVERAGE=coverage node --test --experimental-test-coverage --test-reporter=spec --test-reporter-destination=stdout --test-reporter=junit --test-reporter-destination=reports/javascript-junit.xml && node ./scripts/export-coverage.js"
   },
+  "dependencies": {
+    "uplot": "^1.6.30"
+  },
   "devDependencies": {
     "istanbul-lib-coverage": "^3.2.2",
     "istanbul-lib-report": "^3.0.1",
diff --git a/web/public/assets/js/app/__tests__/charts-page.test.js b/web/public/assets/js/app/__tests__/charts-page.test.js
index d5e676ca..074608e9 100644
--- a/web/public/assets/js/app/__tests__/charts-page.test.js
+++ b/web/public/assets/js/app/__tests__/charts-page.test.js
@@ -80,13 +80,19 @@ test('initializeChartsPage renders the telemetry charts when snapshots are avail
     },
   ]);
   let receivedOptions = null;
-  const renderCharts = (node, options) => {
+  let mountedModels = null;
+  const createCharts = (node, options) => {
     receivedOptions = options;
-    return '<section class="node-detail__charts">Charts</section>';
+    return { chartsHtml: '<section class="node-detail__charts">Charts</section>', chartModels: [{ id: 'power' }] };
   };
-  const result = await initializeChartsPage({ document: documentStub, fetchImpl, renderCharts });
+  const mountCharts = (chartModels, options) => {
+    mountedModels = { chartModels, options };
+    return [];
+  };
+  const result = await initializeChartsPage({ document: documentStub, fetchImpl, createCharts, mountCharts });
   assert.equal(result, true);
   assert.equal(container.innerHTML.includes('node-detail__charts'), true);
+  assert.equal(mountedModels.chartModels.length, 1);
   assert.ok(receivedOptions);
   assert.equal(receivedOptions.chartOptions.windowMs, 604_800_000);
   assert.equal(typeof receivedOptions.chartOptions.lineReducer, 'function');
@@ -118,8 +124,8 @@ test('initializeChartsPage shows an error message when fetching fails', async ()
   const fetchImpl = async () => {
     throw new Error('network');
   };
-  const renderCharts = () => '<section>unused</section>';
-  const result = await initializeChartsPage({ document: documentStub, fetchImpl, renderCharts });
+  const createCharts = () => ({ chartsHtml: '<section>unused</section>', chartModels: [] });
+  const result = await initializeChartsPage({ document: documentStub, fetchImpl, createCharts });
   assert.equal(result, false);
   assert.equal(container.innerHTML.includes('Failed to load telemetry charts.'), true);
 });
@@ -136,8 +142,8 @@ test('initializeChartsPage handles missing containers and empty telemetry snapsh
     },
   };
   const fetchImpl = async () => createResponse(200, []);
-  const renderCharts = () => '';
-  const result = await initializeChartsPage({ document: documentStub, fetchImpl, renderCharts });
+  const createCharts = () => ({ chartsHtml: '', chartModels: [] });
+  const result = await initializeChartsPage({ document: documentStub, fetchImpl, createCharts });
   assert.equal(result, true);
   assert.equal(container.innerHTML.includes('Telemetry snapshots are unavailable.'), true);
 });
@@ -155,8 +161,8 @@ test('initializeChartsPage shows a status when rendering produces no markup', as
       aggregates: { voltage: { avg: 3.9 } },
     },
   ]);
-  const renderCharts = () => '';
-  const result = await initializeChartsPage({ document: documentStub, fetchImpl, renderCharts });
+  const createCharts = () => ({ chartsHtml: '', chartModels: [] });
+  const result = await initializeChartsPage({ document: documentStub, fetchImpl, createCharts });
   assert.equal(result, true);
   assert.equal(container.innerHTML.includes('Telemetry snapshots are unavailable.'), true);
 });
diff --git a/web/public/assets/js/app/__tests__/node-detail-overlay.test.js b/web/public/assets/js/app/__tests__/node-detail-overlay.test.js
index 64864356..19c5b502 100644
--- a/web/public/assets/js/app/__tests__/node-detail-overlay.test.js
+++ b/web/public/assets/js/app/__tests__/node-detail-overlay.test.js
@@ -111,6 +111,26 @@ test('createNodeDetailOverlayManager renders fetched markup and restores focus',
   assert.equal(focusTarget.focusCalled, true);
 });
 
+test('createNodeDetailOverlayManager mounts telemetry charts for overlay content', async () => {
+  const { document, content } = createOverlayHarness();
+  const chartModels = [{ id: 'power' }];
+  let mountCall = null;
+  const manager = createNodeDetailOverlayManager({
+    document,
+    fetchNodeDetail: async () => ({ html: '<section class="node-detail">Charts</section>', chartModels }),
+    mountCharts: (models, options) => {
+      mountCall = { models, options };
+      return [];
+    },
+  });
+  assert.ok(manager);
+  await manager.open({ nodeId: '!alpha' });
+  assert.equal(content.innerHTML.includes('Charts'), true);
+  assert.ok(mountCall);
+  assert.equal(mountCall.models, chartModels);
+  assert.equal(mountCall.options.root, content);
+});
+
 test('createNodeDetailOverlayManager surfaces errors and supports escape closing', async () => {
   const { document, overlay, content } = createOverlayHarness();
   const errors = [];
diff --git a/web/public/assets/js/app/__tests__/node-page.test.js b/web/public/assets/js/app/__tests__/node-page.test.js
index e3f7944f..2b7c4cc6 100644
--- a/web/public/assets/js/app/__tests__/node-page.test.js
+++ b/web/public/assets/js/app/__tests__/node-page.test.js
@@ -47,7 +47,9 @@ const {
   categoriseNeighbors,
   renderNeighborGroups,
   renderSingleNodeTable,
+  createTelemetryCharts,
   renderTelemetryCharts,
+  buildUPlotChartConfig,
   renderMessages,
   renderTraceroutes,
   renderTracePath,
@@ -386,23 +388,10 @@ test('renderTelemetryCharts renders condensed scatter charts when telemetry exis
     },
   };
   const html = renderTelemetryCharts(node, { nowMs });
-  const fmt = new Date(nowMs);
-  const expectedDate = String(fmt.getDate()).padStart(2, '0');
   assert.equal(html.includes('node-detail__charts'), true);
   assert.equal(html.includes('Power metrics'), true);
   assert.equal(html.includes('Environmental telemetry'), true);
-  assert.equal(html.includes('Battery (%)'), true);
-  assert.equal(html.includes('Voltage (V)'), true);
-  assert.equal(html.includes('Current (A)'), true);
-  assert.equal(html.includes('Channel utilization (%)'), true);
-  assert.equal(html.includes('Air util TX (%)'), true);
-  assert.equal(html.includes('Utilization (%)'), true);
-  assert.equal(html.includes('Gas resistance (\u03a9)'), true);
-  assert.equal(html.includes('Air quality'), true);
-  assert.equal(html.includes('IAQ index'), true);
-  assert.equal(html.includes('Temperature (\u00b0C)'), true);
-  assert.equal(html.includes(expectedDate), true);
-  assert.equal(html.includes('node-detail__chart-point'), true);
+  assert.equal(html.includes('node-detail__chart-plot'), true);
 });
 
 test('renderTelemetryCharts expands upper bounds when overflow metrics exceed defaults', () => {
@@ -433,12 +422,18 @@ test('renderTelemetryCharts expands upper bounds when overflow metrics exceed de
       },
     },
   };
-  const html = renderTelemetryCharts(node, { nowMs });
-  assert.match(html, />7\.2<\/text>/);
-  assert.match(html, />3\.6<\/text>/);
-  assert.match(html, />45<\/text>/);
-  assert.match(html, />650<\/text>/);
-  assert.match(html, />1100<\/text>/);
+  const { chartModels } = createTelemetryCharts(node, { nowMs });
+  const powerChart = chartModels.find(model => model.id === 'power');
+  const environmentChart = chartModels.find(model => model.id === 'environment');
+  const airChart = chartModels.find(model => model.id === 'airQuality');
+  const powerConfig = buildUPlotChartConfig(powerChart);
+  const envConfig = buildUPlotChartConfig(environmentChart);
+  const airConfig = buildUPlotChartConfig(airChart);
+  assert.equal(powerConfig.options.scales.voltage.range()[1], 7.2);
+  assert.equal(powerConfig.options.scales.current.range()[1], 3.6);
+  assert.equal(envConfig.options.scales.temperature.range()[1], 45);
+  assert.equal(airConfig.options.scales.iaq.range()[1], 650);
+  assert.equal(airConfig.options.scales.pressure.range()[1], 1100);
 });
 
 test('renderTelemetryCharts keeps default bounds when metrics stay within limits', () => {
@@ -469,11 +464,17 @@ test('renderTelemetryCharts keeps default bounds when metrics stay within limits
       },
     },
   };
-  const html = renderTelemetryCharts(node, { nowMs });
-  assert.match(html, />6\.0<\/text>/);
-  assert.match(html, />3\.0<\/text>/);
-  assert.match(html, />40<\/text>/);
-  assert.match(html, />500<\/text>/);
+  const { chartModels } = createTelemetryCharts(node, { nowMs });
+  const powerChart = chartModels.find(model => model.id === 'power');
+  const environmentChart = chartModels.find(model => model.id === 'environment');
+  const airChart = chartModels.find(model => model.id === 'airQuality');
+  const powerConfig = buildUPlotChartConfig(powerChart);
+  const envConfig = buildUPlotChartConfig(environmentChart);
+  const airConfig = buildUPlotChartConfig(airChart);
+  assert.equal(powerConfig.options.scales.voltage.range()[1], 6);
+  assert.equal(powerConfig.options.scales.current.range()[1], 3);
+  assert.equal(envConfig.options.scales.temperature.range()[1], 40);
+  assert.equal(airConfig.options.scales.iaq.range()[1], 500);
 });
 
 test('renderNodeDetailHtml composes the table, neighbors, and messages', () => {
@@ -589,17 +590,18 @@ test('fetchNodeDetailHtml renders the node layout for overlays', async () => {
     neighbors: [],
     rawSources: { node: { node_id: '!alpha', role: 'CLIENT', short_name: 'ALPH' } },
   });
-  const html = await fetchNodeDetailHtml(reference, {
+  const result = await fetchNodeDetailHtml(reference, {
     refreshImpl,
     fetchImpl,
     renderShortHtml: short => `<span class="short-name">${short}</span>`,
+    returnState: true,
   });
   assert.equal(calledUrls.some(url => url.includes('/api/messages/!alpha')), true);
   assert.equal(calledUrls.some(url => url.includes('/api/traces/!alpha')), true);
-  assert.equal(html.includes('Example Alpha'), true);
-  assert.equal(html.includes('Overlay hello'), true);
-  assert.equal(html.includes('Traceroutes'), true);
-  assert.equal(html.includes('node-detail__table'), true);
+  assert.equal(result.html.includes('Example Alpha'), true);
+  assert.equal(result.html.includes('Overlay hello'), true);
+  assert.equal(result.html.includes('Traceroutes'), true);
+  assert.equal(result.html.includes('node-detail__table'), true);
 });
 
 test('fetchNodeDetailHtml hydrates traceroute nodes with API metadata', async () => {
@@ -637,16 +639,17 @@ test('fetchNodeDetailHtml hydrates traceroute nodes with API metadata', async ()
     rawSources: { node: { node_id: '!origin', role: 'CLIENT', short_name: 'ORIG' } },
   });
 
-  const html = await fetchNodeDetailHtml(reference, {
+  const result = await fetchNodeDetailHtml(reference, {
     refreshImpl,
     fetchImpl,
     renderShortHtml: short => `<span class="short-name">${short}</span>`,
+    returnState: true,
   });
 
   assert.equal(calledUrls.some(url => url.includes('/api/nodes/!relay')), true);
   assert.equal(calledUrls.some(url => url.includes('/api/nodes/!target')), true);
-  assert.equal(html.includes('RLY1'), true);
-  assert.equal(html.includes('TGT1'), true);
+  assert.equal(result.html.includes('RLY1'), true);
+  assert.equal(result.html.includes('TGT1'), true);
 });
 
 test('fetchNodeDetailHtml requires a node identifier reference', async () => {
diff --git a/web/public/assets/js/app/__tests__/telemetry-charts.test.js b/web/public/assets/js/app/__tests__/telemetry-charts.test.js
new file mode 100644
index 00000000..25ad6023
--- /dev/null
+++ b/web/public/assets/js/app/__tests__/telemetry-charts.test.js
@@ -0,0 +1,360 @@
+/*
+ * Copyright © 2025-26 l5yth & contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+import { __testUtils } from '../node-page.js';
+import { buildMovingAverageSeries } from '../charts-page.js';
+
+const {
+  createTelemetryCharts,
+  buildUPlotChartConfig,
+  mountTelemetryCharts,
+  mountTelemetryChartsWithRetry,
+} = __testUtils;
+
+test('uPlot chart config preserves axes, colors, and tick labels for node telemetry', () => {
+  const nowMs = Date.UTC(2025, 0, 8, 12, 0, 0);
+  const nowSeconds = Math.floor(nowMs / 1000);
+  const node = {
+    rawSources: {
+      telemetry: {
+        snapshots: [
+          {
+            rx_time: nowSeconds - 60,
+            device_metrics: {
+              battery_level: 80,
+              voltage: 4.1,
+              current: 0.75,
+            },
+          },
+          {
+            rx_time: nowSeconds - 3_600,
+            device_metrics: {
+              battery_level: 78,
+              voltage: 4.05,
+              current: 0.65,
+            },
+          },
+        ],
+      },
+    },
+  };
+  const { chartModels } = createTelemetryCharts(node, {
+    nowMs,
+    chartOptions: {
+      xAxisTickBuilder: () => [nowMs],
+      xAxisTickFormatter: () => '08',
+    },
+  });
+  const powerChart = chartModels.find(model => model.id === 'power');
+  const { options, data } = buildUPlotChartConfig(powerChart);
+
+  assert.deepEqual(options.scales.battery.range(), [0, 100]);
+  assert.deepEqual(options.scales.voltage.range(), [0, 6]);
+  assert.deepEqual(options.scales.current.range(), [0, 3]);
+  assert.equal(options.series[1].stroke, '#8856a7');
+  assert.equal(options.series[2].stroke, '#9ebcda');
+  assert.equal(options.series[3].stroke, '#3182bd');
+  assert.deepEqual(options.axes[0].values(null, [nowMs]), ['08']);
+  assert.equal(options.axes[0].stroke, '#5c6773');
+
+  assert.deepEqual(data[0].slice(0, 2), [nowMs - 3_600_000, nowMs - 60_000]);
+  assert.deepEqual(data[1].slice(0, 2), [78, 80]);
+});
+
+test('uPlot chart config maps moving averages and raw points for aggregated telemetry', () => {
+  const nowMs = Date.UTC(2025, 0, 8, 12, 0, 0);
+  const nowSeconds = Math.floor(nowMs / 1000);
+  const snapshots = [
+    {
+      rx_time: nowSeconds - 3_600,
+      device_metrics: { battery_level: 10 },
+    },
+    {
+      rx_time: nowSeconds - 1_800,
+      device_metrics: { battery_level: 20 },
+    },
+  ];
+  const node = { rawSources: { telemetry: { snapshots } } };
+  const { chartModels } = createTelemetryCharts(node, {
+    nowMs,
+    chartOptions: {
+      lineReducer: points => buildMovingAverageSeries(points, 3_600_000),
+    },
+  });
+  const powerChart = chartModels.find(model => model.id === 'power');
+  const { options, data } = buildUPlotChartConfig(powerChart);
+
+  assert.equal(options.series.length, 3);
+  assert.equal(options.series[1].stroke.startsWith('rgba('), true);
+  assert.equal(options.series[2].stroke, '#8856a7');
+  assert.deepEqual(data[1].slice(0, 2), [10, 15]);
+  assert.deepEqual(data[2].slice(0, 2), [10, 20]);
+});
+
+test('buildUPlotChartConfig applies axis color overrides', () => {
+  const nowMs = Date.UTC(2025, 0, 8, 12, 0, 0);
+  const nowSeconds = Math.floor(nowMs / 1000);
+  const node = {
+    rawSources: {
+      telemetry: {
+        snapshots: [
+          {
+            rx_time: nowSeconds - 60,
+            device_metrics: { battery_level: 80 },
+          },
+        ],
+      },
+    },
+  };
+  const { chartModels } = createTelemetryCharts(node, { nowMs });
+  const powerChart = chartModels.find(model => model.id === 'power');
+  const { options } = buildUPlotChartConfig(powerChart, {
+    axisColor: '#ffffff',
+    gridColor: '#222222',
+  });
+  assert.equal(options.axes[0].stroke, '#ffffff');
+  assert.equal(options.axes[0].grid.stroke, '#222222');
+});
+
+test('environment chart renders humidity axis on the right side', () => {
+  const nowMs = Date.UTC(2025, 0, 8, 12, 0, 0);
+  const nowSeconds = Math.floor(nowMs / 1000);
+  const node = {
+    rawSources: {
+      telemetry: {
+        snapshots: [
+          {
+            rx_time: nowSeconds - 60,
+            environment_metrics: {
+              temperature: 19.5,
+              relative_humidity: 55,
+            },
+          },
+        ],
+      },
+    },
+  };
+  const { chartModels } = createTelemetryCharts(node, { nowMs });
+  const envChart = chartModels.find(model => model.id === 'environment');
+  const { options } = buildUPlotChartConfig(envChart);
+  const humidityAxis = options.axes.find(axis => axis.scale === 'humidity');
+  assert.ok(humidityAxis);
+  assert.equal(humidityAxis.side, 1);
+  assert.equal(humidityAxis.show, true);
+});
+
+test('channel utilization chart includes a right-side utilization axis', () => {
+  const nowMs = Date.UTC(2025, 0, 8, 12, 0, 0);
+  const nowSeconds = Math.floor(nowMs / 1000);
+  const node = {
+    rawSources: {
+      telemetry: {
+        snapshots: [
+          {
+            rx_time: nowSeconds - 60,
+            device_metrics: {
+              channel_utilization: 40,
+              air_util_tx: 22,
+            },
+          },
+        ],
+      },
+    },
+  };
+  const { chartModels } = createTelemetryCharts(node, { nowMs });
+  const channelChart = chartModels.find(model => model.id === 'channel');
+  const { options } = buildUPlotChartConfig(channelChart);
+  const rightAxis = options.axes.find(axis => axis.scale === 'channelSecondary');
+  assert.ok(rightAxis);
+  assert.equal(rightAxis.side, 1);
+  assert.equal(rightAxis.show, true);
+});
+
+test('createTelemetryCharts returns empty markup when snapshots are missing', () => {
+  const { chartsHtml, chartModels } = createTelemetryCharts({ rawSources: { telemetry: { snapshots: [] } } });
+  assert.equal(chartsHtml, '');
+  assert.equal(chartModels.length, 0);
+});
+
+test('mountTelemetryCharts instantiates uPlot for chart containers', () => {
+  const nowMs = Date.UTC(2025, 0, 8, 12, 0, 0);
+  const nowSeconds = Math.floor(nowMs / 1000);
+  const node = {
+    rawSources: {
+      telemetry: {
+        snapshots: [
+          {
+            rx_time: nowSeconds - 60,
+            device_metrics: { battery_level: 80 },
+          },
+        ],
+      },
+    },
+  };
+  const { chartModels } = createTelemetryCharts(node, { nowMs });
+  const [model] = chartModels;
+  const plotRoot = { innerHTML: 'placeholder' };
+  const chartContainer = {
+    querySelector(selector) {
+      return selector === '[data-telemetry-plot]' ? plotRoot : null;
+    },
+  };
+  const root = {
+    querySelector(selector) {
+      return selector === `[data-telemetry-chart-id="${model.id}"]` ? chartContainer : null;
+    },
+  };
+  class UPlotStub {
+    constructor(options, data, container) {
+      this.options = options;
+      this.data = data;
+      this.container = container;
+    }
+  }
+  const instances = mountTelemetryCharts(chartModels, { root, uPlotImpl: UPlotStub });
+  assert.equal(plotRoot.innerHTML, '');
+  assert.equal(instances.length, 1);
+  assert.equal(instances[0].container, plotRoot);
+});
+
+test('mountTelemetryCharts responds to window resize events', async () => {
+  const nowMs = Date.UTC(2025, 0, 8, 12, 0, 0);
+  const nowSeconds = Math.floor(nowMs / 1000);
+  const node = {
+    rawSources: {
+      telemetry: {
+        snapshots: [
+          {
+            rx_time: nowSeconds - 60,
+            device_metrics: { battery_level: 80 },
+          },
+        ],
+      },
+    },
+  };
+  const { chartModels } = createTelemetryCharts(node, { nowMs });
+  const [model] = chartModels;
+  const plotRoot = {
+    innerHTML: '',
+    clientWidth: 320,
+    clientHeight: 180,
+    getBoundingClientRect() {
+      return { width: this.clientWidth, height: this.clientHeight };
+    },
+  };
+  const chartContainer = {
+    querySelector(selector) {
+      return selector === '[data-telemetry-plot]' ? plotRoot : null;
+    },
+  };
+  const root = {
+    querySelector(selector) {
+      return selector === `[data-telemetry-chart-id="${model.id}"]` ? chartContainer : null;
+    },
+  };
+  const previousResizeObserver = globalThis.ResizeObserver;
+  const previousAddEventListener = globalThis.addEventListener;
+  let resizeHandler = null;
+  globalThis.ResizeObserver = undefined;
+  globalThis.addEventListener = (event, handler) => {
+    if (event === 'resize') {
+      resizeHandler = handler;
+    }
+  };
+  const sizeCalls = [];
+  class UPlotStub {
+    constructor(options, data, container) {
+      this.options = options;
+      this.data = data;
+      this.container = container;
+      this.root = container;
+    }
+    setSize(size) {
+      sizeCalls.push(size);
+    }
+  }
+  mountTelemetryCharts(chartModels, { root, uPlotImpl: UPlotStub });
+  assert.ok(resizeHandler);
+  plotRoot.clientWidth = 480;
+  plotRoot.clientHeight = 240;
+  resizeHandler();
+  await new Promise(resolve => setTimeout(resolve, 150));
+  assert.equal(sizeCalls.length >= 1, true);
+  assert.deepEqual(sizeCalls[sizeCalls.length - 1], { width: 480, height: 240 });
+  globalThis.ResizeObserver = previousResizeObserver;
+  globalThis.addEventListener = previousAddEventListener;
+});
+
+test('mountTelemetryChartsWithRetry loads uPlot when missing', async () => {
+  const nowMs = Date.UTC(2025, 0, 8, 12, 0, 0);
+  const nowSeconds = Math.floor(nowMs / 1000);
+  const node = {
+    rawSources: {
+      telemetry: {
+        snapshots: [
+          {
+            rx_time: nowSeconds - 60,
+            device_metrics: { battery_level: 80 },
+          },
+        ],
+      },
+    },
+  };
+  const { chartModels } = createTelemetryCharts(node, { nowMs });
+  const [model] = chartModels;
+  const plotRoot = { innerHTML: '', clientWidth: 400, clientHeight: 200 };
+  const chartContainer = {
+    querySelector(selector) {
+      return selector === '[data-telemetry-plot]' ? plotRoot : null;
+    },
+  };
+  const root = {
+    ownerDocument: {
+      body: {},
+      querySelector: () => null,
+    },
+    querySelector(selector) {
+      return selector === `[data-telemetry-chart-id="${model.id}"]` ? chartContainer : null;
+    },
+  };
+  const previousUPlot = globalThis.uPlot;
+  const instances = [];
+  class UPlotStub {
+    constructor(options, data, container) {
+      this.options = options;
+      this.data = data;
+      this.container = container;
+      instances.push(this);
+    }
+  }
+  let loadCalled = false;
+  const loadUPlot = ({ onLoad }) => {
+    loadCalled = true;
+    globalThis.uPlot = UPlotStub;
+    if (typeof onLoad === 'function') {
+      onLoad();
+    }
+    return true;
+  };
+  mountTelemetryChartsWithRetry(chartModels, { root, loadUPlot });
+  await new Promise(resolve => setTimeout(resolve, 0));
+  assert.equal(loadCalled, true);
+  assert.equal(instances.length, 1);
+  globalThis.uPlot = previousUPlot;
+});
diff --git a/web/public/assets/js/app/charts-page.js b/web/public/assets/js/app/charts-page.js
index 954016a3..ad8ebe94 100644
--- a/web/public/assets/js/app/charts-page.js
+++ b/web/public/assets/js/app/charts-page.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { renderTelemetryCharts } from './node-page.js';
+import { createTelemetryCharts, mountTelemetryChartsWithRetry } from './node-page.js';
 
 const TELEMETRY_BUCKET_SECONDS = 60 * 60;
 const HOUR_MS = 60 * 60 * 1000;
@@ -193,6 +193,21 @@ export async function fetchAggregatedTelemetry({
     .filter(snapshot => snapshot != null);
 }
 
+/**
+ * Fetch and render aggregated telemetry charts.
+ *
+ * @param {{
+ *   document?: Document,
+ *   rootId?: string,
+ *   fetchImpl?: Function,
+ *   bucketSeconds?: number,
+ *   windowMs?: number,
+ *   createCharts?: Function,
+ *   mountCharts?: Function,
+ *   uPlotImpl?: Function,
+ * }} options Optional overrides for testing.
+ * @returns {Promise<boolean>} ``true`` when charts were rendered successfully.
+ */
 export async function initializeChartsPage(options = {}) {
   const documentRef = options.document ?? globalThis.document;
   if (!documentRef || typeof documentRef.getElementById !== 'function') {
@@ -204,7 +219,8 @@ export async function initializeChartsPage(options = {}) {
     return false;
   }
 
-  const renderCharts = typeof options.renderCharts === 'function' ? options.renderCharts : renderTelemetryCharts;
+  const createCharts = typeof options.createCharts === 'function' ? options.createCharts : createTelemetryCharts;
+  const mountCharts = typeof options.mountCharts === 'function' ? options.mountCharts : mountTelemetryChartsWithRetry;
   const fetchImpl = options.fetchImpl ?? globalThis.fetch;
   const bucketSeconds = options.bucketSeconds ?? TELEMETRY_BUCKET_SECONDS;
   const windowMs = options.windowMs ?? CHART_WINDOW_MS;
@@ -218,7 +234,7 @@ export async function initializeChartsPage(options = {}) {
       return true;
     }
     const node = { rawSources: { telemetry: { snapshots } } };
-    const chartsHtml = renderCharts(node, {
+    const chartState = createCharts(node, {
       nowMs: Date.now(),
       chartOptions: {
         windowMs,
@@ -228,11 +244,12 @@ export async function initializeChartsPage(options = {}) {
         lineReducer: points => buildMovingAverageSeries(points, HOUR_MS),
       },
     });
-    if (!chartsHtml) {
+    if (!chartState.chartsHtml) {
       container.innerHTML = renderStatus('Telemetry snapshots are unavailable.');
       return true;
     }
-    container.innerHTML = chartsHtml;
+    container.innerHTML = chartState.chartsHtml;
+    mountCharts(chartState.chartModels, { root: container, uPlotImpl: options.uPlotImpl });
     return true;
   } catch (error) {
     console.error('Failed to render aggregated telemetry charts', error);
diff --git a/web/public/assets/js/app/node-detail-overlay.js b/web/public/assets/js/app/node-detail-overlay.js
index 22f4abe1..ed746044 100644
--- a/web/public/assets/js/app/node-detail-overlay.js
+++ b/web/public/assets/js/app/node-detail-overlay.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { fetchNodeDetailHtml } from './node-page.js';
+import { fetchNodeDetailHtml, mountTelemetryChartsWithRetry } from './node-page.js';
 
 /**
  * Escape a string for safe HTML injection.
@@ -68,6 +68,9 @@ function hasValidReference(reference) {
  *   fetchImpl?: Function,
  *   refreshImpl?: Function,
  *   renderShortHtml?: Function,
+ *   mountCharts?: Function,
+ *   uPlotImpl?: Function,
+ *   loadUPlot?: Function,
  *   privateMode?: boolean,
  *   logger?: Console
  * }} [options] Behaviour overrides.
@@ -101,6 +104,9 @@ export function createNodeDetailOverlayManager(options = {}) {
   const fetchImpl = options.fetchImpl;
   const refreshImpl = options.refreshImpl;
   const renderShortHtml = options.renderShortHtml;
+  const mountCharts = typeof options.mountCharts === 'function' ? options.mountCharts : mountTelemetryChartsWithRetry;
+  const uPlotImpl = options.uPlotImpl;
+  const loadUPlot = options.loadUPlot;
 
   let requestToken = 0;
   let lastTrigger = null;
@@ -198,16 +204,21 @@ export function createNodeDetailOverlayManager(options = {}) {
     }
     const currentToken = ++requestToken;
     try {
-      const html = await fetchDetail(reference, {
+      const result = await fetchDetail(reference, {
         fetchImpl,
         refreshImpl,
         renderShortHtml,
         privateMode,
+        returnState: true,
       });
       if (currentToken !== requestToken) {
         return;
       }
-      content.innerHTML = html;
+      const resolvedHtml = typeof result === 'string' ? result : result?.html;
+      content.innerHTML = resolvedHtml ?? '';
+      if (result && typeof result === 'object' && Array.isArray(result.chartModels)) {
+        mountCharts(result.chartModels, { root: content, uPlotImpl, loadUPlot });
+      }
       if (typeof closeButton.focus === 'function') {
         closeButton.focus();
       }
diff --git a/web/public/assets/js/app/node-page.js b/web/public/assets/js/app/node-page.js
index e31288af..d241bc94 100644
--- a/web/public/assets/js/app/node-page.js
+++ b/web/public/assets/js/app/node-page.js
@@ -124,6 +124,15 @@ const TELEMETRY_CHART_SPECS = Object.freeze([
         ticks: 4,
         color: '#2ca25f',
       },
+      {
+        id: 'channelSecondary',
+        position: 'right',
+        label: 'Utilization (%)',
+        min: 0,
+        max: 100,
+        ticks: 4,
+        color: '#2ca25f',
+      },
     ],
     series: [
       {
@@ -137,7 +146,7 @@ const TELEMETRY_CHART_SPECS = Object.freeze([
       },
       {
         id: 'air',
-        axis: 'channel',
+        axis: 'channelSecondary',
         color: '#99d8c9',
         label: 'Air util tx',
         legend: 'Air util TX (%)',
@@ -162,13 +171,13 @@ const TELEMETRY_CHART_SPECS = Object.freeze([
       },
       {
         id: 'humidity',
-        position: 'left',
+        position: 'right',
         label: 'Humidity (%)',
         min: 0,
         max: 100,
         ticks: 4,
         color: '#91bfdb',
-        visible: false,
+        visible: true,
       },
     ],
     series: [
@@ -857,67 +866,6 @@ function createChartDimensions(spec) {
   };
 }
 
-/**
- * Compute the horizontal drawing position for an axis descriptor.
- *
- * @param {string} position Axis position keyword.
- * @param {Object} dims Chart dimensions.
- * @returns {number} X coordinate for the axis baseline.
- */
-function resolveAxisX(position, dims) {
-  switch (position) {
-    case 'leftSecondary':
-      return dims.margin.left - 32;
-    case 'right':
-      return dims.width - dims.margin.right;
-    case 'rightSecondary':
-      return dims.width - dims.margin.right + 32;
-    case 'left':
-    default:
-      return dims.margin.left;
-  }
-}
-
-/**
- * Compute the X coordinate for a timestamp constrained to the rolling window.
- *
- * @param {number} timestamp Timestamp in milliseconds.
- * @param {number} domainStart Start of the window in milliseconds.
- * @param {number} domainEnd End of the window in milliseconds.
- * @param {Object} dims Chart dimensions.
- * @returns {number} X coordinate inside the SVG viewport.
- */
-function scaleTimestamp(timestamp, domainStart, domainEnd, dims) {
-  const safeStart = Math.min(domainStart, domainEnd);
-  const safeEnd = Math.max(domainStart, domainEnd);
-  const span = Math.max(1, safeEnd - safeStart);
-  const clamped = clamp(timestamp, safeStart, safeEnd);
-  const ratio = (clamped - safeStart) / span;
-  return dims.margin.left + ratio * dims.innerWidth;
-}
-
-/**
- * Convert a value bound to a specific axis into a Y coordinate.
- *
- * @param {number} value Series value.
- * @param {Object} axis Axis descriptor.
- * @param {Object} dims Chart dimensions.
- * @returns {number} Y coordinate.
- */
-function scaleValueToAxis(value, axis, dims) {
-  if (!axis) return dims.chartBottom;
-  if (axis.scale === 'log') {
-    const minLog = Math.log10(axis.min);
-    const maxLog = Math.log10(axis.max);
-    const safe = clamp(value, axis.min, axis.max);
-    const ratio = (Math.log10(safe) - minLog) / (maxLog - minLog);
-    return dims.chartBottom - ratio * dims.innerHeight;
-  }
-  const safe = clamp(value, axis.min, axis.max);
-  const ratio = (safe - axis.min) / (axis.max - axis.min || 1);
-  return dims.chartBottom - ratio * dims.innerHeight;
-}
-
 /**
  * Collect candidate containers that may hold telemetry values for a snapshot.
  *
@@ -1034,129 +982,15 @@ function resolveAxisMax(axis, seriesEntries) {
 }
 
 /**
- * Render a telemetry series as circles plus an optional translucent guide line.
- *
- * @param {Object} seriesConfig Series metadata.
- * @param {Array<{timestamp: number, value: number}>} points Series points.
- * @param {Object} axis Axis descriptor.
- * @param {Object} dims Chart dimensions.
- * @param {number} domainStart Window start timestamp.
- * @param {number} domainEnd Window end timestamp.
- * @returns {string} SVG markup for the series.
- */
-function renderTelemetrySeries(seriesConfig, points, axis, dims, domainStart, domainEnd, { lineReducer } = {}) {
-  if (!Array.isArray(points) || points.length === 0) {
-    return '';
-  }
-  const convertPoint = point => {
-    const cx = scaleTimestamp(point.timestamp, domainStart, domainEnd, dims);
-    const cy = scaleValueToAxis(point.value, axis, dims);
-    return { cx, cy, value: point.value };
-  };
-  const circleEntries = points.map(point => {
-    const coords = convertPoint(point);
-    const tooltip = formatSeriesPointValue(seriesConfig, point.value);
-    const titleMarkup = tooltip ? `<title>${escapeHtml(tooltip)}</title>` : '';
-    return `<circle class="node-detail__chart-point" cx="${coords.cx.toFixed(2)}" cy="${coords.cy.toFixed(2)}" r="3.2" fill="${seriesConfig.color}" aria-hidden="true">${titleMarkup}</circle>`;
-  });
-  const lineSource = typeof lineReducer === 'function' ? lineReducer(points) : points;
-  const linePoints = Array.isArray(lineSource) && lineSource.length > 0 ? lineSource : points;
-  const coordinates = linePoints.map(convertPoint);
-  let line = '';
-  if (coordinates.length > 1) {
-    const path = coordinates
-      .map((coord, idx) => `${idx === 0 ? 'M' : 'L'}${coord.cx.toFixed(2)} ${coord.cy.toFixed(2)}`)
-      .join(' ');
-    line = `<path class="node-detail__chart-trend" d="${path}" fill="none" stroke="${hexToRgba(seriesConfig.color, 0.5)}" stroke-width="1.5" aria-hidden="true"></path>`;
-  }
-  return `${line}${circleEntries.join('')}`;
-}
-
-/**
- * Render a vertical axis when visible.
- *
- * @param {Object} axis Axis descriptor.
- * @param {Object} dims Chart dimensions.
- * @returns {string} SVG markup for the axis or an empty string.
- */
-function renderYAxis(axis, dims) {
-  if (!axis || axis.visible === false) {
-    return '';
-  }
-  const x = resolveAxisX(axis.position, dims);
-  const ticks = axis.scale === 'log'
-    ? buildLogTicks(axis.min, axis.max)
-    : buildLinearTicks(axis.min, axis.max, axis.ticks);
-  const tickElements = ticks
-    .map(value => {
-      const y = scaleValueToAxis(value, axis, dims);
-      const tickLength = axis.position === 'left' || axis.position === 'leftSecondary' ? -4 : 4;
-      const textAnchor = axis.position === 'left' || axis.position === 'leftSecondary' ? 'end' : 'start';
-      const textOffset = axis.position === 'left' || axis.position === 'leftSecondary' ? -6 : 6;
-      return `
-        <g class="node-detail__chart-tick" aria-hidden="true">
-          <line x1="${x}" y1="${y.toFixed(2)}" x2="${(x + tickLength).toFixed(2)}" y2="${y.toFixed(2)}"></line>
-          <text x="${(x + textOffset).toFixed(2)}" y="${(y + 3).toFixed(2)}" text-anchor="${textAnchor}" dominant-baseline="middle">${escapeHtml(formatAxisTick(value, axis))}</text>
-        </g>
-      `;
-    })
-    .join('');
-  const labelPadding = axis.position === 'left' || axis.position === 'leftSecondary' ? -56 : 56;
-  const labelX = x + labelPadding;
-  const labelY = (dims.chartTop + dims.chartBottom) / 2;
-  const labelTransform = `rotate(-90 ${labelX.toFixed(2)} ${labelY.toFixed(2)})`;
-  return `
-    <g class="node-detail__chart-axis node-detail__chart-axis--y" aria-hidden="true">
-      <line x1="${x}" y1="${dims.chartTop}" x2="${x}" y2="${dims.chartBottom}"></line>
-      ${tickElements}
-      <text class="node-detail__chart-axis-label" x="${labelX.toFixed(2)}" y="${labelY.toFixed(2)}" text-anchor="middle" dominant-baseline="middle" transform="${labelTransform}">${escapeHtml(axis.label)}</text>
-    </g>
-  `;
-}
-
-/**
- * Render the horizontal floating seven-day axis with midnight ticks.
- *
- * @param {Object} dims Chart dimensions.
- * @param {number} domainStart Window start timestamp.
- * @param {number} domainEnd Window end timestamp.
- * @param {Array<number>} tickTimestamps Midnight tick timestamps.
- * @returns {string} SVG markup for the X axis.
- */
-function renderXAxis(dims, domainStart, domainEnd, tickTimestamps, { labelFormatter = formatCompactDate } = {}) {
-  const y = dims.chartBottom;
-  const ticks = tickTimestamps
-    .map(ts => {
-      const x = scaleTimestamp(ts, domainStart, domainEnd, dims);
-      const labelY = y + 18;
-      const xStr = x.toFixed(2);
-      const yStr = labelY.toFixed(2);
-      const label = labelFormatter(ts);
-      return `
-        <g class="node-detail__chart-tick" aria-hidden="true">
-          <line class="node-detail__chart-grid-line" x1="${xStr}" y1="${dims.chartTop}" x2="${xStr}" y2="${dims.chartBottom}"></line>
-          <text x="${xStr}" y="${yStr}" text-anchor="end" dominant-baseline="central" transform="rotate(-90 ${xStr} ${yStr})">${escapeHtml(label)}</text>
-        </g>
-      `;
-    })
-    .join('');
-  return `
-    <g class="node-detail__chart-axis node-detail__chart-axis--x" aria-hidden="true">
-      <line x1="${dims.margin.left}" y1="${y}" x2="${dims.width - dims.margin.right}" y2="${y}"></line>
-      ${ticks}
-    </g>
-  `;
-}
-
-/**
- * Render a single telemetry chart defined by ``spec``.
+ * Build a telemetry chart model from a specification and series entries.
  *
  * @param {Object} spec Chart specification.
  * @param {Array<{timestamp: number, snapshot: Object}>} entries Telemetry entries.
  * @param {number} nowMs Reference timestamp.
- * @returns {string} Rendered chart markup or an empty string.
+ * @param {Object} chartOptions Rendering overrides.
+ * @returns {Object|null} Chart model or ``null`` when empty.
  */
-function renderTelemetryChart(spec, entries, nowMs, chartOptions = {}) {
+function buildTelemetryChartModel(spec, entries, nowMs, chartOptions = {}) {
   const windowMs = Number.isFinite(chartOptions.windowMs) && chartOptions.windowMs > 0 ? chartOptions.windowMs : TELEMETRY_WINDOW_MS;
   const timeRangeLabel = stringOrNull(chartOptions.timeRangeLabel) ?? 'Last 7 days';
   const domainEnd = nowMs;
@@ -1170,7 +1004,7 @@ function renderTelemetryChart(spec, entries, nowMs, chartOptions = {}) {
     })
     .filter(entry => entry != null);
   if (seriesEntries.length === 0) {
-    return '';
+    return null;
   }
   const adjustedAxes = spec.axes.map(axis => {
     const resolvedMax = resolveAxisMax(axis, seriesEntries);
@@ -1188,22 +1022,33 @@ function renderTelemetryChart(spec, entries, nowMs, chartOptions = {}) {
     })
     .filter(entry => entry != null);
   if (plottedSeries.length === 0) {
-    return '';
+    return null;
   }
-  const axesMarkup = adjustedAxes.map(axis => renderYAxis(axis, dims)).join('');
   const tickBuilder = typeof chartOptions.xAxisTickBuilder === 'function' ? chartOptions.xAxisTickBuilder : buildMidnightTicks;
   const tickFormatter = typeof chartOptions.xAxisTickFormatter === 'function' ? chartOptions.xAxisTickFormatter : formatCompactDate;
-  const ticks = tickBuilder(nowMs, windowMs);
-  const xAxisMarkup = renderXAxis(dims, domainStart, domainEnd, ticks, { labelFormatter: tickFormatter });
-
-  const seriesMarkup = plottedSeries
-    .map(series =>
-      renderTelemetrySeries(series.config, series.points, series.axis, dims, domainStart, domainEnd, {
-        lineReducer: chartOptions.lineReducer,
-      }),
-    )
-    .join('');
-  const legendItems = plottedSeries
+  return {
+    id: spec.id,
+    title: spec.title,
+    timeRangeLabel,
+    domainStart,
+    domainEnd,
+    dims,
+    axes: adjustedAxes,
+    seriesEntries: plottedSeries,
+    ticks: tickBuilder(nowMs, windowMs),
+    tickFormatter,
+    lineReducer: typeof chartOptions.lineReducer === 'function' ? chartOptions.lineReducer : null,
+  };
+}
+
+/**
+ * Render a telemetry chart container for a chart model.
+ *
+ * @param {Object} model Chart model.
+ * @returns {string} Chart markup.
+ */
+function renderTelemetryChartMarkup(model) {
+  const legendItems = model.seriesEntries
     .map(series => {
       const legendLabel = stringOrNull(series.config.legend) ?? series.config.label;
       return `
@@ -1217,31 +1062,390 @@ function renderTelemetryChart(spec, entries, nowMs, chartOptions = {}) {
   const legendMarkup = legendItems
     ? `<div class="node-detail__chart-legend" aria-hidden="true">${legendItems}</div>`
     : '';
+  const ariaLabel = `${model.title} over last seven days`;
   return `
-    <figure class="node-detail__chart">
+    <figure class="node-detail__chart" data-telemetry-chart-id="${escapeHtml(model.id)}">
       <figcaption class="node-detail__chart-header">
-        <h4>${escapeHtml(spec.title)}</h4>
-        <span>${escapeHtml(timeRangeLabel)}</span>
+        <h4>${escapeHtml(model.title)}</h4>
+        <span>${escapeHtml(model.timeRangeLabel)}</span>
       </figcaption>
-      <svg viewBox="0 0 ${dims.width} ${dims.height}" preserveAspectRatio="xMidYMid meet" role="img" aria-label="${escapeHtml(`${spec.title} over last seven days`)}">
-        ${axesMarkup}
-        ${xAxisMarkup}
-        ${seriesMarkup}
-      </svg>
+      <div class="node-detail__chart-plot" data-telemetry-plot role="img" aria-label="${escapeHtml(ariaLabel)}"></div>
       ${legendMarkup}
     </figure>
   `;
 }
 
 /**
- * Render the telemetry charts for the supplied node when telemetry snapshots
- * exist.
+ * Build a sorted timestamp index shared across series entries.
+ *
+ * @param {Array<Object>} seriesEntries Plotted series entries.
+ * @param {Function|null} lineReducer Optional line reducer.
+ * @returns {{timestamps: Array<number>, indexByTimestamp: Map<number, number>}} Timestamp index.
+ */
+function buildChartTimestampIndex(seriesEntries, lineReducer) {
+  const timestampSet = new Set();
+  for (const entry of seriesEntries) {
+    if (!entry || !Array.isArray(entry.points)) continue;
+    entry.points.forEach(point => {
+      if (point && Number.isFinite(point.timestamp)) {
+        timestampSet.add(point.timestamp);
+      }
+    });
+    if (typeof lineReducer === 'function') {
+      const reduced = lineReducer(entry.points);
+      if (Array.isArray(reduced)) {
+        reduced.forEach(point => {
+          if (point && Number.isFinite(point.timestamp)) {
+            timestampSet.add(point.timestamp);
+          }
+        });
+      }
+    }
+  }
+  const timestamps = Array.from(timestampSet).sort((a, b) => a - b);
+  const indexByTimestamp = new Map(timestamps.map((ts, idx) => [ts, idx]));
+  return { timestamps, indexByTimestamp };
+}
+
+/**
+ * Convert a list of points into an aligned values array.
+ *
+ * @param {Array<{timestamp: number, value: number}>} points Series points.
+ * @param {Map<number, number>} indexByTimestamp Timestamp index.
+ * @param {number} length Length of the output array.
+ * @returns {Array<number|null>} Values aligned to timestamps.
+ */
+function mapSeriesValues(points, indexByTimestamp, length) {
+  const values = Array.from({ length }, () => null);
+  if (!Array.isArray(points)) {
+    return values;
+  }
+  for (const point of points) {
+    if (!point || !Number.isFinite(point.timestamp)) continue;
+    const idx = indexByTimestamp.get(point.timestamp);
+    if (idx == null) continue;
+    values[idx] = Number.isFinite(point.value) ? point.value : null;
+  }
+  return values;
+}
+
+/**
+ * Build uPlot series and data arrays for a chart model.
+ *
+ * @param {Object} model Chart model.
+ * @returns {{data: Array<Array<number|null>>, series: Array<Object>}} uPlot data and series config.
+ */
+function buildTelemetryChartData(model) {
+  const { timestamps, indexByTimestamp } = buildChartTimestampIndex(model.seriesEntries, model.lineReducer);
+  const data = [timestamps];
+  const series = [{ label: 'Time' }];
+
+  model.seriesEntries.forEach(entry => {
+    const baseConfig = {
+      label: entry.config.label,
+      scale: entry.axis.id,
+    };
+    if (model.lineReducer) {
+      const reducedPoints = model.lineReducer(entry.points);
+      const linePoints = Array.isArray(reducedPoints) && reducedPoints.length > 0 ? reducedPoints : entry.points;
+      const lineValues = mapSeriesValues(linePoints, indexByTimestamp, timestamps.length);
+      series.push({
+        ...baseConfig,
+        stroke: hexToRgba(entry.config.color, 0.5),
+        width: 1.5,
+        points: { show: false },
+      });
+      data.push(lineValues);
+
+      const pointValues = mapSeriesValues(entry.points, indexByTimestamp, timestamps.length);
+      series.push({
+        ...baseConfig,
+        stroke: entry.config.color,
+        width: 0,
+        points: { show: true, size: 6, width: 1 },
+      });
+      data.push(pointValues);
+    } else {
+      const values = mapSeriesValues(entry.points, indexByTimestamp, timestamps.length);
+      series.push({
+        ...baseConfig,
+        stroke: entry.config.color,
+        width: 1.5,
+        points: { show: true, size: 6, width: 1 },
+      });
+      data.push(values);
+    }
+  });
+
+  return { data, series };
+}
+
+/**
+ * Build uPlot chart configuration and data for a telemetry chart.
+ *
+ * @param {Object} model Chart model.
+ * @returns {{options: Object, data: Array<Array<number|null>>}} uPlot config and data.
+ */
+function buildUPlotChartConfig(model, { width, height, axisColor, gridColor } = {}) {
+  const { data, series } = buildTelemetryChartData(model);
+  const fallbackWidth = Math.round(model.dims.width * 1.8);
+  const resolvedWidth = Number.isFinite(width) && width > 0 ? width : fallbackWidth;
+  const resolvedHeight = Number.isFinite(height) && height > 0 ? height : model.dims.height;
+  const axisStroke = stringOrNull(axisColor) ?? '#5c6773';
+  const gridStroke = stringOrNull(gridColor) ?? 'rgba(12, 15, 18, 0.08)';
+  const axes = [
+    {
+      scale: 'x',
+      side: 2,
+      stroke: axisStroke,
+      grid: { show: true, stroke: gridStroke },
+      splits: () => model.ticks,
+      values: (u, splits) => splits.map(value => model.tickFormatter(value)),
+    },
+  ];
+  const scales = {
+    x: {
+      time: true,
+      range: () => [model.domainStart, model.domainEnd],
+    },
+  };
+
+  model.axes.forEach(axis => {
+    const ticks = axis.scale === 'log'
+      ? buildLogTicks(axis.min, axis.max)
+      : buildLinearTicks(axis.min, axis.max, axis.ticks);
+    const side = axis.position === 'right' || axis.position === 'rightSecondary' ? 1 : 3;
+    axes.push({
+      scale: axis.id,
+      side,
+      show: axis.visible !== false,
+      stroke: axisStroke,
+      grid: { show: false },
+      label: axis.label,
+      splits: () => ticks,
+      values: (u, splits) => splits.map(value => formatAxisTick(value, axis)),
+    });
+    scales[axis.id] = {
+      distr: axis.scale === 'log' ? 3 : 1,
+      log: axis.scale === 'log' ? 10 : undefined,
+      range: () => [axis.min, axis.max],
+    };
+  });
+
+  return {
+    options: {
+      width: resolvedWidth,
+      height: resolvedHeight,
+      padding: [
+        model.dims.margin.top,
+        model.dims.margin.right,
+        model.dims.margin.bottom,
+        model.dims.margin.left,
+      ],
+      legend: { show: false },
+      series,
+      axes,
+      scales,
+    },
+    data,
+  };
+}
+
+/**
+ * Instantiate uPlot charts for the provided chart models.
+ *
+ * @param {Array<Object>} chartModels Chart models to render.
+ * @param {{root?: ParentNode, uPlotImpl?: Function}} [options] Rendering options.
+ * @returns {Array<Object>} Instantiated uPlot charts.
+ */
+export function mountTelemetryCharts(chartModels, { root, uPlotImpl } = {}) {
+  if (!Array.isArray(chartModels) || chartModels.length === 0) {
+    return [];
+  }
+  const host = root ?? globalThis.document;
+  if (!host || typeof host.querySelector !== 'function') {
+    return [];
+  }
+  const uPlotCtor = typeof uPlotImpl === 'function' ? uPlotImpl : globalThis.uPlot;
+  if (typeof uPlotCtor !== 'function') {
+    console.warn('uPlot is unavailable; telemetry charts will not render.');
+    return [];
+  }
+
+  const instances = [];
+  const colorRoot = host?.ownerDocument?.body ?? host?.body ?? globalThis.document?.body ?? null;
+  const axisColor = colorRoot && typeof globalThis.getComputedStyle === 'function'
+    ? globalThis.getComputedStyle(colorRoot).getPropertyValue('--muted').trim()
+    : null;
+  const gridColor = colorRoot && typeof globalThis.getComputedStyle === 'function'
+    ? globalThis.getComputedStyle(colorRoot).getPropertyValue('--line').trim()
+    : null;
+  chartModels.forEach(model => {
+    const container = host.querySelector(`[data-telemetry-chart-id="${model.id}"]`);
+    if (!container) return;
+    const plotRoot = container.querySelector('[data-telemetry-plot]');
+    if (!plotRoot) return;
+    plotRoot.innerHTML = '';
+    const plotWidth = plotRoot.clientWidth || plotRoot.getBoundingClientRect?.().width;
+    const plotHeight = plotRoot.clientHeight || plotRoot.getBoundingClientRect?.().height;
+    const { options, data } = buildUPlotChartConfig(model, {
+      width: plotWidth ? Math.round(plotWidth) : undefined,
+      height: plotHeight ? Math.round(plotHeight) : undefined,
+      axisColor: axisColor || undefined,
+      gridColor: gridColor || undefined,
+    });
+    const instance = new uPlotCtor(options, data, plotRoot);
+    instance.__potatoMeshRoot = plotRoot;
+    instances.push(instance);
+  });
+  registerTelemetryChartResize(instances);
+  return instances;
+}
+
+const telemetryResizeRegistry = new Set();
+const telemetryResizeObservers = new WeakMap();
+let telemetryResizeListenerAttached = false;
+let telemetryResizeDebounceId = null;
+const TELEMETRY_RESIZE_DEBOUNCE_MS = 120;
+
+function resizeUPlotInstance(instance) {
+  if (!instance || typeof instance.setSize !== 'function') {
+    return;
+  }
+  const root = instance.__potatoMeshRoot ?? instance.root ?? null;
+  if (!root) return;
+  const rect = typeof root.getBoundingClientRect === 'function' ? root.getBoundingClientRect() : null;
+  const width = Number.isFinite(root.clientWidth) ? root.clientWidth : rect?.width;
+  const height = Number.isFinite(root.clientHeight) ? root.clientHeight : rect?.height;
+  if (!width || !height) return;
+  instance.setSize({ width: Math.round(width), height: Math.round(height) });
+}
+
+function registerTelemetryChartResize(instances) {
+  if (!Array.isArray(instances) || instances.length === 0) {
+    return;
+  }
+  const scheduleResize = () => {
+    if (telemetryResizeDebounceId != null) {
+      clearTimeout(telemetryResizeDebounceId);
+    }
+    telemetryResizeDebounceId = setTimeout(() => {
+      telemetryResizeDebounceId = null;
+      telemetryResizeRegistry.forEach(instance => resizeUPlotInstance(instance));
+    }, TELEMETRY_RESIZE_DEBOUNCE_MS);
+  };
+  instances.forEach(instance => {
+    telemetryResizeRegistry.add(instance);
+    resizeUPlotInstance(instance);
+    if (typeof globalThis.ResizeObserver === 'function') {
+      if (telemetryResizeObservers.has(instance)) return;
+      const observer = new globalThis.ResizeObserver(scheduleResize);
+      telemetryResizeObservers.set(instance, observer);
+      const root = instance.__potatoMeshRoot ?? instance.root ?? null;
+      if (root && typeof observer.observe === 'function') {
+        observer.observe(root);
+      }
+    }
+  });
+  if (!telemetryResizeListenerAttached && typeof globalThis.addEventListener === 'function') {
+    globalThis.addEventListener('resize', () => {
+      scheduleResize();
+    });
+    telemetryResizeListenerAttached = true;
+  }
+}
+
+function defaultLoadUPlot({ documentRef, onLoad }) {
+  if (!documentRef || typeof documentRef.querySelector !== 'function') {
+    return false;
+  }
+  const existing = documentRef.querySelector('script[data-uplot-loader="true"]');
+  if (existing) {
+    if (existing.dataset.loaded === 'true' && typeof onLoad === 'function') {
+      onLoad();
+    } else if (typeof existing.addEventListener === 'function' && typeof onLoad === 'function') {
+      existing.addEventListener('load', onLoad, { once: true });
+    }
+    return true;
+  }
+  if (typeof documentRef.createElement !== 'function') {
+    return false;
+  }
+  const script = documentRef.createElement('script');
+  script.src = '/assets/vendor/uplot/uPlot.iife.min.js';
+  script.defer = true;
+  script.dataset.uplotLoader = 'true';
+  if (typeof script.addEventListener === 'function') {
+    script.addEventListener('load', () => {
+      script.dataset.loaded = 'true';
+      if (typeof onLoad === 'function') {
+        onLoad();
+      }
+    });
+  }
+  const head = documentRef.head ?? documentRef.body;
+  if (head && typeof head.appendChild === 'function') {
+    head.appendChild(script);
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Mount telemetry charts, retrying briefly if uPlot has not loaded yet.
+ *
+ * @param {Array<Object>} chartModels Chart models to render.
+ * @param {{root?: ParentNode, uPlotImpl?: Function, loadUPlot?: Function}} [options] Rendering options.
+ * @returns {Array<Object>} Instantiated uPlot charts.
+ */
+export function mountTelemetryChartsWithRetry(chartModels, { root, uPlotImpl, loadUPlot } = {}) {
+  const instances = mountTelemetryCharts(chartModels, { root, uPlotImpl });
+  if (instances.length > 0 || typeof uPlotImpl === 'function') {
+    return instances;
+  }
+  const host = root ?? globalThis.document;
+  if (!host || typeof host.querySelector !== 'function') {
+    return instances;
+  }
+  let mounted = false;
+  let attempts = 0;
+  const maxAttempts = 10;
+  const retryDelayMs = 50;
+  const retry = () => {
+    if (mounted) return;
+    attempts += 1;
+    const next = mountTelemetryCharts(chartModels, { root, uPlotImpl });
+    if (next.length > 0) {
+      mounted = true;
+      return;
+    }
+    if (attempts >= maxAttempts) {
+      return;
+    }
+    setTimeout(retry, retryDelayMs);
+  };
+  const loadFn = typeof loadUPlot === 'function' ? loadUPlot : defaultLoadUPlot;
+  loadFn({
+    documentRef: host.ownerDocument ?? globalThis.document,
+    onLoad: () => {
+      const next = mountTelemetryCharts(chartModels, { root, uPlotImpl });
+      if (next.length > 0) {
+        mounted = true;
+      }
+    },
+  });
+  setTimeout(retry, 0);
+  return instances;
+}
+
+/**
+ * Create chart markup and models for telemetry charts.
  *
  * @param {Object} node Normalised node payload.
- * @param {{ nowMs?: number }} [options] Rendering options.
- * @returns {string} Chart grid markup or an empty string.
+ * @param {{ nowMs?: number, chartOptions?: Object }} [options] Rendering options.
+ * @returns {{chartsHtml: string, chartModels: Array<Object>}} Chart markup and models.
  */
-export function renderTelemetryCharts(node, { nowMs = Date.now(), chartOptions = {} } = {}) {
+export function createTelemetryCharts(node, { nowMs = Date.now(), chartOptions = {} } = {}) {
   const telemetrySource = node?.rawSources?.telemetry;
   const snapshotHistory = Array.isArray(node?.rawSources?.telemetrySnapshots) && node.rawSources.telemetrySnapshots.length > 0
     ? node.rawSources.telemetrySnapshots
@@ -1251,7 +1455,7 @@ export function renderTelemetryCharts(node, { nowMs = Date.now(), chartOptions =
     : null;
   const rawSnapshots = snapshotHistory ?? aggregatedSnapshots;
   if (!Array.isArray(rawSnapshots) || rawSnapshots.length === 0) {
-    return '';
+    return { chartsHtml: '', chartModels: [] };
   }
   const entries = rawSnapshots
     .map(snapshot => {
@@ -1262,21 +1466,34 @@ export function renderTelemetryCharts(node, { nowMs = Date.now(), chartOptions =
     .filter(entry => entry != null && entry.timestamp >= nowMs - TELEMETRY_WINDOW_MS && entry.timestamp <= nowMs)
     .sort((a, b) => a.timestamp - b.timestamp);
   if (entries.length === 0) {
-    return '';
+    return { chartsHtml: '', chartModels: [] };
   }
-  const charts = TELEMETRY_CHART_SPECS
-    .map(spec => renderTelemetryChart(spec, entries, nowMs, chartOptions))
-    .filter(chart => stringOrNull(chart));
-  if (charts.length === 0) {
-    return '';
+  const chartModels = TELEMETRY_CHART_SPECS
+    .map(spec => buildTelemetryChartModel(spec, entries, nowMs, chartOptions))
+    .filter(model => model != null);
+  if (chartModels.length === 0) {
+    return { chartsHtml: '', chartModels: [] };
   }
-  return `
+  const chartsHtml = `
     <section class="node-detail__charts">
       <div class="node-detail__charts-grid">
-        ${charts.join('')}
+        ${chartModels.map(model => renderTelemetryChartMarkup(model)).join('')}
       </div>
     </section>
   `;
+  return { chartsHtml, chartModels };
+}
+
+/**
+ * Render the telemetry charts for the supplied node when telemetry snapshots
+ * exist.
+ *
+ * @param {Object} node Normalised node payload.
+ * @param {{ nowMs?: number }} [options] Rendering options.
+ * @returns {string} Chart grid markup or an empty string.
+ */
+export function renderTelemetryCharts(node, { nowMs = Date.now(), chartOptions = {} } = {}) {
+  return createTelemetryCharts(node, { nowMs, chartOptions }).chartsHtml;
 }
 
 /**
@@ -2298,6 +2515,7 @@ function renderTraceroutes(traces, renderShortHtml, { roleIndex = null, node = n
   *   messages?: Array<Object>,
  *   traces?: Array<Object>,
   *   renderShortHtml: Function,
+  *   chartsHtml?: string,
   * }} options Rendering options.
  * @returns {string} HTML fragment representing the detail view.
  */
@@ -2307,6 +2525,7 @@ function renderNodeDetailHtml(node, {
   traces = [],
   renderShortHtml,
   roleIndex = null,
+  chartsHtml = null,
   chartNowMs = Date.now(),
 } = {}) {
   const roleAwareBadge = renderRoleAwareBadge(renderShortHtml, {
@@ -2320,7 +2539,7 @@ function renderNodeDetailHtml(node, {
   const longName = stringOrNull(node.longName ?? node.long_name);
   const identifier = stringOrNull(node.nodeId ?? node.node_id);
   const tableHtml = renderSingleNodeTable(node, renderShortHtml);
-  const chartsHtml = renderTelemetryCharts(node, { nowMs: chartNowMs });
+  const telemetryChartsHtml = stringOrNull(chartsHtml) ?? renderTelemetryCharts(node, { nowMs: chartNowMs });
   const neighborsHtml = renderNeighborGroups(node, neighbors, renderShortHtml, { roleIndex });
   const tracesHtml = renderTraceroutes(traces, renderShortHtml, { roleIndex, node });
   const messagesHtml = renderMessages(messages, renderShortHtml, node);
@@ -2346,7 +2565,7 @@ function renderNodeDetailHtml(node, {
     <header class="node-detail__header">
       <h2 class="node-detail__title">${badgeHtml}${nameHtml}${identifierHtml}</h2>
     </header>
-    ${chartsHtml ?? ''}
+    ${telemetryChartsHtml ?? ''}
     ${tableSection}
     ${contentHtml}
   `;
@@ -2460,15 +2679,17 @@ async function fetchTracesForNode(identifier, { fetchImpl } = {}) {
 }
 
 /**
- * Initialise the node detail page by hydrating the DOM with fetched data.
+ * Fetch node detail data and render the HTML fragment.
  *
  * @param {{
  *   document?: Document,
  *   fetchImpl?: Function,
  *   refreshImpl?: Function,
  *   renderShortHtml?: Function,
+ *   chartNowMs?: number,
+ *   chartOptions?: Object,
  * }} options Optional overrides for testing.
- * @returns {Promise<boolean>} ``true`` when the node was rendered successfully.
+ * @returns {Promise<string|{html: string, chartModels: Array<Object>}>} Rendered markup or chart models when requested.
  */
 export async function fetchNodeDetailHtml(referenceData, options = {}) {
   if (!referenceData || typeof referenceData !== 'object') {
@@ -2498,15 +2719,38 @@ export async function fetchNodeDetailHtml(referenceData, options = {}) {
     fetchTracesForNode(messageIdentifier, { fetchImpl: options.fetchImpl }),
   ]);
   const roleIndex = await buildTraceRoleIndex(traces, neighborRoleIndex, { fetchImpl: options.fetchImpl });
-  return renderNodeDetailHtml(node, {
+  const chartNowMs = Number.isFinite(options.chartNowMs) ? options.chartNowMs : Date.now();
+  const chartState = createTelemetryCharts(node, {
+    nowMs: chartNowMs,
+    chartOptions: options.chartOptions ?? {},
+  });
+  const html = renderNodeDetailHtml(node, {
     neighbors: node.neighbors,
     messages,
     traces,
     renderShortHtml,
     roleIndex,
+    chartsHtml: chartState.chartsHtml,
+    chartNowMs,
   });
+  if (options.returnState === true) {
+    return { html, chartModels: chartState.chartModels };
+  }
+  return html;
 }
 
+/**
+ * Initialise the standalone node detail page and mount telemetry charts.
+ *
+ * @param {{
+ *   document?: Document,
+ *   fetchImpl?: Function,
+ *   refreshImpl?: Function,
+ *   renderShortHtml?: Function,
+ *   uPlotImpl?: Function,
+ * }} options Optional overrides for testing.
+ * @returns {Promise<boolean>} ``true`` when the node was rendered successfully.
+ */
 export async function initializeNodeDetailPage(options = {}) {
   const documentRef = options.document ?? globalThis.document;
   if (!documentRef || typeof documentRef.querySelector !== 'function') {
@@ -2543,13 +2787,15 @@ export async function initializeNodeDetailPage(options = {}) {
   const privateMode = (root.dataset?.privateMode ?? '').toLowerCase() === 'true';
 
   try {
-    const html = await fetchNodeDetailHtml(referenceData, {
+    const result = await fetchNodeDetailHtml(referenceData, {
       fetchImpl: options.fetchImpl,
       refreshImpl,
       renderShortHtml: options.renderShortHtml,
       privateMode,
+      returnState: true,
     });
-    root.innerHTML = html;
+    root.innerHTML = result.html;
+    mountTelemetryChartsWithRetry(result.chartModels, { root, uPlotImpl: options.uPlotImpl });
     return true;
   } catch (error) {
     console.error('Failed to render node detail page', error);
@@ -2586,7 +2832,11 @@ export const __testUtils = {
   categoriseNeighbors,
   renderNeighborGroups,
   renderSingleNodeTable,
+  createTelemetryCharts,
   renderTelemetryCharts,
+  mountTelemetryCharts,
+  mountTelemetryChartsWithRetry,
+  buildUPlotChartConfig,
   renderMessages,
   renderTraceroutes,
   renderTracePath,
diff --git a/web/public/assets/styles/base.css b/web/public/assets/styles/base.css
index e0d92020..4535460a 100644
--- a/web/public/assets/styles/base.css
+++ b/web/public/assets/styles/base.css
@@ -994,7 +994,7 @@ body.dark .node-detail-overlay__close:hover {
 .node-detail__charts-grid {
   display: grid;
   gap: 24px;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 640px), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 1152px), 1fr));
 }
 
 .node-detail__chart {
@@ -1026,10 +1026,45 @@ body.dark .node-detail-overlay__close:hover {
   font-size: 1rem;
 }
 
-.node-detail__chart svg {
+.node-detail__chart-plot {
   width: 100%;
-  height: auto;
+  height: clamp(240px, 50vw, 360px);
   max-height: 420px;
+  overflow: hidden;
+}
+
+.node-detail__chart-plot .uplot {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  line-height: 0;
+  position: relative;
+}
+
+.node-detail__chart-plot .uplot .u-wrap,
+.node-detail__chart-plot .uplot .u-under,
+.node-detail__chart-plot .uplot .u-over {
+  top: 0;
+  left: 0;
+}
+
+.node-detail__chart-plot .u-axis,
+.node-detail__chart-plot .u-axis .u-label,
+.node-detail__chart-plot .u-axis .u-value,
+.node-detail__chart-plot .u-axis text,
+.node-detail__chart-plot .u-axis-label {
+  color: var(--muted) !important;
+  fill: var(--muted) !important;
+  font-size: 0.95rem;
+}
+
+.node-detail__chart-plot .u-grid {
+  stroke: rgba(12, 15, 18, 0.08);
+  stroke-width: 1;
+}
+
+body.dark .node-detail__chart-plot .u-grid {
+  stroke: rgba(255, 255, 255, 0.15);
 }
 
 .node-detail__chart-axis line {
diff --git a/web/public/assets/vendor/uplot/uPlot.iife.min.js b/web/public/assets/vendor/uplot/uPlot.iife.min.js
new file mode 100644
index 00000000..047f29b6
--- /dev/null
+++ b/web/public/assets/vendor/uplot/uPlot.iife.min.js
@@ -0,0 +1,2 @@
+/*! https://github.com/leeoniya/uPlot (v1.6.32) */
+var uPlot=function(){"use strict";const l="u-off",e="u-label",t="width",n="height",i="top",o="bottom",s="left",r="right",u="#000",a=u+"0",f="mousemove",c="mousedown",h="mouseup",d="mouseenter",p="mouseleave",m="dblclick",g="change",x="dppxchange",w="--",_="undefined"!=typeof window,b=_?document:null,v=_?window:null,k=_?navigator:null;let y,M;function S(l,e){if(null!=e){let t=l.classList;!t.contains(e)&&t.add(e)}}function T(l,e){let t=l.classList;t.contains(e)&&t.remove(e)}function E(l,e,t){l.style[e]=t+"px"}function z(l,e,t,n){let i=b.createElement(l);return null!=e&&S(i,e),null!=t&&t.insertBefore(i,n),i}function D(l,e){return z("div",l,e)}const P=new WeakMap;function A(e,t,n,i,o){let s="translate("+t+"px,"+n+"px)";s!=P.get(e)&&(e.style.transform=s,P.set(e,s),0>t||0>n||t>i||n>o?S(e,l):T(e,l))}const W=new WeakMap;function Y(l,e,t){let n=e+t;n!=W.get(l)&&(W.set(l,n),l.style.background=e,l.style.borderColor=t)}const C=new WeakMap;function H(l,e,t,n){let i=e+""+t;i!=C.get(l)&&(C.set(l,i),l.style.height=t+"px",l.style.width=e+"px",l.style.marginLeft=n?-e/2+"px":0,l.style.marginTop=n?-t/2+"px":0)}const F={passive:!0},R={...F,capture:!0};function G(l,e,t,n){e.addEventListener(l,t,n?R:F)}function I(l,e,t){e.removeEventListener(l,t,F)}function L(l,e,t,n){let i;t=t||0;let o=2147483647>=(n=n||e.length-1);for(;n-t>1;)i=o?t+n>>1:sl((t+n)/2),l>e[i]?t=i:n=i;return l-e[t]>e[n]-l?n:t}function O(l){return(e,t,n)=>{let i=-1,o=-1;for(let o=t;n>=o;o++)if(l(e[o])){i=o;break}for(let i=n;i>=t;i--)if(l(e[i])){o=i;break}return[i,o]}}_&&function l(){let e=devicePixelRatio;y!=e&&(y=e,M&&I(g,M,l),M=matchMedia(`(min-resolution: ${y-.001}dppx) and (max-resolution: ${y+.001}dppx)`),G(g,M,l),v.dispatchEvent(new CustomEvent(x)))}();const N=l=>null!=l,j=l=>null!=l&&l>0,U=O(N),V=O(j);function B(l,e,t,n){let i=hl(l),o=hl(e);l==e&&(-1==i?(l*=t,e/=t):(l/=t,e*=t));let s=10==t?dl:pl,r=1==o?ul:sl,u=(1==i?sl:ul)(s(ol(l))),a=r(s(ol(e))),f=cl(t,u),c=cl(t,a);return 10==t&&(0>u&&(f=Al(f,-u)),0>a&&(c=Al(c,-a))),n||2==t?(l=f*i,e=c*o):(l=Pl(l,f),e=Dl(e,c)),[l,e]}function $(l,e,t,n){let i=B(l,e,t,n);return 0==l&&(i[0]=0),0==e&&(i[1]=0),i}const J=.1,q={mode:3,pad:J},K={pad:0,soft:null,mode:0},X={min:K,max:K};function Z(l,e,t,n){return Ol(t)?ll(l,e,t):(K.pad=t,K.soft=n?0:null,K.mode=n?3:0,ll(l,e,X))}function Q(l,e){return null==l?e:l}function ll(l,e,t){let n=t.min,i=t.max,o=Q(n.pad,0),s=Q(i.pad,0),r=Q(n.hard,-gl),u=Q(i.hard,gl),a=Q(n.soft,gl),f=Q(i.soft,-gl),c=Q(n.mode,0),h=Q(i.mode,0),d=e-l,p=dl(d),m=fl(ol(l),ol(e)),g=dl(m),x=ol(g-p);(1e-24>d||x>10)&&(d=0,0!=l&&0!=e||(d=1e-24,2==c&&a!=gl&&(o=0),2==h&&f!=-gl&&(s=0)));let w=d||m||1e3,_=dl(w),b=cl(10,sl(_)),v=Al(Pl(l-w*(0==d?0==l?.1:1:o),b/10),24),k=a>l||1!=c&&(3!=c||v>a)&&(2!=c||a>v)?gl:a,y=fl(r,k>v&&l>=k?k:al(k,v)),M=Al(Dl(e+w*(0==d?0==e?.1:1:s),b/10),24),S=e>f||1!=h&&(3!=h||f>M)&&(2!=h||M>f)?-gl:f,T=al(u,M>S&&S>=e?S:fl(S,M));return y==T&&0==y&&(T=100),[y,T]}const el=new Intl.NumberFormat(_?k.language:"en-US"),tl=l=>el.format(l),nl=Math,il=nl.PI,ol=nl.abs,sl=nl.floor,rl=nl.round,ul=nl.ceil,al=nl.min,fl=nl.max,cl=nl.pow,hl=nl.sign,dl=nl.log10,pl=nl.log2,ml=(l,e=1)=>nl.asinh(l/e),gl=1/0;function xl(l){return 1+(0|dl((l^l>>31)-(l>>31)))}function wl(l,e,t){return al(fl(l,e),t)}function _l(l){return"function"==typeof l}function bl(l){return _l(l)?l:()=>l}const vl=l=>l,kl=(l,e)=>e,yl=()=>null,Ml=()=>!0,Sl=(l,e)=>l==e,Tl=/\.\d*?(?=9{6,}|0{6,})/gm,El=l=>{if(Il(l)||Wl.has(l))return l;const e=""+l,t=e.match(Tl);if(null==t)return l;let n=t[0].length-1;if(-1!=e.indexOf("e-")){let[l,t]=e.split("e");return+`${El(l)}e${t}`}return Al(l,n)};function zl(l,e){return El(Al(El(l/e))*e)}function Dl(l,e){return El(ul(El(l/e))*e)}function Pl(l,e){return El(sl(El(l/e))*e)}function Al(l,e=0){if(Il(l))return l;let t=10**e;return rl(l*t*(1+Number.EPSILON))/t}const Wl=new Map;function Yl(l){return((""+l).split(".")[1]||"").length}function Cl(l,e,t,n){let i=[],o=n.map(Yl);for(let s=e;t>s;s++){let e=ol(s),t=Al(cl(l,s),e);for(let r=0;n.length>r;r++){let u=10==l?+`${n[r]}e${s}`:n[r]*t,a=(0>s?e:0)+(o[r]>s?o[r]:0),f=10==l?u:Al(u,a);i.push(f),Wl.set(f,a)}}return i}const Hl={},Fl=[],Rl=[null,null],Gl=Array.isArray,Il=Number.isInteger;function Ll(l){return"string"==typeof l}function Ol(l){let e=!1;if(null!=l){let t=l.constructor;e=null==t||t==Object}return e}function Nl(l){return null!=l&&"object"==typeof l}const jl=Object.getPrototypeOf(Uint8Array),Ul="__proto__";function Vl(l,e=Ol){let t;if(Gl(l)){let n=l.find((l=>null!=l));if(Gl(n)||e(n)){t=Array(l.length);for(let n=0;l.length>n;n++)t[n]=Vl(l[n],e)}else t=l.slice()}else if(l instanceof jl)t=l.slice();else if(e(l)){t={};for(let n in l)n!=Ul&&(t[n]=Vl(l[n],e))}else t=l;return t}function Bl(l){let e=arguments;for(let t=1;e.length>t;t++){let n=e[t];for(let e in n)e!=Ul&&(Ol(l[e])?Bl(l[e],Vl(n[e])):l[e]=Vl(n[e]))}return l}function $l(l,e,t){for(let n,i=0,o=-1;e.length>i;i++){let s=e[i];if(s>o){for(n=s-1;n>=0&&null==l[n];)l[n--]=null;for(n=s+1;t>n&&null==l[n];)l[o=n++]=null}}}const Jl="undefined"==typeof queueMicrotask?l=>Promise.resolve().then(l):queueMicrotask,ql=["January","February","March","April","May","June","July","August","September","October","November","December"],Kl=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];function Xl(l){return l.slice(0,3)}const Zl=Kl.map(Xl),Ql=ql.map(Xl),le={MMMM:ql,MMM:Ql,WWWW:Kl,WWW:Zl};function ee(l){return(10>l?"0":"")+l}const te={YYYY:l=>l.getFullYear(),YY:l=>(l.getFullYear()+"").slice(2),MMMM:(l,e)=>e.MMMM[l.getMonth()],MMM:(l,e)=>e.MMM[l.getMonth()],MM:l=>ee(l.getMonth()+1),M:l=>l.getMonth()+1,DD:l=>ee(l.getDate()),D:l=>l.getDate(),WWWW:(l,e)=>e.WWWW[l.getDay()],WWW:(l,e)=>e.WWW[l.getDay()],HH:l=>ee(l.getHours()),H:l=>l.getHours(),h:l=>{let e=l.getHours();return 0==e?12:e>12?e-12:e},AA:l=>12>l.getHours()?"AM":"PM",aa:l=>12>l.getHours()?"am":"pm",a:l=>12>l.getHours()?"a":"p",mm:l=>ee(l.getMinutes()),m:l=>l.getMinutes(),ss:l=>ee(l.getSeconds()),s:l=>l.getSeconds(),fff:l=>function(l){return(10>l?"00":100>l?"0":"")+l}(l.getMilliseconds())};function ne(l,e){e=e||le;let t,n=[],i=/\{([a-z]+)\}|[^{]+/gi;for(;t=i.exec(l);)n.push("{"==t[0][0]?te[t[1]]:t[0]);return l=>{let t="";for(let i=0;n.length>i;i++)t+="string"==typeof n[i]?n[i]:n[i](l,e);return t}}const ie=(new Intl.DateTimeFormat).resolvedOptions().timeZone,oe=l=>l%1==0,se=[1,2,2.5,5],re=Cl(10,-32,0,se),ue=Cl(10,0,32,se),ae=ue.filter(oe),fe=re.concat(ue),ce="{YYYY}",he="\n"+ce,de="{M}/{D}",pe="\n"+de,me=pe+"/{YY}",ge="{aa}",xe="{h}:{mm}"+ge,we="\n"+xe,_e=":{ss}",be=null;function ve(l){let e=1e3*l,t=60*e,n=60*t,i=24*n,o=30*i,s=365*i;return[(1==l?Cl(10,0,3,se).filter(oe):Cl(10,-3,0,se)).concat([e,5*e,10*e,15*e,30*e,t,5*t,10*t,15*t,30*t,n,2*n,3*n,4*n,6*n,8*n,12*n,i,2*i,3*i,4*i,5*i,6*i,7*i,8*i,9*i,10*i,15*i,o,2*o,3*o,4*o,6*o,s,2*s,5*s,10*s,25*s,50*s,100*s]),[[s,ce,be,be,be,be,be,be,1],[28*i,"{MMM}",he,be,be,be,be,be,1],[i,de,he,be,be,be,be,be,1],[n,"{h}"+ge,me,be,pe,be,be,be,1],[t,xe,me,be,pe,be,be,be,1],[e,_e,me+" "+xe,be,pe+" "+xe,be,we,be,1],[l,_e+".{fff}",me+" "+xe,be,pe+" "+xe,be,we,be,1]],function(e){return(r,u,a,f,c,h)=>{let d=[],p=c>=s,m=c>=o&&s>c,g=e(a),x=Al(g*l,3),w=Pe(g.getFullYear(),p?0:g.getMonth(),m||p?1:g.getDate()),_=Al(w*l,3);if(m||p){let t=m?c/o:0,n=p?c/s:0,i=x==_?x:Al(Pe(w.getFullYear()+n,w.getMonth()+t,1)*l,3),r=new Date(rl(i/l)),u=r.getFullYear(),a=r.getMonth();for(let o=0;f>=i;o++){let s=Pe(u+n*o,a+t*o,1),r=s-e(Al(s*l,3));i=Al((+s+r)*l,3),i>f||d.push(i)}}else{let o=i>c?c:i,s=_+(sl(a)-sl(x))+Dl(x-_,o);d.push(s);let p=e(s),m=p.getHours()+p.getMinutes()/t+p.getSeconds()/n,g=c/n,w=h/r.axes[u]._space;for(;s=Al(s+c,1==l?0:3),f>=s;)if(g>1){let l=sl(Al(m+g,6))%24,t=e(s).getHours()-l;t>1&&(t=-1),s-=t*n,m=(m+g)%24,.7>Al((s-d[d.length-1])/c,3)*w||d.push(s)}else d.push(s)}return d}}]}const[ke,ye,Me]=ve(1),[Se,Te,Ee]=ve(.001);function ze(l,e){return l.map((l=>l.map(((t,n)=>0==n||8==n||null==t?t:e(1==n||0==l[8]?t:l[1]+t)))))}function De(l,e){return(t,n,i,o,s)=>{let r,u,a,f,c,h,d=e.find((l=>s>=l[0]))||e[e.length-1];return n.map((e=>{let t=l(e),n=t.getFullYear(),i=t.getMonth(),o=t.getDate(),s=t.getHours(),p=t.getMinutes(),m=t.getSeconds(),g=n!=r&&d[2]||i!=u&&d[3]||o!=a&&d[4]||s!=f&&d[5]||p!=c&&d[6]||m!=h&&d[7]||d[1];return r=n,u=i,a=o,f=s,c=p,h=m,g(t)}))}}function Pe(l,e,t){return new Date(l,e,t)}function Ae(l,e){return e(l)}function We(l,e){return(t,n,i,o)=>null==o?w:e(l(n))}Cl(2,-53,53,[1]);const Ye={show:!0,live:!0,isolate:!1,mount:()=>{},markers:{show:!0,width:2,stroke:function(l,e){let t=l.series[e];return t.width?t.stroke(l,e):t.points.width?t.points.stroke(l,e):null},fill:function(l,e){return l.series[e].fill(l,e)},dash:"solid"},idx:null,idxs:null,values:[]},Ce=[0,0];function He(l,e,t,n=!0){return l=>{0==l.button&&(!n||l.target==e)&&t(l)}}function Fe(l,e,t,n=!0){return l=>{(!n||l.target==e)&&t(l)}}const Re={show:!0,x:!0,y:!0,lock:!1,move:function(l,e,t){return Ce[0]=e,Ce[1]=t,Ce},points:{one:!1,show:function(l,e){let i=l.cursor.points,o=D(),s=i.size(l,e);E(o,t,s),E(o,n,s);let r=s/-2;E(o,"marginLeft",r),E(o,"marginTop",r);let u=i.width(l,e,s);return u&&E(o,"borderWidth",u),o},size:function(l,e){return l.series[e].points.size},width:0,stroke:function(l,e){let t=l.series[e].points;return t._stroke||t._fill},fill:function(l,e){let t=l.series[e].points;return t._fill||t._stroke}},bind:{mousedown:He,mouseup:He,click:He,dblclick:He,mousemove:Fe,mouseleave:Fe,mouseenter:Fe},drag:{setScale:!0,x:!0,y:!1,dist:0,uni:null,click:(l,e)=>{e.stopPropagation(),e.stopImmediatePropagation()},_x:!1,_y:!1},focus:{dist:(l,e,t,n,i)=>n-i,prox:-1,bias:0},hover:{skip:[void 0],prox:null,bias:0},left:-10,top:-10,idx:null,dataIdx:null,idxs:null,event:null},Ge={show:!0,stroke:"rgba(0,0,0,0.07)",width:2},Ie=Bl({},Ge,{filter:kl}),Le=Bl({},Ie,{size:10}),Oe=Bl({},Ge,{show:!1}),Ne='12px system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',je="bold "+Ne,Ue={show:!0,scale:"x",stroke:u,space:50,gap:5,alignTo:1,size:50,labelGap:0,labelSize:30,labelFont:je,side:2,grid:Ie,ticks:Le,border:Oe,font:Ne,lineGap:1.5,rotate:0},Ve={show:!0,scale:"x",auto:!1,sorted:1,min:gl,max:-gl,idxs:[]};function Be(l,e){return e.map((l=>null==l?"":tl(l)))}function $e(l,e,t,n,i,o,s){let r=[],u=Wl.get(i)||0;for(let l=t=s?t:Al(Dl(t,i),u);n>=l;l=Al(l+i,u))r.push(Object.is(l,-0)?0:l);return r}function Je(l,e,t,n,i){const o=[],s=l.scales[l.axes[e].scale].log,r=sl((10==s?dl:pl)(t));i=cl(s,r),10==s&&(i=fe[L(i,fe)]);let u=t,a=i*s;10==s&&(a=fe[L(a,fe)]);do{o.push(u),u+=i,10!=s||Wl.has(u)||(u=Al(u,Wl.get(i))),a>u||(a=(i=u)*s,10==s&&(a=fe[L(a,fe)]))}while(n>=u);return o}function qe(l,e,t,n,i){let o=l.scales[l.axes[e].scale].asinh,s=n>o?Je(l,e,fl(o,t),n,i):[o],r=0>n||t>0?[]:[0];return(-o>t?Je(l,e,fl(o,-n),-t,i):[o]).reverse().map((l=>-l)).concat(r,s)}const Ke=/./,Xe=/[12357]/,Ze=/[125]/,Qe=/1/,lt=(l,e,t,n)=>l.map(((l,i)=>4==e&&0==l||i%n==0&&t.test(l.toExponential()[0>l?1:0])?l:null));function et(l,e,t){let n=l.axes[t],i=n.scale,o=l.scales[i],s=l.valToPos,r=n._space,u=s(10,i),a=s(9,i)-u<r?s(7,i)-u<r?s(5,i)-u<r?Qe:Ze:Xe:Ke;if(a==Qe){let l=ol(s(1,i)-u);if(r>l)return lt(e.slice().reverse(),o.distr,a,ul(r/l)).reverse()}return lt(e,o.distr,a,1)}function tt(l,e,t){let n=l.axes[t],i=n.scale,o=n._space,s=l.valToPos,r=ol(s(1,i)-s(2,i));return o>r?lt(e.slice().reverse(),3,Ke,ul(o/r)).reverse():e}function nt(l,e,t,n){return null==n?w:null==e?"":tl(e)}const it={show:!0,scale:"y",stroke:u,space:30,gap:5,alignTo:1,size:50,labelGap:0,labelSize:30,labelFont:je,side:3,grid:Ie,ticks:Le,border:Oe,font:Ne,lineGap:1.5,rotate:0},ot={scale:null,auto:!0,sorted:0,min:gl,max:-gl},st=(l,e,t,n,i)=>i,rt={show:!0,auto:!0,sorted:0,gaps:st,alpha:1,facets:[Bl({},ot,{scale:"x"}),Bl({},ot,{scale:"y"})]},ut={scale:"y",auto:!0,sorted:0,show:!0,spanGaps:!1,gaps:st,alpha:1,points:{show:function(l,e){let{scale:t,idxs:n}=l.series[0],i=l._data[0],o=l.valToPos(i[n[0]],t,!0),s=l.valToPos(i[n[1]],t,!0);return ol(s-o)/(l.series[e].points.space*y)>=n[1]-n[0]},filter:null},values:null,min:gl,max:-gl,idxs:[],path:null,clip:null};function at(l,e,t){return t/10}const ft={time:!0,auto:!0,distr:1,log:10,asinh:1,min:null,max:null,dir:1,ori:0},ct=Bl({},ft,{time:!1,ori:1}),ht={};function dt(l){let e=ht[l];return e||(e={key:l,plots:[],sub(l){e.plots.push(l)},unsub(l){e.plots=e.plots.filter((e=>e!=l))},pub(l,t,n,i,o,s,r){for(let u=0;e.plots.length>u;u++)e.plots[u]!=t&&e.plots[u].pub(l,t,n,i,o,s,r)}},null!=l&&(ht[l]=e)),e}function pt(l,e,t){const n=l.mode,i=l.series[e],o=2==n?l._data[e]:l._data,s=l.scales,r=l.bbox;let u=o[0],a=2==n?o[1]:o[e],f=2==n?s[i.facets[0].scale]:s[l.series[0].scale],c=2==n?s[i.facets[1].scale]:s[i.scale],h=r.left,d=r.top,p=r.width,m=r.height,g=l.valToPosH,x=l.valToPosV;return 0==f.ori?t(i,u,a,f,c,g,x,h,d,p,m,kt,Mt,Tt,zt,Pt):t(i,u,a,f,c,x,g,d,h,m,p,yt,St,Et,Dt,At)}function mt(l,e){let t=0,n=0,i=Q(l.bands,Fl);for(let l=0;i.length>l;l++){let o=i[l];o.series[0]==e?t=o.dir:o.series[1]==e&&(n|=1==o.dir?1:2)}return[t,1==n?-1:2==n?1:3==n?2:0]}function gt(l,e,t,n,i){let o=l.series[e],s=l.scales[2==l.mode?o.facets[1].scale:o.scale];return-1==i?s.min:1==i?s.max:3==s.distr?1==s.dir?s.min:s.max:0}function xt(l,e,t,n,i,o){return pt(l,e,((l,e,s,r,u,a,f,c,h,d,p)=>{let m=l.pxRound;const g=0==r.ori?Mt:St;let x,w;1==r.dir*(0==r.ori?1:-1)?(x=t,w=n):(x=n,w=t);let _=m(a(e[x],r,d,c)),b=m(f(s[x],u,p,h)),v=m(a(e[w],r,d,c)),k=m(f(1==o?u.max:u.min,u,p,h)),y=new Path2D(i);return g(y,v,k),g(y,_,k),g(y,_,b),y}))}function wt(l,e,t,n,i,o){let s=null;if(l.length>0){s=new Path2D;const r=0==e?Tt:Et;let u=t;for(let e=0;l.length>e;e++){let t=l[e];if(t[1]>t[0]){let l=t[0]-u;l>0&&r(s,u,n,l,n+o),u=t[1]}}let a=t+i-u,f=10;a>0&&r(s,u,n-f/2,a,n+o+f)}return s}function _t(l,e,t,n,i,o,s){let r=[],u=l.length;for(let a=1==i?t:n;a>=t&&n>=a;a+=i)if(null===e[a]){let f=a,c=a;if(1==i)for(;++a<=n&&null===e[a];)c=a;else for(;--a>=t&&null===e[a];)c=a;let h=o(l[f]),d=c==f?h:o(l[c]),p=f-i;h=s>0||0>p||p>=u?h:o(l[p]);let m=c+i;d=0>s||0>m||m>=u?d:o(l[m]),h>d||r.push([h,d])}return r}function bt(l){return 0==l?vl:1==l?rl:e=>zl(e,l)}function vt(l){let e=0==l?kt:yt,t=0==l?(l,e,t,n,i,o)=>{l.arcTo(e,t,n,i,o)}:(l,e,t,n,i,o)=>{l.arcTo(t,e,i,n,o)},n=0==l?(l,e,t,n,i)=>{l.rect(e,t,n,i)}:(l,e,t,n,i)=>{l.rect(t,e,i,n)};return(l,i,o,s,r,u=0,a=0)=>{0==u&&0==a?n(l,i,o,s,r):(u=al(u,s/2,r/2),a=al(a,s/2,r/2),e(l,i+u,o),t(l,i+s,o,i+s,o+r,u),t(l,i+s,o+r,i,o+r,a),t(l,i,o+r,i,o,a),t(l,i,o,i+s,o,u),l.closePath())}}const kt=(l,e,t)=>{l.moveTo(e,t)},yt=(l,e,t)=>{l.moveTo(t,e)},Mt=(l,e,t)=>{l.lineTo(e,t)},St=(l,e,t)=>{l.lineTo(t,e)},Tt=vt(0),Et=vt(1),zt=(l,e,t,n,i,o)=>{l.arc(e,t,n,i,o)},Dt=(l,e,t,n,i,o)=>{l.arc(t,e,n,i,o)},Pt=(l,e,t,n,i,o,s)=>{l.bezierCurveTo(e,t,n,i,o,s)},At=(l,e,t,n,i,o,s)=>{l.bezierCurveTo(t,e,i,n,s,o)};function Wt(){return(l,e,t,n,i)=>pt(l,e,((e,o,s,r,u,a,f,c,h,d,p)=>{let m,g,{pxRound:x,points:w}=e;0==r.ori?(m=kt,g=zt):(m=yt,g=Dt);const _=Al(w.width*y,3);let b=(w.size-w.width)/2*y,v=Al(2*b,3),k=new Path2D,M=new Path2D,{left:S,top:T,width:E,height:z}=l.bbox;Tt(M,S-v,T-v,E+2*v,z+2*v);const D=l=>{if(null!=s[l]){let e=x(a(o[l],r,d,c)),t=x(f(s[l],u,p,h));m(k,e+b,t),g(k,e,t,b,0,2*il)}};if(i)i.forEach(D);else for(let l=t;n>=l;l++)D(l);return{stroke:_>0?k:null,fill:k,clip:M,flags:3}}))}function Yt(l){return(e,t,n,i,o,s)=>{n!=i&&(o!=n&&s!=n&&l(e,t,n),o!=i&&s!=i&&l(e,t,i),l(e,t,s))}}const Ct=Yt(Mt),Ht=Yt(St);function Ft(l){const e=Q(l?.alignGaps,0);return(l,t,n,i)=>pt(l,t,((o,s,r,u,a,f,c,h,d,p,m)=>{[n,i]=U(r,n,i);let g,x,w=o.pxRound,_=l=>w(f(l,u,p,h)),b=l=>w(c(l,a,m,d));0==u.ori?(g=Mt,x=Ct):(g=St,x=Ht);const v=u.dir*(0==u.ori?1:-1),k={stroke:new Path2D,fill:null,clip:null,band:null,gaps:null,flags:1},y=k.stroke;let M=!1;if(i-n<4*p)for(let l=1==v?n:i;l>=n&&i>=l;l+=v){let e=r[l];null===e?M=!0:null!=e&&g(y,_(s[l]),b(e))}else{let e,t,o,a=e=>l.posToVal(e,u.key,!0),f=null,c=null,h=_(s[1==v?n:i]),d=_(s[n]),p=_(s[i]),m=a(1==v?d+1:p-1);for(let l=1==v?n:i;l>=n&&i>=l;l+=v){let n=s[l],i=(1==v?m>n:n>m)?h:_(n),o=r[l];i==h?null!=o?(t=o,null==f?(g(y,i,b(t)),e=f=c=t):f>t?f=t:t>c&&(c=t)):null===o&&(M=!0):(null!=f&&x(y,h,b(f),b(c),b(e),b(t)),null!=o?(t=o,g(y,i,b(t)),f=c=e=t):(f=c=null,null===o&&(M=!0)),h=i,m=a(h+v))}null!=f&&f!=c&&o!=h&&x(y,h,b(f),b(c),b(e),b(t))}let[S,T]=mt(l,t);if(null!=o.fill||0!=S){let e=k.fill=new Path2D(y),r=b(o.fillTo(l,t,o.min,o.max,S)),u=_(s[n]),a=_(s[i]);-1==v&&([a,u]=[u,a]),g(e,a,r),g(e,u,r)}if(!o.spanGaps){let a=[];M&&a.push(..._t(s,r,n,i,v,_,e)),k.gaps=a=o.gaps(l,t,n,i,a),k.clip=wt(a,u.ori,h,d,p,m)}return 0!=T&&(k.band=2==T?[xt(l,t,n,i,y,-1),xt(l,t,n,i,y,1)]:xt(l,t,n,i,y,T)),k}))}function Rt(l,e,t,n,i,o,s=gl){if(l.length>1){let r=null;for(let u=0,a=1/0;l.length>u;u++)if(void 0!==e[u]){if(null!=r){let e=ol(l[u]-l[r]);a>e&&(a=e,s=ol(t(l[u],n,i,o)-t(l[r],n,i,o)))}r=u}}return s}function Gt(l,e,t,n,i){const o=l.length;if(2>o)return null;const s=new Path2D;if(t(s,l[0],e[0]),2==o)n(s,l[1],e[1]);else{let t=Array(o),n=Array(o-1),r=Array(o-1),u=Array(o-1);for(let t=0;o-1>t;t++)r[t]=e[t+1]-e[t],u[t]=l[t+1]-l[t],n[t]=r[t]/u[t];t[0]=n[0];for(let l=1;o-1>l;l++)0===n[l]||0===n[l-1]||n[l-1]>0!=n[l]>0?t[l]=0:(t[l]=3*(u[l-1]+u[l])/((2*u[l]+u[l-1])/n[l-1]+(u[l]+2*u[l-1])/n[l]),isFinite(t[l])||(t[l]=0));t[o-1]=n[o-2];for(let n=0;o-1>n;n++)i(s,l[n]+u[n]/3,e[n]+t[n]*u[n]/3,l[n+1]-u[n]/3,e[n+1]-t[n+1]*u[n]/3,l[n+1],e[n+1])}return s}const It=new Set;function Lt(){for(let l of It)l.syncRect(!0)}_&&(G("resize",v,Lt),G("scroll",v,Lt,!0),G(x,v,(()=>{en.pxRatio=y})));const Ot=Ft(),Nt=Wt();function jt(l,e,t,n){return(n?[l[0],l[1]].concat(l.slice(2)):[l[0]].concat(l.slice(1))).map(((l,n)=>Ut(l,n,e,t)))}function Ut(l,e,t,n){return Bl({},0==e?t:n,l)}function Vt(l,e,t){return null==e?Rl:[e,t]}const Bt=Vt;function $t(l,e,t){return null==e?Rl:Z(e,t,J,!0)}function Jt(l,e,t,n){return null==e?Rl:B(e,t,l.scales[n].log,!1)}const qt=Jt;function Kt(l,e,t,n){return null==e?Rl:$(e,t,l.scales[n].log,!1)}const Xt=Kt;function Zt(l,e,t,n,i){let o=fl(xl(l),xl(e)),s=e-l,r=L(i/n*s,t);do{let l=t[r],e=n*l/s;if(e>=i&&17>=o+(5>l?Wl.get(l):0))return[l,e]}while(++r<t.length);return[0,0]}function Qt(l){let e,t;return[l=l.replace(/(\d+)px/,((l,n)=>(e=rl((t=+n)*y))+"px")),e,t]}function ln(l){l.show&&[l.font,l.labelFont].forEach((l=>{let e=Al(l[2]*y,1);l[0]=l[0].replace(/[0-9.]+px/,e+"px"),l[1]=e}))}function en(u,g,_){const k={mode:Q(u.mode,1)},M=k.mode;function P(l,e,t,n){let i=e.valToPct(l);return n+t*(-1==e.dir?1-i:i)}function W(l,e,t,n){let i=e.valToPct(l);return n+t*(-1==e.dir?i:1-i)}function C(l,e,t,n){return 0==e.ori?P(l,e,t,n):W(l,e,t,n)}k.valToPosH=P,k.valToPosV=W;let F=!1;k.status=0;const R=k.root=D("uplot");null!=u.id&&(R.id=u.id),S(R,u.class),u.title&&(D("u-title",R).textContent=u.title);const O=z("canvas"),K=k.ctx=O.getContext("2d"),X=D("u-wrap",R);G("click",X,(l=>{l.target===el&&(Nn!=Gn||jn!=In)&&Zn.click(k,l)}),!0);const ll=k.under=D("u-under",X);X.appendChild(O);const el=k.over=D("u-over",X),tl=+Q((u=Vl(u)).pxAlign,1),sl=bt(tl);(u.plugins||[]).forEach((l=>{l.opts&&(u=l.opts(k,u)||u)}));const hl=u.ms||.001,pl=k.series=1==M?jt(u.series||[],Ve,ut,!1):function(l,e){return l.map(((l,t)=>0==t?{}:Bl({},e,l)))}(u.series||[null],rt),xl=k.axes=jt(u.axes||[],Ue,it,!0),vl=k.scales={},Tl=k.bands=u.bands||[];Tl.forEach((l=>{l.fill=bl(l.fill||null),l.dir=Q(l.dir,-1)}));const El=2==M?pl[1].facets[0].scale:pl[0].scale,Dl={axes:function(){for(let l=0;xl.length>l;l++){let e=xl[l];if(!e.show||!e._show)continue;let t,n,u=e.side,a=u%2,f=e.stroke(k,l),c=0==u||3==u?-1:1,[h,d]=e._found;if(null!=e.label){let s=rl((e._lpos+e.labelGap*c)*y);_n(e.labelFont[0],f,"center",2==u?i:o),K.save(),1==a?(t=n=0,K.translate(s,rl(lt+st/2)),K.rotate((3==u?-il:il)/2)):(t=rl(Qe+ot/2),n=s);let r=_l(e.label)?e.label(k,l,h,d):e.label;K.fillText(r,t,n),K.restore()}if(0==d)continue;let p=vl[e.scale],m=0==a?ot:st,g=0==a?Qe:lt,x=e._splits,w=2==p.distr?x.map((l=>pn[l])):x,_=2==p.distr?pn[x[1]]-pn[x[0]]:h,b=e.ticks,v=e.border,M=b.show?b.size:0,S=rl(M*y),T=rl((2==e.alignTo?e._size-M-e.gap:e.gap)*y),E=e._rotate*-il/180,z=sl(e._pos*y),D=z+(S+T)*c;n=0==a?D:0,t=1==a?D:0,_n(e.font[0],f,1==e.align?s:2==e.align?r:E>0?s:0>E?r:0==a?"center":3==u?r:s,E||1==a?"middle":2==u?i:o);let P=e.font[1]*e.lineGap,A=x.map((l=>sl(C(l,p,m,g)))),W=e._values;for(let l=0;W.length>l;l++){let e=W[l];if(null!=e){0==a?t=A[l]:n=A[l],e=""+e;let i=-1==e.indexOf("\n")?[e]:e.split(/\n/gm);for(let l=0;i.length>l;l++){let e=i[l];E?(K.save(),K.translate(t,n+l*P),K.rotate(E),K.fillText(e,0,0),K.restore()):K.fillText(e,t,n+l*P)}}}b.show&&zn(A,b.filter(k,w,l,d,_),a,u,z,S,Al(b.width*y,3),b.stroke(k,l),b.dash,b.cap);let Y=e.grid;Y.show&&zn(A,Y.filter(k,w,l,d,_),a,0==a?2:1,0==a?lt:Qe,0==a?st:ot,Al(Y.width*y,3),Y.stroke(k,l),Y.dash,Y.cap),v.show&&zn([z],[1],0==a?1:0,0==a?1:2,1==a?lt:Qe,1==a?st:ot,Al(v.width*y,3),v.stroke(k,l),v.dash,v.cap)}Ci("drawAxes")},series:function(){if(Gt>0){let l=pl.some((l=>l._focus))&&dn!=Tt.alpha;l&&(K.globalAlpha=dn=Tt.alpha),pl.forEach(((l,e)=>{if(e>0&&l.show&&(kn(e,!1),kn(e,!0),null==l._paths)){let t=dn;dn!=l.alpha&&(K.globalAlpha=dn=l.alpha);let n=2==M?[0,g[e][0].length-1]:function(l){let e=wl(Lt-1,0,Gt-1),t=wl(en+1,0,Gt-1);for(;null==l[e]&&e>0;)e--;for(;null==l[t]&&Gt-1>t;)t++;return[e,t]}(g[e]);l._paths=l.paths(k,e,n[0],n[1]),dn!=t&&(K.globalAlpha=dn=t)}})),pl.forEach(((l,e)=>{if(e>0&&l.show){let t=dn;dn!=l.alpha&&(K.globalAlpha=dn=l.alpha),null!=l._paths&&yn(e,!1);{let t=null!=l._paths?l._paths.gaps:null,n=l.points.show(k,e,Lt,en,t),i=l.points.filter(k,e,n,t);(n||i)&&(l.points._paths=l.points.paths(k,e,Lt,en,i),yn(e,!0))}dn!=t&&(K.globalAlpha=dn=t),Ci("drawSeries",e)}})),l&&(K.globalAlpha=dn=1)}}},Pl=(u.drawOrder||["axes","series"]).map((l=>Dl[l]));function Cl(l){const e=3==l.distr?e=>dl(e>0?e:l.clamp(k,e,l.min,l.max,l.key)):4==l.distr?e=>ml(e,l.asinh):100==l.distr?e=>l.fwd(e):l=>l;return t=>{let n=e(t),{_min:i,_max:o}=l;return(n-i)/(o-i)}}function Il(l){let e=vl[l];if(null==e){let t=(u.scales||Hl)[l]||Hl;if(null!=t.from){Il(t.from);let e=Bl({},vl[t.from],t,{key:l});e.valToPct=Cl(e),vl[l]=e}else{e=vl[l]=Bl({},l==El?ft:ct,t),e.key=l;let n=e.time,i=e.range,o=Gl(i);if((l!=El||2==M&&!n)&&(!o||null!=i[0]&&null!=i[1]||(i={min:null==i[0]?q:{mode:1,hard:i[0],soft:i[0]},max:null==i[1]?q:{mode:1,hard:i[1],soft:i[1]}},o=!1),!o&&Ol(i))){let l=i;i=(e,t,n)=>null==t?Rl:Z(t,n,l)}e.range=bl(i||(n?Bt:l==El?3==e.distr?qt:4==e.distr?Xt:Vt:3==e.distr?Jt:4==e.distr?Kt:$t)),e.auto=bl(!o&&e.auto),e.clamp=bl(e.clamp||at),e._min=e._max=null,e.valToPct=Cl(e)}}}Il("x"),Il("y"),1==M&&pl.forEach((l=>{Il(l.scale)})),xl.forEach((l=>{Il(l.scale)}));for(let l in u.scales)Il(l);const jl=vl[El],Ul=jl.distr;let $l,ql;0==jl.ori?(S(R,"u-hz"),$l=P,ql=W):(S(R,"u-vt"),$l=W,ql=P);const Kl={};for(let l in vl){let e=vl[l];null==e.min&&null==e.max||(Kl[l]={min:e.min,max:e.max},e.min=e.max=null)}const Xl=u.tzDate||(l=>new Date(rl(l/hl))),Zl=u.fmtDate||ne,Ql=1==hl?Me(Xl):Ee(Xl),le=De(Xl,ze(1==hl?ye:Te,Zl)),ee=We(Xl,Ae("{YYYY}-{MM}-{DD} {h}:{mm}{aa}",Zl)),te=[],ie=k.legend=Bl({},Ye,u.legend),oe=k.cursor=Bl({},Re,{drag:{y:2==M}},u.cursor),se=ie.show,re=oe.show,ue=ie.markers;let ce,he,de;ie.idxs=te,ue.width=bl(ue.width),ue.dash=bl(ue.dash),ue.stroke=bl(ue.stroke),ue.fill=bl(ue.fill);let pe,me=[],ge=[],xe=!1,we={};if(ie.live){const l=pl[1]?pl[1].values:null;xe=null!=l,pe=xe?l(k,1,0):{_:0};for(let l in pe)we[l]=w}if(se)if(ce=z("table","u-legend",R),de=z("tbody",null,ce),ie.mount(k,ce),xe){he=z("thead",null,ce,de);let l=z("tr",null,he);for(var _e in z("th",null,l),pe)z("th",e,l).textContent=_e}else S(ce,"u-inline"),ie.live&&S(ce,"u-live");const be={show:!0},ve={show:!1},Pe=new Map;function Ce(l,e,t,n=!0){const i=Pe.get(e)||{},o=oe.bind[l](k,e,t,n);o&&(G(l,e,i[l]=o),Pe.set(e,i))}function He(l,e){const t=Pe.get(e)||{};for(let n in t)null!=l&&n!=l||(I(n,e,t[n]),delete t[n]);null==l&&Pe.delete(e)}let Fe=0,Ge=0,Ie=0,Le=0,Oe=0,Ne=0,je=Oe,Ke=Ne,Xe=Ie,Ze=Le,Qe=0,lt=0,ot=0,st=0;k.bbox={};let ht=!1,pt=!1,mt=!1,xt=!1,wt=!1,_t=!1;function vt(l,e,t){(t||l!=k.width||e!=k.height)&&kt(l,e),An(!1),mt=!0,pt=!0,Jn()}function kt(l,e){k.width=Fe=Ie=l,k.height=Ge=Le=e,Oe=Ne=0,function(){let l=!1,e=!1,t=!1,n=!1;xl.forEach((i=>{if(i.show&&i._show){let{side:o,_size:s}=i,r=s+(null!=i.label?i.labelSize:0);r>0&&(o%2?(Ie-=r,3==o?(Oe+=r,n=!0):t=!0):(Le-=r,0==o?(Ne+=r,l=!0):e=!0))}})),Ct[0]=l,Ct[1]=t,Ct[2]=e,Ct[3]=n,Ie-=Rt[1]+Rt[3],Oe+=Rt[3],Le-=Rt[2]+Rt[0],Ne+=Rt[0]}(),function(){let l=Oe+Ie,e=Ne+Le,t=Oe,n=Ne;function i(i,o){switch(i){case 1:return l+=o,l-o;case 2:return e+=o,e-o;case 3:return t-=o,t+o;case 0:return n-=o,n+o}}xl.forEach((l=>{if(l.show&&l._show){let e=l.side;l._pos=i(e,l._size),null!=l.label&&(l._lpos=i(e,l.labelSize))}}))}();let t=k.bbox;Qe=t.left=zl(Oe*y,.5),lt=t.top=zl(Ne*y,.5),ot=t.width=zl(Ie*y,.5),st=t.height=zl(Le*y,.5)}const yt=3;if(k.setSize=function({width:l,height:e}){vt(l,e)},null==oe.dataIdx){let l=oe.hover,e=l.skip=new Set(l.skip??[]);e.add(void 0);let t=l.prox=bl(l.prox),n=l.bias??=0;oe.dataIdx=(l,i,o,s)=>{if(0==i)return o;let r=o,u=t(l,i,o,s)??gl,a=u>=0&&gl>u,f=0==jl.ori?Ie:Le,c=oe.left,h=g[0],d=g[i];if(e.has(d[o])){r=null;let l,t=null,i=null;if(0==n||-1==n)for(l=o;null==t&&l-- >0;)e.has(d[l])||(t=l);if(0==n||1==n)for(l=o;null==i&&l++<d.length;)e.has(d[l])||(i=l);if(null!=t||null!=i)if(a){let l=c-(null==t?-1/0:$l(h[t],jl,f,0)),e=(null==i?1/0:$l(h[i],jl,f,0))-c;l>e?e>u||(r=i):l>u||(r=t)}else r=null==i?t:null==t||o-t>i-o?i:t}else a&&ol(c-$l(h[o],jl,f,0))>u&&(r=null);return r}}const Mt=l=>{oe.event=l};oe.idxs=te,oe._lock=!1;let St=oe.points;St.show=bl(St.show),St.size=bl(St.size),St.stroke=bl(St.stroke),St.width=bl(St.width),St.fill=bl(St.fill);const Tt=k.focus=Bl({},u.focus||{alpha:.3},oe.focus),Et=Tt.prox>=0,zt=Et&&St.one;let Dt=[],Pt=[],At=[];function Wt(l,e){let t=St.show(k,e);if(t instanceof HTMLElement)return S(t,"u-cursor-pt"),S(t,l.class),A(t,-10,-10,Ie,Le),el.insertBefore(t,Dt[e]),t}function Yt(t,n){if(1==M||n>0){let l=1==M&&vl[t.scale].time,e=t.value;t.value=l?Ll(e)?We(Xl,Ae(e,Zl)):e||ee:e||nt,t.label=t.label||(l?"Time":"Value")}if(zt||n>0){t.width=null==t.width?1:t.width,t.paths=t.paths||Ot||yl,t.fillTo=bl(t.fillTo||gt),t.pxAlign=+Q(t.pxAlign,tl),t.pxRound=bt(t.pxAlign),t.stroke=bl(t.stroke||null),t.fill=bl(t.fill||null),t._stroke=t._fill=t._paths=t._focus=null;let l=function(l){return Al(1*(3+2*(l||1)),3)}(fl(1,t.width)),e=t.points=Bl({},{size:l,width:fl(1,.2*l),stroke:t.stroke,space:2*l,paths:Nt,_stroke:null,_fill:null},t.points);e.show=bl(e.show),e.filter=bl(e.filter),e.fill=bl(e.fill),e.stroke=bl(e.stroke),e.paths=bl(e.paths),e.pxAlign=t.pxAlign}if(se){let i=function(t,n){if(0==n&&(xe||!ie.live||2==M))return Rl;let i=[],o=z("tr","u-series",de,de.childNodes[n]);S(o,t.class),t.show||S(o,l);let s=z("th",null,o);if(ue.show){let l=D("u-marker",s);if(n>0){let e=ue.width(k,n);e&&(l.style.border=e+"px "+ue.dash(k,n)+" "+ue.stroke(k,n)),l.style.background=ue.fill(k,n)}}let r=D(e,s);for(var u in t.label instanceof HTMLElement?r.appendChild(t.label):r.textContent=t.label,n>0&&(ue.show||(r.style.color=t.width>0?ue.stroke(k,n):ue.fill(k,n)),Ce("click",s,(l=>{if(oe._lock)return;Mt(l);let e=pl.indexOf(t);if((l.ctrlKey||l.metaKey)!=ie.isolate){let l=pl.some(((l,t)=>t>0&&t!=e&&l.show));pl.forEach(((t,n)=>{n>0&&oi(n,l?n==e?be:ve:be,!0,Fi.setSeries)}))}else oi(e,{show:!t.show},!0,Fi.setSeries)}),!1),Et&&Ce(d,s,(l=>{oe._lock||(Mt(l),oi(pl.indexOf(t),ai,!0,Fi.setSeries))}),!1)),pe){let l=z("td","u-value",o);l.textContent="--",i.push(l)}return[o,i]}(t,n);me.splice(n,0,i[0]),ge.splice(n,0,i[1]),ie.values.push(null)}if(re){te.splice(n,0,null);let l=null;zt?0==n&&(l=Wt(t,n)):n>0&&(l=Wt(t,n)),Dt.splice(n,0,l),Pt.splice(n,0,0),At.splice(n,0,0)}Ci("addSeries",n)}k.addSeries=function(l,e){e=null==e?pl.length:e,l=1==M?Ut(l,e,Ve,ut):Ut(l,e,{},rt),pl.splice(e,0,l),Yt(pl[e],e)},k.delSeries=function(l){if(pl.splice(l,1),se){ie.values.splice(l,1),ge.splice(l,1);let e=me.splice(l,1)[0];He(null,e.firstChild),e.remove()}re&&(te.splice(l,1),Dt.splice(l,1)[0].remove(),Pt.splice(l,1),At.splice(l,1)),Ci("delSeries",l)};const Ct=[!1,!1,!1,!1];function Ht(l,e,t){let[n,i,o,s]=t,r=e%2,u=0;return 0==r&&(s||i)&&(u=0==e&&!n||2==e&&!o?rl(Ue.size/3):0),1==r&&(n||o)&&(u=1==e&&!i||3==e&&!s?rl(it.size/2):0),u}const Ft=k.padding=(u.padding||[Ht,Ht,Ht,Ht]).map((l=>bl(Q(l,Ht)))),Rt=k._padding=Ft.map(((l,e)=>l(k,e,Ct,0)));let Gt,Lt=null,en=null;const tn=1==M?pl[0].idxs:null;let nn,on,sn,rn,un,an,fn,cn,hn,dn,pn=null,mn=!1;function gn(l,e){if(k.data=k._data=g=null==l?[]:l,2==M){Gt=0;for(let l=1;pl.length>l;l++)Gt+=g[l][0].length}else{0==g.length&&(k.data=k._data=g=[[]]),pn=g[0],Gt=pn.length;let l=g;if(2==Ul){l=g.slice();let e=l[0]=Array(Gt);for(let l=0;Gt>l;l++)e[l]=l}k._data=g=l}if(An(!0),Ci("setData"),2==Ul&&(mt=!0),!1!==e){let l=jl;l.auto(k,mn)?xn():ii(El,l.min,l.max),xt=xt||oe.left>=0,_t=!0,Jn()}}function xn(){let l,e;mn=!0,1==M&&(Gt>0?(Lt=tn[0]=0,en=tn[1]=Gt-1,l=g[0][Lt],e=g[0][en],2==Ul?(l=Lt,e=en):l==e&&(3==Ul?[l,e]=B(l,l,jl.log,!1):4==Ul?[l,e]=$(l,l,jl.log,!1):jl.time?e=l+rl(86400/hl):[l,e]=Z(l,e,J,!0))):(Lt=tn[0]=l=null,en=tn[1]=e=null)),ii(El,l,e)}function wn(l,e,t,n,i,o){l??=a,t??=Fl,n??="butt",i??=a,o??="round",l!=nn&&(K.strokeStyle=nn=l),i!=on&&(K.fillStyle=on=i),e!=sn&&(K.lineWidth=sn=e),o!=un&&(K.lineJoin=un=o),n!=an&&(K.lineCap=an=n),t!=rn&&K.setLineDash(rn=t)}function _n(l,e,t,n){e!=on&&(K.fillStyle=on=e),l!=fn&&(K.font=fn=l),t!=cn&&(K.textAlign=cn=t),n!=hn&&(K.textBaseline=hn=n)}function bn(l,e,t,n,i=0){if(n.length>0&&l.auto(k,mn)&&(null==e||null==e.min)){let e=Q(Lt,0),o=Q(en,n.length-1),s=null==t.min?function(l,e,t,n=0,i=!1){let o=i?V:U,s=i?j:N;[e,t]=o(l,e,t);let r=l[e],u=l[e];if(e>-1)if(1==n)r=l[e],u=l[t];else if(-1==n)r=l[t],u=l[e];else for(let n=e;t>=n;n++){let e=l[n];s(e)&&(r>e?r=e:e>u&&(u=e))}return[r??gl,u??-gl]}(n,e,o,i,3==l.distr):[t.min,t.max];l.min=al(l.min,t.min=s[0]),l.max=fl(l.max,t.max=s[1])}}k.setData=gn;const vn={min:null,max:null};function kn(l,e){let t=e?pl[l].points:pl[l];t._stroke=t.stroke(k,l),t._fill=t.fill(k,l)}function yn(l,e){let t=e?pl[l].points:pl[l],{stroke:n,fill:i,clip:o,flags:s,_stroke:r=t._stroke,_fill:u=t._fill,_width:a=t.width}=t._paths;a=Al(a*y,3);let f=null,c=a%2/2;e&&null==u&&(u=a>0?"#fff":r);let h=1==t.pxAlign&&c>0;if(h&&K.translate(c,c),!e){let l=Qe-a/2,e=lt-a/2,t=ot+a,n=st+a;f=new Path2D,f.rect(l,e,t,n)}e?Sn(r,a,t.dash,t.cap,u,n,i,s,o):function(l,e,t,n,i,o,s,r,u,a,f){let c=!1;0!=u&&Tl.forEach(((h,d)=>{if(h.series[0]==l){let l,p=pl[h.series[1]],m=g[h.series[1]],x=(p._paths||Hl).band;Gl(x)&&(x=1==h.dir?x[0]:x[1]);let w=null;p.show&&x&&function(l,e,t){for(e=Q(e,0),t=Q(t,l.length-1);t>=e;){if(null!=l[e])return!0;e++}return!1}(m,Lt,en)?(w=h.fill(k,d)||o,l=p._paths.clip):x=null,Sn(e,t,n,i,w,s,r,u,a,f,l,x),c=!0}})),c||Sn(e,t,n,i,o,s,r,u,a,f)}(l,r,a,t.dash,t.cap,u,n,i,s,f,o),h&&K.translate(-c,-c)}const Mn=3;function Sn(l,e,t,n,i,o,s,r,u,a,f,c){wn(l,e,t,n,i),(u||a||c)&&(K.save(),u&&K.clip(u),a&&K.clip(a)),c?(r&Mn)==Mn?(K.clip(c),f&&K.clip(f),En(i,s),Tn(l,o,e)):2&r?(En(i,s),K.clip(c),Tn(l,o,e)):1&r&&(K.save(),K.clip(c),f&&K.clip(f),En(i,s),K.restore(),Tn(l,o,e)):(En(i,s),Tn(l,o,e)),(u||a||c)&&K.restore()}function Tn(l,e,t){t>0&&(e instanceof Map?e.forEach(((l,e)=>{K.strokeStyle=nn=e,K.stroke(l)})):null!=e&&l&&K.stroke(e))}function En(l,e){e instanceof Map?e.forEach(((l,e)=>{K.fillStyle=on=e,K.fill(l)})):null!=e&&l&&K.fill(e)}function zn(l,e,t,n,i,o,s,r,u,a){let f=s%2/2;1==tl&&K.translate(f,f),wn(r,s,u,a,r),K.beginPath();let c,h,d,p,m=i+(0==n||3==n?-o:o);0==t?(h=i,p=m):(c=i,d=m);for(let n=0;l.length>n;n++)null!=e[n]&&(0==t?c=d=l[n]:h=p=l[n],K.moveTo(c,h),K.lineTo(d,p));K.stroke(),1==tl&&K.translate(-f,-f)}function Dn(l){let e=!0;return xl.forEach(((t,n)=>{if(!t.show)return;let i=vl[t.scale];if(null==i.min)return void(t._show&&(e=!1,t._show=!1,An(!1)));t._show||(e=!1,t._show=!0,An(!1));let o=t.side,s=o%2,{min:r,max:u}=i,[a,f]=function(l,e,t,n){let i,o=xl[l];if(n>0){let s=o._space=o.space(k,l,e,t,n);i=Zt(e,t,o._incrs=o.incrs(k,l,e,t,n,s),n,s)}else i=[0,0];return o._found=i}(n,r,u,0==s?Ie:Le);if(0==f)return;let c=t._splits=t.splits(k,n,r,u,a,f,2==i.distr),h=2==i.distr?c.map((l=>pn[l])):c,d=2==i.distr?pn[c[1]]-pn[c[0]]:a,p=t._values=t.values(k,t.filter(k,h,n,f,d),n,f,d);t._rotate=2==o?t.rotate(k,p,n,f):0;let m=t._size;t._size=ul(t.size(k,p,n,l)),null!=m&&t._size!=m&&(e=!1)})),e}function Pn(l){let e=!0;return Ft.forEach(((t,n)=>{let i=t(k,n,Ct,l);i!=Rt[n]&&(e=!1),Rt[n]=i})),e}function An(l){pl.forEach(((e,t)=>{t>0&&(e._paths=null,l&&(1==M?(e.min=null,e.max=null):e.facets.forEach((l=>{l.min=null,l.max=null}))))}))}let Wn,Yn,Cn,Hn,Fn,Rn,Gn,In,Ln,On,Nn,jn,Un=!1,Vn=!1,Bn=[];function $n(){Vn=!1;for(let l=0;Bn.length>l;l++)Ci(...Bn[l]);Bn.length=0}function Jn(){Un||(Jl(qn),Un=!0)}function qn(){if(ht&&(function(){for(let l in vl){let e=vl[l];null==Kl[l]&&(null==e.min||null!=Kl[El]&&e.auto(k,mn))&&(Kl[l]=vn)}for(let l in vl){let e=vl[l];null==Kl[l]&&null!=e.from&&null!=Kl[e.from]&&(Kl[l]=vn)}null!=Kl[El]&&An(!0);let l={};for(let e in Kl){let t=Kl[e];if(null!=t){let n=l[e]=Vl(vl[e],Nl);if(null!=t.min)Bl(n,t);else if(e!=El||2==M)if(0==Gt&&null==n.from){let l=n.range(k,null,null,e);n.min=l[0],n.max=l[1]}else n.min=gl,n.max=-gl}}if(Gt>0){pl.forEach(((e,t)=>{if(1==M){let n=e.scale,i=Kl[n];if(null==i)return;let o=l[n];if(0==t){let l=o.range(k,o.min,o.max,n);o.min=l[0],o.max=l[1],Lt=L(o.min,g[0]),en=L(o.max,g[0]),en-Lt>1&&(o.min>g[0][Lt]&&Lt++,g[0][en]>o.max&&en--),e.min=pn[Lt],e.max=pn[en]}else e.show&&e.auto&&bn(o,i,e,g[t],e.sorted);e.idxs[0]=Lt,e.idxs[1]=en}else if(t>0&&e.show&&e.auto){let[n,i]=e.facets,o=n.scale,s=i.scale,[r,u]=g[t],a=l[o],f=l[s];null!=a&&bn(a,Kl[o],n,r,n.sorted),null!=f&&bn(f,Kl[s],i,u,i.sorted),e.min=i.min,e.max=i.max}}));for(let e in l){let t=l[e],n=Kl[e];if(null==t.from&&(null==n||null==n.min)){let l=t.range(k,t.min==gl?null:t.min,t.max==-gl?null:t.max,e);t.min=l[0],t.max=l[1]}}}for(let e in l){let t=l[e];if(null!=t.from){let n=l[t.from];if(null==n.min)t.min=t.max=null;else{let l=t.range(k,n.min,n.max,e);t.min=l[0],t.max=l[1]}}}let e={},t=!1;for(let n in l){let i=l[n],o=vl[n];if(o.min!=i.min||o.max!=i.max){o.min=i.min,o.max=i.max;let l=o.distr;o._min=3==l?dl(o.min):4==l?ml(o.min,o.asinh):100==l?o.fwd(o.min):o.min,o._max=3==l?dl(o.max):4==l?ml(o.max,o.asinh):100==l?o.fwd(o.max):o.max,e[n]=t=!0}}if(t){pl.forEach(((l,t)=>{2==M?t>0&&e.y&&(l._paths=null):e[l.scale]&&(l._paths=null)}));for(let l in e)mt=!0,Ci("setScale",l);re&&oe.left>=0&&(xt=_t=!0)}for(let l in Kl)Kl[l]=null}(),ht=!1),mt&&(function(){let l=!1,e=0;for(;!l;){e++;let t=Dn(e),n=Pn(e);l=e==yt||t&&n,l||(kt(k.width,k.height),pt=!0)}}(),mt=!1),pt){if(E(ll,s,Oe),E(ll,i,Ne),E(ll,t,Ie),E(ll,n,Le),E(el,s,Oe),E(el,i,Ne),E(el,t,Ie),E(el,n,Le),E(X,t,Fe),E(X,n,Ge),O.width=rl(Fe*y),O.height=rl(Ge*y),xl.forEach((({_el:e,_show:t,_size:n,_pos:i,side:o})=>{if(null!=e)if(t){let t=o%2==1;E(e,t?"left":"top",i-(3===o||0===o?n:0)),E(e,t?"width":"height",n),E(e,t?"top":"left",t?Ne:Oe),E(e,t?"height":"width",t?Le:Ie),T(e,l)}else S(e,l)})),nn=on=sn=un=an=fn=cn=hn=rn=null,dn=1,_i(!0),Oe!=je||Ne!=Ke||Ie!=Xe||Le!=Ze){An(!1);let l=Ie/Xe,e=Le/Ze;if(re&&!xt&&oe.left>=0){oe.left*=l,oe.top*=e,Cn&&A(Cn,rl(oe.left),0,Ie,Le),Hn&&A(Hn,0,rl(oe.top),Ie,Le);for(let t=0;Dt.length>t;t++){let n=Dt[t];null!=n&&(Pt[t]*=l,At[t]*=e,A(n,ul(Pt[t]),ul(At[t]),Ie,Le))}}if(ei.show&&!wt&&ei.left>=0&&ei.width>0){ei.left*=l,ei.width*=l,ei.top*=e,ei.height*=e;for(let l in ki)E(ti,l,ei[l])}je=Oe,Ke=Ne,Xe=Ie,Ze=Le}Ci("setSize"),pt=!1}Fe>0&&Ge>0&&(K.clearRect(0,0,O.width,O.height),Ci("drawClear"),Pl.forEach((l=>l())),Ci("draw")),ei.show&&wt&&(ni(ei),wt=!1),re&&xt&&(xi(null,!0,!1),xt=!1),ie.show&&ie.live&&_t&&(mi(),_t=!1),F||(F=!0,k.status=1,Ci("ready")),mn=!1,Un=!1}function Kn(l,e){let t=vl[l];if(null==t.from){if(0==Gt){let n=t.range(k,e.min,e.max,l);e.min=n[0],e.max=n[1]}if(e.min>e.max){let l=e.min;e.min=e.max,e.max=l}if(Gt>1&&null!=e.min&&null!=e.max&&1e-16>e.max-e.min)return;l==El&&2==t.distr&&Gt>0&&(e.min=L(e.min,g[0]),e.max=L(e.max,g[0]),e.min==e.max&&e.max++),Kl[l]=e,ht=!0,Jn()}}k.batch=function(l,e=!1){Un=!0,Vn=e,l(k),qn(),e&&Bn.length>0&&queueMicrotask($n)},k.redraw=(l,e)=>{mt=e||!1,!1!==l?ii(El,jl.min,jl.max):Jn()},k.setScale=Kn;let Xn=!1;const Zn=oe.drag;let Qn=Zn.x,li=Zn.y;re&&(oe.x&&(Wn=D("u-cursor-x",el)),oe.y&&(Yn=D("u-cursor-y",el)),0==jl.ori?(Cn=Wn,Hn=Yn):(Cn=Yn,Hn=Wn),Nn=oe.left,jn=oe.top);const ei=k.select=Bl({show:!0,over:!0,left:0,width:0,top:0,height:0},u.select),ti=ei.show?D("u-select",ei.over?el:ll):null;function ni(l,e){if(ei.show){for(let e in l)ei[e]=l[e],e in ki&&E(ti,e,l[e]);!1!==e&&Ci("setSelect")}}function ii(l,e,t){Kn(l,{min:e,max:t})}function oi(e,t,n,i){null!=t.focus&&function(l){if(l!=ui){let e=null==l,t=1!=Tt.alpha;pl.forEach(((n,i)=>{if(1==M||i>0){let o=e||0==i||i==l;n._focus=e?null:o,t&&function(l,e){pl[l].alpha=e,re&&null!=Dt[l]&&(Dt[l].style.opacity=e),se&&me[l]&&(me[l].style.opacity=e)}(i,o?1:Tt.alpha)}})),ui=l,t&&Jn()}}(e),null!=t.show&&pl.forEach(((n,i)=>{0>=i||e!=i&&null!=e||(n.show=t.show,function(e){if(pl[e].show)se&&T(me[e],l);else if(se&&S(me[e],l),re){let l=zt?Dt[0]:Dt[e];null!=l&&A(l,-10,-10,Ie,Le)}}(i),2==M?(ii(n.facets[0].scale,null,null),ii(n.facets[1].scale,null,null)):ii(n.scale,null,null),Jn())})),!1!==n&&Ci("setSeries",e,t),i&&Ii("setSeries",k,e,t)}let si,ri,ui;k.setSelect=ni,k.setSeries=oi,k.addBand=function(l,e){l.fill=bl(l.fill||null),l.dir=Q(l.dir,-1),Tl.splice(e=null==e?Tl.length:e,0,l)},k.setBand=function(l,e){Bl(Tl[l],e)},k.delBand=function(l){null==l?Tl.length=0:Tl.splice(l,1)};const ai={focus:!0};function fi(l,e,t){let n=vl[e];t&&(l=l/y-(1==n.ori?Ne:Oe));let i=Ie;1==n.ori&&(i=Le,l=i-l),-1==n.dir&&(l=i-l);let o=n._min,s=o+l/i*(n._max-o),r=n.distr;return 3==r?cl(10,s):4==r?((l,e=1)=>nl.sinh(l)*e)(s,n.asinh):100==r?n.bwd(s):s}function ci(l,e){E(ti,s,ei.left=l),E(ti,t,ei.width=e)}function hi(l,e){E(ti,i,ei.top=l),E(ti,n,ei.height=e)}se&&Et&&Ce(p,ce,(l=>{oe._lock||(Mt(l),null!=ui&&oi(null,ai,!0,Fi.setSeries))})),k.valToIdx=l=>L(l,g[0]),k.posToIdx=function(l,e){return L(fi(l,El,e),g[0],Lt,en)},k.posToVal=fi,k.valToPos=(l,e,t)=>0==vl[e].ori?P(l,vl[e],t?ot:Ie,t?Qe:0):W(l,vl[e],t?st:Le,t?lt:0),k.setCursor=(l,e,t)=>{Nn=l.left,jn=l.top,xi(null,e,t)};let di=0==jl.ori?ci:hi,pi=1==jl.ori?ci:hi;function mi(l,e){if(null!=l&&(l.idxs?l.idxs.forEach(((l,e)=>{te[e]=l})):(l=>void 0===l)(l.idx)||te.fill(l.idx),ie.idx=te[0]),se&&ie.live){for(let l=0;pl.length>l;l++)(l>0||1==M&&!xe)&&gi(l,te[l]);!function(){if(se&&ie.live)for(let l=2==M?1:0;pl.length>l;l++){if(0==l&&xe)continue;let e=ie.values[l],t=0;for(let n in e)ge[l][t++].firstChild.nodeValue=e[n]}}()}_t=!1,!1!==e&&Ci("setLegend")}function gi(l,e){let t,n=pl[l],i=0==l&&2==Ul?pn:g[l];xe?t=n.values(k,l,e)??we:(t=n.value(k,null==e?null:i[e],l,e),t=null==t?we:{_:t}),ie.values[l]=t}function xi(l,e,t){let n;Ln=Nn,On=jn,[Nn,jn]=oe.move(k,Nn,jn),oe.left=Nn,oe.top=jn,re&&(Cn&&A(Cn,rl(Nn),0,Ie,Le),Hn&&A(Hn,0,rl(jn),Ie,Le)),si=gl,ri=null;let i=0==jl.ori?Ie:Le,o=1==jl.ori?Ie:Le;if(0>Nn||0==Gt||Lt>en){n=oe.idx=null;for(let l=0;pl.length>l;l++){let e=Dt[l];null!=e&&A(e,-10,-10,Ie,Le)}Et&&oi(null,ai,!0,null==l&&Fi.setSeries),ie.live&&(te.fill(n),_t=!0)}else{let l,e,t;1==M&&(l=0==jl.ori?Nn:jn,e=fi(l,El),n=oe.idx=L(e,g[0],Lt,en),t=$l(g[0][n],jl,i,0));let s=-10,r=-10,u=0,a=0,f=!0,c="",h="";for(let l=2==M?1:0;pl.length>l;l++){let d=pl[l],p=te[l],m=null==p?null:1==M?g[l][p]:g[l][1][p],x=oe.dataIdx(k,l,n,e),w=null==x?null:1==M?g[l][x]:g[l][1][x];if(_t=_t||w!=m||x!=p,te[l]=x,l>0&&d.show){let e=null==x?-10:x==n?t:$l(1==M?g[0][x]:g[l][0][x],jl,i,0),p=null==w?-10:ql(w,1==M?vl[d.scale]:vl[d.facets[1].scale],o,0);if(Et&&null!=w){let e=1==jl.ori?Nn:jn,t=ol(Tt.dist(k,l,x,p,e));if(si>t){let n=Tt.bias;if(0!=n){let i=fi(e,d.scale),o=0>i?-1:1;o!=(0>w?-1:1)||(1==o?1==n?i>w:w>i:1==n?w>i:i>w)||(si=t,ri=l)}else si=t,ri=l}}if(_t||zt){let t,n;0==jl.ori?(t=e,n=p):(t=p,n=e);let i,o,d,m,g,x,w=!0,_=St.bbox;if(null!=_){w=!1;let e=_(k,l);d=e.left,m=e.top,i=e.width,o=e.height}else d=t,m=n,i=o=St.size(k,l);if(x=St.fill(k,l),g=St.stroke(k,l),zt)l!=ri||si>Tt.prox||(s=d,r=m,u=i,a=o,f=w,c=x,h=g);else{let e=Dt[l];null!=e&&(Pt[l]=d,At[l]=m,H(e,i,o,w),Y(e,x,g),A(e,ul(d),ul(m),Ie,Le))}}}}if(zt){let l=Tt.prox;if(_t||(null==ui?l>=si:si>l||ri!=ui)){let l=Dt[0];null!=l&&(Pt[0]=s,At[0]=r,H(l,u,a,f),Y(l,c,h),A(l,ul(s),ul(r),Ie,Le))}}}if(ei.show&&Xn)if(null!=l){let[e,t]=Fi.scales,[n,s]=Fi.match,[r,u]=l.cursor.sync.scales,a=l.cursor.drag;if(Qn=a._x,li=a._y,Qn||li){let a,f,c,h,d,{left:p,top:m,width:g,height:x}=l.select,w=l.scales[r].ori,_=l.posToVal,b=null!=e&&n(e,r),v=null!=t&&s(t,u);b&&Qn?(0==w?(a=p,f=g):(a=m,f=x),c=vl[e],h=$l(_(a,r),c,i,0),d=$l(_(a+f,r),c,i,0),di(al(h,d),ol(d-h))):di(0,i),v&&li?(1==w?(a=p,f=g):(a=m,f=x),c=vl[t],h=ql(_(a,u),c,o,0),d=ql(_(a+f,u),c,o,0),pi(al(h,d),ol(d-h))):pi(0,o)}else yi()}else{let l=ol(Ln-Fn),e=ol(On-Rn);if(1==jl.ori){let t=l;l=e,e=t}Qn=Zn.x&&l>=Zn.dist,li=Zn.y&&e>=Zn.dist;let t,n,s=Zn.uni;null!=s?Qn&&li&&(Qn=l>=s,li=e>=s,Qn||li||(e>l?li=!0:Qn=!0)):Zn.x&&Zn.y&&(Qn||li)&&(Qn=li=!0),Qn&&(0==jl.ori?(t=Gn,n=Nn):(t=In,n=jn),di(al(t,n),ol(n-t)),li||pi(0,o)),li&&(1==jl.ori?(t=Gn,n=Nn):(t=In,n=jn),pi(al(t,n),ol(n-t)),Qn||di(0,i)),Qn||li||(di(0,0),pi(0,0))}if(Zn._x=Qn,Zn._y=li,null==l){if(t){if(null!=Ri){let[l,e]=Fi.scales;Fi.values[0]=null!=l?fi(0==jl.ori?Nn:jn,l):null,Fi.values[1]=null!=e?fi(1==jl.ori?Nn:jn,e):null}Ii(f,k,Nn,jn,Ie,Le,n)}if(Et){let l=t&&Fi.setSeries,e=Tt.prox;null==ui?si>e||oi(ri,ai,!0,l):si>e?oi(null,ai,!0,l):ri!=ui&&oi(ri,ai,!0,l)}}_t&&(ie.idx=n,mi()),!1!==e&&Ci("setCursor")}k.setLegend=mi;let wi=null;function _i(l=!1){l?wi=null:(wi=el.getBoundingClientRect(),Ci("syncRect",wi))}function bi(l,e,t,n,i,o){oe._lock||Xn&&null!=l&&0==l.movementX&&0==l.movementY||(vi(l,e,t,n,i,o,0,!1,null!=l),null!=l?xi(null,!0,!0):xi(e,!0,!1))}function vi(l,e,t,n,i,o,s,r,u){if(null==wi&&_i(!1),Mt(l),null!=l)t=l.clientX-wi.left,n=l.clientY-wi.top;else{if(0>t||0>n)return Nn=-10,void(jn=-10);let[l,s]=Fi.scales,r=e.cursor.sync,[u,a]=r.values,[f,c]=r.scales,[h,d]=Fi.match,p=e.axes[0].side%2==1,m=0==jl.ori?Ie:Le,g=1==jl.ori?Ie:Le,x=p?o:i,w=p?i:o,_=p?n:t,b=p?t:n;if(t=null!=f?h(l,f)?C(u,vl[l],m,0):-10:m*(_/x),n=null!=c?d(s,c)?C(a,vl[s],g,0):-10:g*(b/w),1==jl.ori){let l=t;t=n,n=l}}!u||null!=e&&e.cursor.event.type!=f||(t>1&&Ie-1>t||(t=zl(t,Ie)),n>1&&Le-1>n||(n=zl(n,Le))),r?(Fn=t,Rn=n,[Gn,In]=oe.move(k,t,n)):(Nn=t,jn=n)}Object.defineProperty(k,"rect",{get:()=>(null==wi&&_i(!1),wi)});const ki={width:0,height:0,left:0,top:0};function yi(){ni(ki,!1)}let Mi,Si,Ti,Ei;function zi(l,e,t,n,i,o){Xn=!0,Qn=li=Zn._x=Zn._y=!1,vi(l,e,t,n,i,o,0,!0,!1),null!=l&&(Ce(h,b,Di,!1),Ii(c,k,Gn,In,Ie,Le,null));let{left:s,top:r,width:u,height:a}=ei;Mi=s,Si=r,Ti=u,Ei=a}function Di(l,e,t,n,i,o){Xn=Zn._x=Zn._y=!1,vi(l,e,t,n,i,o,0,!1,!0);let{left:s,top:r,width:u,height:a}=ei,f=u>0||a>0,c=Mi!=s||Si!=r||Ti!=u||Ei!=a;if(f&&c&&ni(ei),Zn.setScale&&f&&c){let l=s,e=u,t=r,n=a;if(1==jl.ori&&(l=r,e=a,t=s,n=u),Qn&&ii(El,fi(l,El),fi(l+e,El)),li)for(let l in vl){let e=vl[l];l!=El&&null==e.from&&e.min!=gl&&ii(l,fi(t+n,l),fi(t,l))}yi()}else oe.lock&&(oe._lock=!oe._lock,xi(e,!0,null!=l));null!=l&&(He(h,b),Ii(h,k,Nn,jn,Ie,Le,null))}function Pi(l){oe._lock||(Mt(l),xn(),yi(),null!=l&&Ii(m,k,Nn,jn,Ie,Le,null))}function Ai(){xl.forEach(ln),vt(k.width,k.height,!0)}G(x,v,Ai);const Wi={};Wi.mousedown=zi,Wi.mousemove=bi,Wi.mouseup=Di,Wi.dblclick=Pi,Wi.setSeries=(l,e,t,n)=>{-1!=(t=(0,Fi.match[2])(k,e,t))&&oi(t,n,!0,!1)},re&&(Ce(c,el,zi),Ce(f,el,bi),Ce(d,el,(l=>{Mt(l),_i(!1)})),Ce(p,el,(function(l){if(oe._lock)return;Mt(l);let e=Xn;if(Xn){let l,e,t=!0,n=!0,i=10;0==jl.ori?(l=Qn,e=li):(l=li,e=Qn),l&&e&&(t=i>=Nn||Nn>=Ie-i,n=i>=jn||jn>=Le-i),l&&t&&(Nn=Gn>Nn?0:Ie),e&&n&&(jn=In>jn?0:Le),xi(null,!0,!0),Xn=!1}Nn=-10,jn=-10,te.fill(null),xi(null,!0,!0),e&&(Xn=e)})),Ce(m,el,Pi),It.add(k),k.syncRect=_i);const Yi=k.hooks=u.hooks||{};function Ci(l,e,t){Vn?Bn.push([l,e,t]):l in Yi&&Yi[l].forEach((l=>{l.call(null,k,e,t)}))}(u.plugins||[]).forEach((l=>{for(let e in l.hooks)Yi[e]=(Yi[e]||[]).concat(l.hooks[e])}));const Hi=(l,e,t)=>t,Fi=Bl({key:null,setSeries:!1,filters:{pub:Ml,sub:Ml},scales:[El,pl[1]?pl[1].scale:null],match:[Sl,Sl,Hi],values:[null,null]},oe.sync);2==Fi.match.length&&Fi.match.push(Hi),oe.sync=Fi;const Ri=Fi.key,Gi=dt(Ri);function Ii(l,e,t,n,i,o,s){Fi.filters.pub(l,e,t,n,i,o,s)&&Gi.pub(l,e,t,n,i,o,s)}function Li(){Ci("init",u,g),gn(g||u.data,!1),Kl[El]?Kn(El,Kl[El]):xn(),wt=ei.show&&(ei.width>0||ei.height>0),xt=_t=!0,vt(u.width,u.height)}return Gi.sub(k),k.pub=function(l,e,t,n,i,o,s){Fi.filters.sub(l,e,t,n,i,o,s)&&Wi[l](null,e,t,n,i,o,s)},k.destroy=function(){Gi.unsub(k),It.delete(k),Pe.clear(),I(x,v,Ai),R.remove(),ce?.remove(),Ci("destroy")},pl.forEach(Yt),xl.forEach((function(l,e){if(l._show=l.show,l.show){let t=vl[l.scale];null==t&&(l.scale=l.side%2?pl[1].scale:El,t=vl[l.scale]);let n=t.time;l.size=bl(l.size),l.space=bl(l.space),l.rotate=bl(l.rotate),Gl(l.incrs)&&l.incrs.forEach((l=>{!Wl.has(l)&&Wl.set(l,Yl(l))})),l.incrs=bl(l.incrs||(2==t.distr?ae:n?1==hl?ke:Se:fe)),l.splits=bl(l.splits||(n&&1==t.distr?Ql:3==t.distr?Je:4==t.distr?qe:$e)),l.stroke=bl(l.stroke),l.grid.stroke=bl(l.grid.stroke),l.ticks.stroke=bl(l.ticks.stroke),l.border.stroke=bl(l.border.stroke);let i=l.values;l.values=Gl(i)&&!Gl(i[0])?bl(i):n?Gl(i)?De(Xl,ze(i,Zl)):Ll(i)?function(l,e){let t=ne(e);return(e,n)=>n.map((e=>t(l(e))))}(Xl,i):i||le:i||Be,l.filter=bl(l.filter||(3>t.distr||10!=t.log?3==t.distr&&2==t.log?tt:kl:et)),l.font=Qt(l.font),l.labelFont=Qt(l.labelFont),l._size=l.size(k,null,e,0),l._space=l._rotate=l._incrs=l._found=l._splits=l._values=null,l._size>0&&(Ct[e]=!0,l._el=D("u-axis",X))}})),_?_ instanceof HTMLElement?(_.appendChild(R),Li()):_(k,Li):Li(),k}en.assign=Bl,en.fmtNum=tl,en.rangeNum=Z,en.rangeLog=B,en.rangeAsinh=$,en.orient=pt,en.pxRatio=y,en.join=function(l,e){if(function(l){let e=l[0][0],t=e.length;for(let n=1;l.length>n;n++){let i=l[n][0];if(i.length!=t)return!1;if(i!=e)for(let l=0;t>l;l++)if(i[l]!=e[l])return!1}return!0}(l)){let e=l[0].slice();for(let t=1;l.length>t;t++)e.push(...l[t].slice(1));return function(l,e=100){const t=l.length;if(1>=t)return!0;let n=0,i=t-1;for(;i>=n&&null==l[n];)n++;for(;i>=n&&null==l[i];)i--;if(n>=i)return!0;const o=fl(1,sl((i-n+1)/e));for(let e=l[n],t=n+o;i>=t;t+=o){const n=l[t];if(null!=n){if(e>=n)return!1;e=n}}return!0}(e[0])||(e=function(l){let e=l[0],t=e.length,n=Array(t);for(let l=0;n.length>l;l++)n[l]=l;n.sort(((l,t)=>e[l]-e[t]));let i=[];for(let e=0;l.length>e;e++){let o=l[e],s=Array(t);for(let l=0;t>l;l++)s[l]=o[n[l]];i.push(s)}return i}(e)),e}let t=new Set;for(let e=0;l.length>e;e++){let n=l[e][0],i=n.length;for(let l=0;i>l;l++)t.add(n[l])}let n=[Array.from(t).sort(((l,e)=>l-e))],i=n[0].length,o=new Map;for(let l=0;i>l;l++)o.set(n[0][l],l);for(let t=0;l.length>t;t++){let s=l[t],r=s[0];for(let l=1;s.length>l;l++){let u=s[l],a=Array(i).fill(void 0),f=e?e[t][l]:1,c=[];for(let l=0;u.length>l;l++){let e=u[l],t=o.get(r[l]);null===e?0!=f&&(a[t]=e,2==f&&c.push(t)):a[t]=e}$l(a,c,i),n.push(a)}}return n},en.fmtDate=ne,en.tzDate=function(l,e){let t;return"UTC"==e||"Etc/UTC"==e?t=new Date(+l+6e4*l.getTimezoneOffset()):e==ie?t=l:(t=new Date(l.toLocaleString("en-US",{timeZone:e})),t.setMilliseconds(l.getMilliseconds())),t},en.sync=dt;{en.addGap=function(l,e,t){let n=l[l.length-1];n&&n[0]==e?n[1]=t:l.push([e,t])},en.clipGaps=wt;let l=en.paths={points:Wt};l.linear=Ft,l.stepped=function(l){const e=Q(l.align,1),t=Q(l.ascDesc,!1),n=Q(l.alignGaps,0),i=Q(l.extend,!1);return(l,o,s,r)=>pt(l,o,((u,a,f,c,h,d,p,m,g,x,w)=>{[s,r]=U(f,s,r);let _=u.pxRound,{left:b,width:v}=l.bbox,k=l=>_(d(l,c,x,m)),M=l=>_(p(l,h,w,g)),S=0==c.ori?Mt:St;const T={stroke:new Path2D,fill:null,clip:null,band:null,gaps:null,flags:1},E=T.stroke,z=c.dir*(0==c.ori?1:-1);let D=M(f[1==z?s:r]),P=k(a[1==z?s:r]),A=P,W=P;i&&-1==e&&(W=b,S(E,W,D)),S(E,P,D);for(let l=1==z?s:r;l>=s&&r>=l;l+=z){let t=f[l];if(null==t)continue;let n=k(a[l]),i=M(t);1==e?S(E,n,D):S(E,A,i),S(E,n,i),D=i,A=n}let Y=A;i&&1==e&&(Y=b+v,S(E,Y,D));let[C,H]=mt(l,o);if(null!=u.fill||0!=C){let e=T.fill=new Path2D(E),t=M(u.fillTo(l,o,u.min,u.max,C));S(e,Y,t),S(e,W,t)}if(!u.spanGaps){let i=[];i.push(..._t(a,f,s,r,z,k,n));let h=u.width*y/2,d=t||1==e?h:-h,p=t||-1==e?-h:h;i.forEach((l=>{l[0]+=d,l[1]+=p})),T.gaps=i=u.gaps(l,o,s,r,i),T.clip=wt(i,c.ori,m,g,x,w)}return 0!=H&&(T.band=2==H?[xt(l,o,s,r,E,-1),xt(l,o,s,r,E,1)]:xt(l,o,s,r,E,H)),T}))},l.bars=function(l){const e=Q((l=l||Hl).size,[.6,gl,1]),t=l.align||0,n=l.gap||0;let i=l.radius;i=null==i?[0,0]:"number"==typeof i?[i,0]:i;const o=bl(i),s=1-e[0],r=Q(e[1],gl),u=Q(e[2],1),a=Q(l.disp,Hl),f=Q(l.each,(()=>{})),{fill:c,stroke:h}=a;return(l,e,i,d)=>pt(l,e,((p,m,g,x,w,_,b,v,k,M,S)=>{let T,E,z=p.pxRound,D=t,P=n*y,A=r*y,W=u*y;0==x.ori?[T,E]=o(l,e):[E,T]=o(l,e);const Y=x.dir*(0==x.ori?1:-1);let C,H,F,R=0==x.ori?Tt:Et,G=0==x.ori?f:(l,e,t,n,i,o,s)=>{f(l,e,t,i,n,s,o)},I=Q(l.bands,Fl).find((l=>l.series[0]==e)),L=p.fillTo(l,e,p.min,p.max,null!=I?I.dir:0),O=z(b(L,w,S,k)),N=M,j=z(p.width*y),U=!1,V=null,B=null,$=null,J=null;null==c||0!=j&&null==h||(U=!0,V=c.values(l,e,i,d),B=new Map,new Set(V).forEach((l=>{null!=l&&B.set(l,new Path2D)})),j>0&&($=h.values(l,e,i,d),J=new Map,new Set($).forEach((l=>{null!=l&&J.set(l,new Path2D)}))));let{x0:q,size:K}=a;if(null!=q&&null!=K){D=1,m=q.values(l,e,i,d),2==q.unit&&(m=m.map((e=>l.posToVal(v+e*M,x.key,!0))));let t=K.values(l,e,i,d);H=2==K.unit?t[0]*M:_(t[0],x,M,v)-_(0,x,M,v),N=Rt(m,g,_,x,M,v,N),F=N-H+P}else N=Rt(m,g,_,x,M,v,N),F=N*s+P,H=N-F;1>F&&(F=0),H/2>j||(j=0),5>F&&(z=vl);let X=F>0;H=z(wl(N-F-(X?j:0),W,A)),C=(0==D?H/2:D==Y?0:H)-D*Y*((0==D?P/2:0)+(X?j/2:0));const Z={stroke:null,fill:null,clip:null,band:null,gaps:null,flags:0},ll=U?null:new Path2D;let el=null;if(null!=I)el=l.data[I.series[1]];else{let{y0:t,y1:n}=a;null!=t&&null!=n&&(g=n.values(l,e,i,d),el=t.values(l,e,i,d))}let tl=T*H,nl=E*H;for(let t=1==Y?i:d;t>=i&&d>=t;t+=Y){let n=g[t];if(null==n)continue;if(null!=el){let l=el[t]??0;if(n-l==0)continue;O=b(l,w,S,k)}let i=_(2!=x.distr||null!=a?m[t]:t,x,M,v),o=b(Q(n,L),w,S,k),s=z(i-C),r=z(fl(o,O)),u=z(al(o,O)),f=r-u;if(null!=n){let i=0>n?nl:tl,o=0>n?tl:nl;U?(j>0&&null!=$[t]&&R(J.get($[t]),s,u+sl(j/2),H,fl(0,f-j),i,o),null!=V[t]&&R(B.get(V[t]),s,u+sl(j/2),H,fl(0,f-j),i,o)):R(ll,s,u+sl(j/2),H,fl(0,f-j),i,o),G(l,e,t,s-j/2,u,H+j,f)}}return j>0?Z.stroke=U?J:ll:U||(Z._fill=0==p.width?p._fill:p._stroke??p._fill,Z.width=0),Z.fill=U?B:ll,Z}))},l.spline=function(l){return function(l,e){const t=Q(e?.alignGaps,0);return(e,n,i,o)=>pt(e,n,((s,r,u,a,f,c,h,d,p,m,g)=>{[i,o]=U(u,i,o);let x,w,_,b=s.pxRound,v=l=>b(c(l,a,m,d)),k=l=>b(h(l,f,g,p));0==a.ori?(x=kt,_=Mt,w=Pt):(x=yt,_=St,w=At);const y=a.dir*(0==a.ori?1:-1);let M=v(r[1==y?i:o]),S=M,T=[],E=[];for(let l=1==y?i:o;l>=i&&o>=l;l+=y)if(null!=u[l]){let e=v(r[l]);T.push(S=e),E.push(k(u[l]))}const z={stroke:l(T,E,x,_,w,b),fill:null,clip:null,band:null,gaps:null,flags:1},D=z.stroke;let[P,A]=mt(e,n);if(null!=s.fill||0!=P){let l=z.fill=new Path2D(D),t=k(s.fillTo(e,n,s.min,s.max,P));_(l,S,t),_(l,M,t)}if(!s.spanGaps){let l=[];l.push(..._t(r,u,i,o,y,v,t)),z.gaps=l=s.gaps(e,n,i,o,l),z.clip=wt(l,a.ori,d,p,m,g)}return 0!=A&&(z.band=2==A?[xt(e,n,i,o,D,-1),xt(e,n,i,o,D,1)]:xt(e,n,i,o,D,A)),z}))}(Gt,l)}}return en}();
diff --git a/web/public/assets/vendor/uplot/uPlot.min.css b/web/public/assets/vendor/uplot/uPlot.min.css
new file mode 100644
index 00000000..a030d63f
--- /dev/null
+++ b/web/public/assets/vendor/uplot/uPlot.min.css
@@ -0,0 +1 @@
+.uplot, .uplot *, .uplot *::before, .uplot *::after {box-sizing: border-box;}.uplot {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height: 1.5;width: min-content;}.u-title {text-align: center;font-size: 18px;font-weight: bold;}.u-wrap {position: relative;user-select: none;}.u-over, .u-under {position: absolute;}.u-under {overflow: hidden;}.uplot canvas {display: block;position: relative;width: 100%;height: 100%;}.u-axis {position: absolute;}.u-legend {font-size: 14px;margin: auto;text-align: center;}.u-inline {display: block;}.u-inline * {display: inline-block;}.u-inline tr {margin-right: 16px;}.u-legend th {font-weight: 600;}.u-legend th > * {vertical-align: middle;display: inline-block;}.u-legend .u-marker {width: 1em;height: 1em;margin-right: 4px;background-clip: padding-box !important;}.u-inline.u-live th::after {content: ":";vertical-align: middle;}.u-inline:not(.u-live) .u-value {display: none;}.u-series > * {padding: 4px;}.u-series th {cursor: pointer;}.u-legend .u-off > * {opacity: 0.3;}.u-select {background: rgba(0,0,0,0.07);position: absolute;pointer-events: none;}.u-cursor-x, .u-cursor-y {position: absolute;left: 0;top: 0;pointer-events: none;will-change: transform;}.u-hz .u-cursor-x, .u-vt .u-cursor-y {height: 100%;border-right: 1px dashed #607D8B;}.u-hz .u-cursor-y, .u-vt .u-cursor-x {width: 100%;border-bottom: 1px dashed #607D8B;}.u-cursor-pt {position: absolute;top: 0;left: 0;border-radius: 50%;border: 0 solid;pointer-events: none;will-change: transform;/*this has to be !important since we set inline "background" shorthand */background-clip: padding-box !important;}.u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off {display: none;}
\ No newline at end of file
diff --git a/web/scripts/copy-uplot.js b/web/scripts/copy-uplot.js
new file mode 100644
index 00000000..1a983043
--- /dev/null
+++ b/web/scripts/copy-uplot.js
@@ -0,0 +1,55 @@
+/*
+ * Copyright © 2025-26 l5yth & contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { mkdir, copyFile, access } from 'node:fs/promises';
+import { constants as fsConstants } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+/**
+ * Resolve an absolute path relative to this script location.
+ *
+ * @param {string[]} segments Path segments to append.
+ * @returns {string} Absolute path resolved from this script.
+ */
+function resolvePath(...segments) {
+  const scriptDir = path.dirname(fileURLToPath(import.meta.url));
+  return path.resolve(scriptDir, ...segments);
+}
+
+/**
+ * Ensure the uPlot assets are available within the public asset tree.
+ *
+ * @returns {Promise<void>} Resolves once files have been copied.
+ */
+async function copyUPlotAssets() {
+  const sourceDir = resolvePath('..', 'node_modules', 'uplot', 'dist');
+  const targetDir = resolvePath('..', 'public', 'assets', 'vendor', 'uplot');
+  const assets = ['uPlot.iife.min.js', 'uPlot.min.css'];
+
+  await access(sourceDir, fsConstants.R_OK);
+  await mkdir(targetDir, { recursive: true });
+
+  await Promise.all(
+    assets.map(async asset => {
+      const source = path.join(sourceDir, asset);
+      const target = path.join(targetDir, asset);
+      await copyFile(source, target);
+    }),
+  );
+}
+
+await copyUPlotAssets();
diff --git a/web/views/charts.erb b/web/views/charts.erb
index f4a28be1..d20e2873 100644
--- a/web/views/charts.erb
+++ b/web/views/charts.erb
@@ -13,12 +13,14 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 -->
+<link rel="stylesheet" href="/assets/vendor/uplot/uPlot.min.css" />
+<script src="/assets/vendor/uplot/uPlot.iife.min.js" defer></script>
 <section class="charts-page">
   <header class="charts-page__intro">
     <h2>Network telemetry trends</h2>
     <p>Aggregated telemetry snapshots from every node in the past week.</p>
   </header>
-  <div id="chartsPage" class="charts-page__content">
+  <div id="chartsPage" class="charts-page__content" data-telemetry-root="true">
     <p class="charts-page__status">Loading aggregated telemetry charts…</p>
   </div>
 </section>
diff --git a/web/views/node_detail.erb b/web/views/node_detail.erb
index 2e6ba33a..97069434 100644
--- a/web/views/node_detail.erb
+++ b/web/views/node_detail.erb
@@ -17,11 +17,14 @@
    short_display = node_page_short_name || "Loading"
    long_display = node_page_long_name
    identifier_display = node_page_identifier || "" %>
+<link rel="stylesheet" href="/assets/vendor/uplot/uPlot.min.css" />
+<script src="/assets/vendor/uplot/uPlot.iife.min.js" defer></script>
 <section
   id="nodeDetail"
   class="node-detail"
   data-node-reference="<%= Rack::Utils.escape_html(reference_json) %>"
   data-private-mode="<%= private_mode ? "true" : "false" %>"
+  data-telemetry-root="true"
 >
   <header class="node-detail__header">
     <h2 class="node-detail__title">