Line Chart

Multi-series line charts drawn with a high-resolution braille canvas.

Try in Playground

Overview

The LineChart control plots one or more ChartSeries as continuous lines. Each series is rendered into a braille canvas (2×4 dots per cell), giving smooth curves at four times the vertical and twice the horizontal resolution of a plain cell. Points are spread evenly along the x axis by index; the y axis auto-scales unless YMin/YMax are set. Give each ChartDataPoint a Label (e.g. a date) and it is drawn along the bottom as an x-axis label, thinned to fit. The chart is also focusable — ←/→ (or a click) moves a crosshair to inspect a point. Provide data inline or bind SeriesSource. 

<LineChart Title="Latency by day (ms)" ShowMarkers="True">
    <ChartSeries Name="p50" Color="#4EC9B0">
        <ChartDataPoint Label="Mon" Value="12" />
        <ChartDataPoint Label="Tue" Value="18" />
        <ChartDataPoint Label="Wed" Value="9" />
        <ChartDataPoint Label="Thu" Value="22" />
    </ChartSeries>
    <ChartSeries Name="p99" Color="#F48771">
        <ChartDataPoint Label="Mon" Value="40" />
        <ChartDataPoint Label="Tue" Value="55" />
        <ChartDataPoint Label="Wed" Value="35" />
        <ChartDataPoint Label="Thu" Value="70" />
    </ChartSeries>
</LineChart>

Properties

PropertyTypeDescription
SeriesIList<ChartSeries>Inline series collection (content property).
SeriesSourceIEnumerableBound series collection; overrides Series.
ShowMarkersboolDraw a marker at each data point.
ShowXLabelsboolDraw x-axis labels from each point's Label (default true; only reserves a row when labels exist).
SelectedIndexintSelected point index (-1 = none); marked with a crosshair. Two-way bindable.
YMin / YMaxdoubleExplicit y-axis bounds; NaN (default) auto-scales.
ShowAxes / ShowGrid / ShowLegendboolToggle chart chrome.

Interactivity

Give the chart focus (Tab, or click it) and use ←/→ (plus Home/End) to move a vertical crosshair across the data points, or click near a point to jump to it. SelectedIndex updates two-way, so you can show the selected day's values elsewhere. The selected point's x label is emphasized.

Data Binding

Bind a collection of series from a ViewModel to SeriesSource. The chart subscribes to INotifyCollectionChanged, so adding or removing a series re-renders automatically — ideal for a live dashboard. Data classes and ViewModels must be public or internal so the AOT source generator can bind them. 

public sealed class LatencyViewModel : ViewModelBase
{
    public ObservableCollection<ChartSeries> Metrics { get; } =
    [
        new ChartSeries { Name = "p50",
            Values = { new() { Value = 12 }, new() { Value = 18 }, new() { Value = 9 } } },
        new ChartSeries { Name = "p99",
            Values = { new() { Value = 40 }, new() { Value = 55 }, new() { Value = 35 } } },
    ];

    // Swapping a whole series in re-renders the chart automatically.
    public void ShowP999() => Metrics.Add(new ChartSeries
    {
        Name = "p999",
        Values = { new() { Value = 90 }, new() { Value = 120 }, new() { Value = 80 } }
    });
}
<LineChart SeriesSource="{Binding Metrics}" ShowMarkers="True" />

Note: ChartSeries.Values is a plain list; to push a new point onto a live series, replace the series (or reassign its values) rather than mutating the existing list.

Key Concepts