Date-axis line/area chart — each point's X position is proportional to its timestamp on a true calendar scale (not a fixed slot). Switch the span (one day, one month, two years) to see the date-tick generator adapt to years, days, or hours. Built on the BPT chart foundation.
| Date | Value |
|---|---|
| 2025-11-18 00:00 | 51.3 |
| 2025-11-25 00:00 | 49.5 |
| 2025-12-02 00:00 | 47.5 |
| 2025-12-09 00:00 | 47.9 |
| 2025-12-16 00:00 | 46.3 |
| 2025-12-23 00:00 | 45.1 |
| 2025-12-30 00:00 | 46.8 |
| 2026-01-06 00:00 | 47.2 |
| 2026-01-13 00:00 | 45.5 |
| 2026-01-20 00:00 | 47.4 |
| 2026-01-27 00:00 | 46.1 |
| 2026-02-03 00:00 | 44.9 |
| 2026-02-10 00:00 | 45.2 |
| 2026-02-17 00:00 | 44.5 |
| 2026-02-24 00:00 | 44.1 |
| 2026-03-03 00:00 | 42.9 |
| 2026-03-10 00:00 | 43.3 |
| 2026-03-17 00:00 | 40.8 |
| 2026-03-24 00:00 | 43 |
| 2026-03-31 00:00 | 43.8 |
| 2026-04-07 00:00 | 43.5 |
| 2026-04-14 00:00 | 41.7 |
| 2026-04-21 00:00 | 39.5 |
| 2026-04-28 00:00 | 41.1 |
| 2026-05-05 00:00 | 43.2 |
| 2026-05-12 00:00 | 43.8 |
| 2026-05-19 00:00 | 41.4 |
<BptChartDateAxis Data="@Data"
Width="680"
Height="380"
FillArea="true"
Smoothing="true"
XAxisLabel="Date"
YAxisLabel="Reading"
Title="Sensor reading — Six months span"
OnElementClick="HandleClick" />
@code {
private readonly IReadOnlyList<BptChartDatePoint> Data = new BptChartDatePoint[]
{
new(X: new DateTime(2026, 1, 1), Y: 48),
new(X: new DateTime(2026, 2, 1), Y: 54),
new(X: new DateTime(2026, 3, 1), Y: 51),
// …
};
private void HandleClick(BptChartElementEvent e) {
// Click handler — fires regardless of TooltipMode.
}
}