Components/Time Series Chart
Time Series ChartNew
Multi-series time chart with time zones, brush zoom, thresholds, gaps, keyboard stepping and a data-table fallback.
Server metrics
Use left and right arrow keys to step through points. Hold Shift and press Enter to zoom to the range. Press Escape to reset.
Data table
| Time | CPU | Memory | Disk |
|---|---|---|---|
| Mar 10, 2025, 01:00 GMT+1 | 38% | 55% | 24% |
| Mar 10, 2025, 01:15 GMT+1 | 39.4% | 56.1% | 24.1% |
| Mar 10, 2025, 01:30 GMT+1 | 41.5% | 57.2% | 24.1% |
| Mar 10, 2025, 01:45 GMT+1 | 44.2% | 58.1% | 24.2% |
| Mar 10, 2025, 02:00 GMT+1 | 47.5% | 58.9% | 24.2% |
| Mar 10, 2025, 02:15 GMT+1 | 46.3% | 59.4% | 24.3% |
| Mar 10, 2025, 02:30 GMT+1 | 50.5% | 59.7% | 24.3% |
| Mar 10, 2025, 02:45 GMT+1 | 54.8% | 59.8% | 24.4% |
| Mar 10, 2025, 03:00 GMT+1 | 59.1% | 59.6% | 24.4% |
| Mar 10, 2025, 03:15 GMT+1 | 63.2% | 59.2% | 24.5% |
| Mar 10, 2025, 03:30 GMT+1 | 62.1% | 58.6% | 24.5% |
| Mar 10, 2025, 03:45 GMT+1 | 65.5% | 57.9% | 24.6% |
| Mar 10, 2025, 04:00 GMT+1 | 68.3% | 57.1% | 24.6% |
| Mar 10, 2025, 04:15 GMT+1 | 70.5% | 56.2% | 24.7% |
| Mar 10, 2025, 04:30 GMT+1 | 72% | 55.3% | 24.7% |
| Mar 10, 2025, 04:45 GMT+1 | 67.7% | 54.6% | 24.8% |
| Mar 10, 2025, 05:00 GMT+1 | 67.7% | 54% | 24.8% |
| Mar 10, 2025, 05:15 GMT+1 | 67.1% | 53.5% | 24.9% |
| Mar 10, 2025, 05:30 GMT+1 | 65.8% | 53.3% | 24.9% |
| Mar 10, 2025, 05:45 GMT+1 | 64.1% | 53.4% | 25% |
| Mar 10, 2025, 06:00 GMT+1 | 57% | 53.7% | 25% |
| Mar 10, 2025, 06:15 GMT+1 | 54.7% | 54.2% | 25.1% |
| Mar 10, 2025, 06:30 GMT+1 | 52.4% | 54.9% | 25.1% |
| Mar 10, 2025, 06:45 GMT+1 | 50.2% | 55.8% | 25.2% |
| Mar 10, 2025, 07:00 GMT+1 | 48.3% | 56.9% | 25.2% |
| Mar 10, 2025, 07:15 GMT+1 | 41.8% | 58% | 25.3% |
| Mar 10, 2025, 07:30 GMT+1 | 40.9% | 59.1% | 25.3% |
| Mar 10, 2025, 07:45 GMT+1 | 40.6% | 60.2% | 25.4% |
| Mar 10, 2025, 08:00 GMT+1 | 41% | 61.1% | 25.4% |
| Mar 10, 2025, 08:15 GMT+1 | 42.2% | 61.9% | 25.5% |
| Mar 10, 2025, 08:30 GMT+1 | 39.1% | 62.5% | 25.5% |
| Mar 10, 2025, 08:45 GMT+1 | 41.7% | 62.9% | 25.6% |
| Mar 10, 2025, 09:00 GMT+1 | 44.9% | 63% | 25.6% |
| Mar 10, 2025, 09:15 GMT+1 | 48.5% | 62.8% | 25.7% |
| Mar 10, 2025, 09:30 GMT+1 | 52.6% | 62.4% | 25.7% |
| Mar 10, 2025, 09:45 GMT+1 | 51.9% | 61.9% | 25.8% |
| Mar 10, 2025, 10:00 GMT+1 | 56.2% | 61.1% | 25.8% |
| Mar 10, 2025, 10:15 GMT+1 | 60.4% | 60.3% | 25.9% |
| Mar 10, 2025, 10:30 GMT+1 | 64.4% | 59.4% | 25.9% |
| Mar 10, 2025, 10:45 GMT+1 | 67.9% | 58.6% | 26% |
| Mar 10, 2025, 11:00 GMT+1 | 65.9% | No data | 26% |
| Mar 10, 2025, 11:15 GMT+1 | 68.3% | No data | 26.1% |
| Mar 10, 2025, 11:30 GMT+1 | 69.9% | No data | 26.1% |
| Mar 10, 2025, 11:45 GMT+1 | 70.9% | No data | 26.2% |
| Mar 10, 2025, 12:00 GMT+1 | 71.1% | No data | 26.2% |
| Mar 10, 2025, 12:15 GMT+1 | 65.6% | No data | 26.3% |
| Mar 10, 2025, 12:30 GMT+1 | 64.5% | No data | 26.3% |
| Mar 10, 2025, 12:45 GMT+1 | 62.9% | No data | 26.4% |
| Mar 10, 2025, 13:00 GMT+1 | 60.8% | 58.9% | 26.4% |
| Mar 10, 2025, 13:15 GMT+1 | 58.6% | 59.9% | 26.5% |
| Mar 10, 2025, 13:30 GMT+1 | 51.3% | 61% | 26.5% |
| Mar 10, 2025, 13:45 GMT+1 | 49% | 62.1% | 26.6% |
| Mar 10, 2025, 14:00 GMT+1 | 47% | 63.2% | 26.6% |
| Mar 10, 2025, 14:15 GMT+1 | 45.4% | 64.2% | 26.7% |
| Mar 10, 2025, 14:30 GMT+1 | 44.3% | 65% | 26.7% |
| Mar 10, 2025, 14:45 GMT+1 | 38.9% | 65.6% | 26.8% |
| Mar 10, 2025, 15:00 GMT+1 | 39.1% | 66% | 26.8% |
| Mar 10, 2025, 15:15 GMT+1 | 40.1% | 66.1% | 26.9% |
| Mar 10, 2025, 15:30 GMT+1 | 41.8% | 66% | 26.9% |
| Mar 10, 2025, 15:45 GMT+1 | 44.2% | 65.6% | 27% |
| Mar 10, 2025, 16:00 GMT+1 | 42.2% | 65.1% | 27% |
| Mar 10, 2025, 16:15 GMT+1 | 45.8% | 64.4% | 27.1% |
| Mar 10, 2025, 16:30 GMT+1 | 49.7% | 63.6% | 27.1% |
| Mar 10, 2025, 16:45 GMT+1 | 53.9% | 62.7% | 27.2% |
| Mar 10, 2025, 17:00 GMT+1 | 58.3% | 61.8% | 27.2% |
| Mar 10, 2025, 17:15 GMT+1 | 57.5% | 61.1% | 27.3% |
| Mar 10, 2025, 17:30 GMT+1 | 61.6% | 60.4% | 27.3% |
| Mar 10, 2025, 17:45 GMT+1 | 65.2% | 59.9% | 27.4% |
| Mar 10, 2025, 18:00 GMT+1 | 68.4% | 59.7% | 27.4% |
| Mar 10, 2025, 18:15 GMT+1 | 71% | 59.6% | 27.5% |
| Mar 10, 2025, 18:30 GMT+1 | 67.8% | 59.8% | 27.5% |
| Mar 10, 2025, 18:45 GMT+1 | 69% | 60.3% | 27.6% |
| Mar 10, 2025, 19:00 GMT+1 | 69.4% | 61% | 27.6% |
| Mar 10, 2025, 19:15 GMT+1 | 69.1% | 61.9% | 27.7% |
| Mar 10, 2025, 19:30 GMT+1 | 68.1% | 62.9% | 27.7% |
| Mar 10, 2025, 19:45 GMT+1 | 61.6% | 64% | 27.8% |
| Mar 10, 2025, 20:00 GMT+1 | 59.7% | 65.1% | 27.8% |
| Mar 10, 2025, 20:15 GMT+1 | 57.5% | 66.2% | 27.9% |
| Mar 10, 2025, 20:30 GMT+1 | 55.2% | 67.2% | 27.9% |
| Mar 10, 2025, 20:45 GMT+1 | 52.9% | 68% | 28% |
| Mar 10, 2025, 21:00 GMT+1 | 45.8% | 68.7% | 28% |
| Mar 10, 2025, 21:15 GMT+1 | 44.1% | 69.1% | 28.1% |
| Mar 10, 2025, 21:30 GMT+1 | 42.9% | 69.2% | 28.1% |
| Mar 10, 2025, 21:45 GMT+1 | 42.2% | 69.2% | 28.2% |
| Mar 10, 2025, 22:00 GMT+1 | 42.3% | 68.8% | 28.2% |
| Mar 10, 2025, 22:15 GMT+1 | 38% | 68.3% | 28.3% |
| Mar 10, 2025, 22:30 GMT+1 | 39.5% | 67.6% | 28.3% |
| Mar 10, 2025, 22:45 GMT+1 | 41.7% | 66.8% | 28.4% |
| Mar 10, 2025, 23:00 GMT+1 | 44.6% | 66% | 28.4% |
| Mar 10, 2025, 23:15 GMT+1 | 48% | 65.1% | 28.5% |
| Mar 10, 2025, 23:30 GMT+1 | 46.9% | 64.3% | 28.5% |
| Mar 10, 2025, 23:45 GMT+1 | 51% | 63.6% | 28.6% |
| Mar 11, 2025, 00:00 GMT+1 | 55.4% | 63.1% | 28.6% |
| Mar 11, 2025, 00:15 GMT+1 | 59.7% | 62.8% | 28.7% |
| Mar 11, 2025, 00:30 GMT+1 | 63.8% | 62.8% | 28.7% |
| Mar 11, 2025, 00:45 GMT+1 | 62.6% | 62.9% | 28.8% |
| Mar 11, 2025, 01:00 GMT+1 | 65.9% | 63.4% | 28.8% |
Energy load
Use left and right arrow keys to step through points. Hold Shift and press Enter to zoom to the range. Press Escape to reset.
Data table
| Time | Grid import | Solar |
|---|---|---|
| Mar 9, 2025, 20:00 EDT | 190 kW | 0 kW |
| Mar 9, 2025, 21:00 EDT | 194 kW | 0 kW |
| Mar 9, 2025, 22:00 EDT | 206 kW | 0 kW |
| Mar 9, 2025, 23:00 EDT | 225 kW | 0 kW |
| Mar 10, 2025, 00:00 EDT | 250 kW | 0 kW |
| Mar 10, 2025, 01:00 EDT | 279 kW | 0 kW |
| Mar 10, 2025, 02:00 EDT | 310 kW | 0 kW |
| Mar 10, 2025, 03:00 EDT | 341 kW | 67 kW |
| Mar 10, 2025, 04:00 EDT | 370 kW | 130 kW |
| Mar 10, 2025, 05:00 EDT | 395 kW | 184 kW |
| Mar 10, 2025, 06:00 EDT | 414 kW | 225 kW |
| Mar 10, 2025, 07:00 EDT | 426 kW | 251 kW |
| Mar 10, 2025, 08:00 EDT | 430 kW | 260 kW |
| Mar 10, 2025, 09:00 EDT | 426 kW | 251 kW |
| Mar 10, 2025, 10:00 EDT | 413 kW | 225 kW |
| Mar 10, 2025, 11:00 EDT | 394 kW | 184 kW |
| Mar 10, 2025, 12:00 EDT | 369 kW | 130 kW |
| Mar 10, 2025, 13:00 EDT | 339 kW | 67 kW |
| Mar 10, 2025, 14:00 EDT | 308 kW | 0 kW |
| Mar 10, 2025, 15:00 EDT | 277 kW | 0 kW |
| Mar 10, 2025, 16:00 EDT | 248 kW | 0 kW |
| Mar 10, 2025, 17:00 EDT | 223 kW | 0 kW |
| Mar 10, 2025, 18:00 EDT | 205 kW | 0 kW |
| Mar 10, 2025, 19:00 EDT | 193 kW | 0 kW |
| Mar 10, 2025, 20:00 EDT | 190 kW | 0 kW |
| Mar 10, 2025, 21:00 EDT | 195 kW | 0 kW |
| Mar 10, 2025, 22:00 EDT | 208 kW | 0 kW |
| Mar 10, 2025, 23:00 EDT | 228 kW | 0 kW |
| Mar 11, 2025, 00:00 EDT | 253 kW | 0 kW |
| Mar 11, 2025, 01:00 EDT | 283 kW | 0 kW |
| Mar 11, 2025, 02:00 EDT | 314 kW | 0 kW |
| Mar 11, 2025, 03:00 EDT | 345 kW | 67 kW |
| Mar 11, 2025, 04:00 EDT | 374 kW | 130 kW |
| Mar 11, 2025, 05:00 EDT | 398 kW | 184 kW |
| Mar 11, 2025, 06:00 EDT | 416 kW | 225 kW |
| Mar 11, 2025, 07:00 EDT | 427 kW | 251 kW |
| Mar 11, 2025, 08:00 EDT | 430 kW | 260 kW |
| Mar 11, 2025, 09:00 EDT | 425 kW | 251 kW |
| Mar 11, 2025, 10:00 EDT | 411 kW | 225 kW |
| Mar 11, 2025, 11:00 EDT | 391 kW | 184 kW |
| Mar 11, 2025, 12:00 EDT | 365 kW | 130 kW |
| Mar 11, 2025, 13:00 EDT | 336 kW | 67 kW |
| Mar 11, 2025, 14:00 EDT | 304 kW | 0 kW |
| Mar 11, 2025, 15:00 EDT | 273 kW | 0 kW |
| Mar 11, 2025, 16:00 EDT | 245 kW | 0 kW |
| Mar 11, 2025, 17:00 EDT | 221 kW | 0 kW |
| Mar 11, 2025, 18:00 EDT | 203 kW | 0 kW |
| Mar 11, 2025, 19:00 EDT | 193 kW | 0 kW |
Installation
$npx shadcn@latest add @opendraft/time-series-chart
Needs the @opendraft registry in your components.json. See Installation.
Dependencies
Source
The files the install command adds to your project. They're yours to edit.