Time Series Chart
Time-axis line chart with zoom and brush selection.
Basic
DateTime axis with auto zoom
razor
<TimeSeriesChart Series="series" Height="350px" />
@code {
private List<TimeSeriesSeries> series = new()
{
new()
{
Name = "Heart Rate",
Data = new()
{
new TimeSeriesPoint(new DateTime(2025, 1, 1), 72),
new TimeSeriesPoint(new DateTime(2025, 1, 2), 75),
// ...
}
}
};
}Smooth with area
Smooth curves and gradient fill
razor
<TimeSeriesChart Series="series"
Smooth="true"
ShowArea="true"
Height="350px" />Brush selection
EnableBrush="true" for range filtering
razor
<TimeSeriesChart Series="series"
EnableBrush="true"
Height="400px" />