Charts & Dashboard Widgets

A dashboard analytics toolkit for Blazor — 20 chart types and 7 pre-composed dashboard widgets. Native SVG rendering with zero JavaScript dependencies.

Chart Types

Dashboard Widgets

Live Demo

Shared Parameters

All chart components inherit from ChartBase<T> and share these parameters:

Line Chart Only

Series Configuration

var series = new List<SeriesConfig<SalesRecord>>
{
    new()
    {
        Name = "Revenue",         // Legend label
        Field = d => d.Revenue,   // Y-value selector
        Color = "primary",        // Color name or CSS
        StrokeWidth = 2,          // Line width
        ShowArea = true,          // Fill below line
        AreaOpacity = 0.15,       // Fill opacity
        Dashed = false,           // Dashed line
        ShowPoints = true,        // Data point dots
        PointRadius = 3,          // Dot size
        PointShape = "circle",    // circle/square/diamond/triangle
        CurveType = "linear",     // linear/smooth/step
    }
};

Color Palettes

7 built-in palettes:

ChartPalette.Default    // Theme token colors
ChartPalette.Cool       // Blues and greens
ChartPalette.Warm       // Reds and oranges
ChartPalette.Monochrome // Grays
ChartPalette.Pastel     // Soft colors
ChartPalette.Vibrant    // Saturated
ChartPalette.Accessible // Okabe-Ito (color-blind safe)

Accessibility

Every chart automatically includes:

• role="figure" and aria-label on the SVG
• Hidden <table> with all data for screen readers
• Animations respect prefers-reduced-motion

Custom Tooltip Templates

The TooltipTemplate parameter accepts a RenderFragment<T> for fully custom HTML tooltips:

<ArcadiaLineChart TItem="SalesRecord" Data="@data"
                  XField="@(d => (object)d.Month)" Series="@series"
                  Height="350" Width="0">
    <TooltipTemplate Context="item">
        <div style="padding: 8px;">
            <strong>@item.Month</strong>
            <div>Revenue: $@item.Revenue.ToString("N0")</div>
        </div>
    </TooltipTemplate>
</ArcadiaLineChart>

Note: Custom tooltip templates require an interactive render mode (Server or WASM). In static SSR, the default text tooltips are used instead.

Real-Time Data (ObservableCollection)

All chart types automatically detect when Data is an ObservableCollection<T> and re-render when items are added, removed, or cleared. No manual StateHasChanged() needed.

Basic Usage

@using System.Collections.ObjectModel

<ArcadiaLineChart TItem="StockTick" Data="@_ticks"
    XField="@(d => (object)d.Time)"
    Series="@_series"
    Height="300"
    ShowPoints="false"
    AnimateOnLoad="false" />

@code {
    private ObservableCollection<StockTick> _ticks = new();

    private List<SeriesConfig<StockTick>> _series = new()
    {
        new() { Name = "Price", Field = d => d.Price }
    };

    // Adding a tick auto-updates the chart — no StateHasChanged needed
    private void AddTick() => _ticks.Add(new StockTick(DateTime.Now, 142.50));
}

Timer-Based Streaming

@implements IDisposable

<ArcadiaLineChart TItem="SensorReading" Data="@_readings"
    XField="@(d => (object)d.Timestamp)"
    Series="@_series" Height="250" ShowPoints="false" />

@code {
    private ObservableCollection<SensorReading> _readings = new();
    private System.Threading.Timer? _timer;

    protected override void OnInitialized()
    {
        _timer = new System.Threading.Timer(_ =>
        {
            InvokeAsync(() =>
            {
                _readings.Add(new SensorReading(DateTime.Now, ReadSensor()));
                if (_readings.Count > 60) _readings.RemoveAt(0);
            });
        }, null, 0, 1000);
    }

    public void Dispose() => _timer?.Dispose();
}

SignalR Integration

// In a Blazor Server component
hubConnection.On<SensorReading>("NewReading", reading =>
{
    _readings.Add(reading);
    if (_readings.Count > 100) _readings.RemoveAt(0);
    // Chart updates automatically!
});

Debouncing

Rapid changes (e.g., 100 items added in 50ms) are automatically debounced into a single re-render for optimal performance. The default debounce window is 16ms (one frame at 60fps).