Quick Start

Build a revenue dashboard with KPI cards, charts, and rankings in under 50 lines.

Prerequisites

Make sure you’ve installed the packages and added the stylesheets to your App.razor:

<link href="_content/Arcadia.Theme/css/arcadia.css" rel="stylesheet" />
<link href="_content/Arcadia.Charts/css/arcadia-charts.css" rel="stylesheet" />

Do I need Arcadia.Theme?

Arcadia.Theme is optional. It provides design tokens (colors, spacing, typography) and the light/dark theme switcher driven by the data-arcadia-theme attribute.

Charts work without it — every chart ships with a built-in palette and sensible fallbacks, so you can install just Arcadia.Charts and render charts immediately.

Install Theme when you want any of:

• Light/dark theme switching (the data-arcadia-theme="light|dark" attribute only resolves to real colors when Theme is loaded)
• Semantic color names (Color="primary", Color="success") to follow your app’s brand tokens
• Consistent design tokens shared across multiple Arcadia packages (Charts, DataGrid, UI)
• Your own components to match Arcadia’s visual style

The dashboard below uses semantic color names, so it assumes Theme is installed.

The Dashboard

@page "/dashboard"
@using Arcadia.Charts.Core
@using Arcadia.Charts.Components.Charts
@using Arcadia.Charts.Components.Dashboard

<ArcadiaKpiCard Title="Revenue" Value="$142,500"
              Delta="+12.3%" DeltaType="DeltaType.Increase"
              Sparkline="@(new double[] { 42, 48, 45, 52, 55, 58, 62 })" />

<ArcadiaLineChart TItem="SalesRecord" Data="@data"
                XField="@(d => (object)d.Month)"
                Series="@series" Height="300" />

<ArcadiaBarList TItem="Product" Data="@products"
              NameField="@(d => d.Name)"
              ValueField="@(d => d.Sales)" ValueFormat="$#,##0" />

@code {
    record SalesRecord(string Month, double Revenue, double Target);
    record Product(string Name, double Sales);

    var data = new List<SalesRecord>
    {
        new("Jan", 45000, 50000), new("Feb", 52000, 50000),
        new("Mar", 48000, 52000), new("Apr", 61000, 55000),
    };

    var series = new List<SeriesConfig<SalesRecord>>
    {
        new() { Name = "Revenue", Field = d => d.Revenue,
                Color = "primary", ShowArea = true },
        new() { Name = "Target", Field = d => d.Target,
                Color = "secondary", Dashed = true },
    };

    var products = new List<Product>
    {
        new("Enterprise Suite", 48500),
        new("Pro License", 32000),
        new("Starter Plan", 18200),
    };
}

What You Get

• KPI Cards — value, delta, sparkline. Zero config.
• Line Charts — multi-series, area fill, animations.
• Bar Rankings — auto-sized horizontal bars.
• Accessibility — hidden data tables, ARIA labels, keyboard nav.
• Theming — all colors from CSS custom properties.

Live Demo