54 Blazor charts

Install

Every chart is rendered as inline <svg> whose geometry (scales, ticks, paths, arcs) is computed by the D3 module bundled in the package, and every colour is emitted as a daisyUI theme token (var(--color-primary), …), so charts follow the active data-theme automatically, with no recompilation. The only dependency is DaisyBlazor.Components (for the Color enum and the CssClass merge helper).

The charts need JavaScript: the module (_content/DaisyBlazor.Charts/charts.mjs) loads on first use. Until it answers, each chart shows a placeholder of the same size, so nothing jumps. To send the finished chart in the first HTML (prerendering, static server rendering), add the server package described at the end of this guide.

dotnet add package DaisyBlazor.Charts

@using DaisyBlazor.Charts

Every chart also accepts Title (heading above the chart, also the accessible label), Width (default "100%"), Height (default "16rem"; Sparkline "1.5rem", Width "5rem"), and the standard Class / Style / unmatched-attribute splat.

Data models

// A single categorical point — used by BarChart (flat), PieChart, DonutChart.
// Color is an optional per-point CSS override.
public record ChartDataPoint(string Label, double Value, string? Color = null);

// A named numeric series — used by LineChart, AreaChart, grouped BarChart.
// Data index i lines up with the chart's X label i.
public class ChartSeries
{
    public string Name { get; set; } = string.Empty;
    public IReadOnlyList<double> Data { get; set; } = new List<double>();
    public string? Color { get; set; }              // optional CSS override

    public ChartSeries() { }
    public ChartSeries(string name, IReadOnlyList<double> data, string? color = null) { /* … */ }
}

ChartSeries.Data aligns by ordinal index with Labels. ChartDataPoint.Value must be finite; for the circular charts, non-positive values are ignored.

Colours follow the theme

Colours come from ChartPalette, which returns daisyUI tokens as CSS variables. Charts index into it (wrapping with modulo) so each series or slice gets a distinct, theme-driven colour. The default cycling order, in the current theme:

Because the values are var(--color-*), switching the daisyUI theme re-skins every chart instantly, with no rebuild and no new layout. Override the colour of an individual series or point by setting its Color to any CSS colour:

new ChartSeries("Errors", data, color: "var(--color-error)");   // a theme token
new ChartDataPoint("Other", 12, "#94a3b8");                     // a hex literal

ChartPalette.FromColor(Color) also maps the DaisyBlazor Color enum to its token, so you can drive chart colours from the same semantic enum used by the components.

Usage

Rendered live, then the code. Switch to another theme from the top bar and watch the colours follow.

@using DaisyBlazor.Charts

<LineChart Title="Weekly visitors"
           Labels="@(new[] { "Mon", "Tue", "Wed", "Thu", "Fri" })"
           Series="@_traffic"
           Smooth Area />

<BarChart Title="Signups by plan"
          Data="@(new[]
          {
              new ChartDataPoint("Starter", 12),
              new ChartDataPoint("Pro", 28),
              new ChartDataPoint("Team", 19)
          })" />

<DonutChart Title="Visits by source" Data="@_breakdown" CenterLabel="100" />

<Sparkline Data="@(new double[] { 3, 5, 4, 8, 6, 9 })" Area />

@code {
    private readonly ChartSeries[] _traffic =
    {
        new("Visitors", new double[] { 30, 40, 35, 50, 49 }),
        new("Signups",  new double[] {  5,  8,  6, 12, 10 })
    };

    private readonly ChartDataPoint[] _breakdown =
    {
        new("Direct", 40),
        new("Search", 35),
        new("Social", 25)
    };
}

Notes and geometry

• Line, area, bar charts and sparklines are laid out at the real pixel size of their box (Width by Height) and again when it is resized, so text and strokes are drawn at true size. Pie and donut charts scale a square to their Height.
• Value axes include a zero baseline and round out to nice ticks (large values read 50k); flat or empty data is handled without divide-by-zero, and a missing value leaves a gap.
• BarChart takes Series (grouped) over Data (flat) when both are supplied; Horizontal flips the axis.
• Pie and donut slices come from d3.pie and d3.arc, in data order from 12 o'clock, clockwise. Only positive values contribute to the total.
• Smooth line mode uses monotone cubic curves (d3.curveMonotoneX), which never overshoot the data.
• Every chart sets role="img" and an accessible <title> (from Title when provided).

Server rendering

DaisyBlazor.Charts.Server runs the same layout files on the server with Jint, a JavaScript interpreter written in .NET, so no Node.js is needed. Register it once and every chart computes its layout before its first render: prerendered and statically rendered pages contain the finished SVG instead of a placeholder. The prerendered layout travels to the interactive render with the persisted component state, so a WebAssembly chart keeps showing it while it starts; charts sized by their box (line, area, bar, sparkline) then lay out again at its real size. The dotnet new daisyblazor template comes with it registered.

dotnet add package DaisyBlazor.Charts.Server

builder.Services.AddDaisyBlazorChartsServerRendering();

The first layout of each kind parses the D3 modules it needs (a few hundred milliseconds, once per engine); most layouts then take under 5 ms, force-directed networks and density contours longer, and a chart with the same data is answered from a cache. The server and browser results are tested to match for every chart type.