N
data-display chart@2.0.0

Chart

Pure-SVG bar / line / area chart. Zero chart.js dependency.

Live demo ← All components

Install

bash 
ndui add chart

Source files land in Components/Chart/, namespace-rewritten to your project's root namespace. The component CSS is wired into wwwroot/css/app.css automatically.

Dependencies

NuGet packages
  • Noundry.UI

See it in action

Every registered variant, state, and interaction pattern is demonstrated at the live showcase:

showcase.noundry.com/chart
Chart — live demo

Interactive examples with source toggles.

Deep dive — zero-dependency SVG charts via ``

Chart is a facade over Noundry.UI's TagHelper — pure-SVG bar / line / area / pie / donut / radar charts with no chart.js dependency. Data flows in via inline JSON, items, or an api-url; the Alpine runtime does the drawing.

#Minimum viable chart

cshtml 
<noundry-chart type="bar"
               title="Monthly revenue"
               width="600" height="300"
               data='[
                   {"label":"Jan","value":42},
                   {"label":"Feb","value":58},
                   {"label":"Mar","value":73}
               ]' />

#Wiring to a PageModel

csharp 
// Features/Dashboard/Pages/Index.cshtml.cs
public sealed class IndexModel(IDbConnection db) : PageModel
{
    public IReadOnlyList<object> MonthlyRevenue { get; private set; } = [];

    public async Task OnGetAsync(CancellationToken ct)
    {
        var rows = await db.QueryAsync<(string Month, decimal Total)>(@"
            SELECT strftime('%Y-%m', paid_at) AS month, SUM(amount) AS total
            FROM invoices
            WHERE paid_at >= date('now', '-12 months')
            GROUP BY month
            ORDER BY month", ct: ct);

        MonthlyRevenue = rows.Select(r => new { label = r.Month, value = r.Total }).ToArray();
    }
}
cshtml 
@page
@model __ROOT_NAMESPACE__.Features.Dashboard.Pages.IndexModel

<noundry-card>
    <noundry-card-header><h3>Revenue · 12mo</h3></noundry-card-header>
    <noundry-card-body>
        <noundry-chart type="bar"
                       items="Model.MonthlyRevenue"
                       width="600" height="240"
                       show-labels="true" show-grid="true" />
    </noundry-card-body>
</noundry-card>

#Chart types

noundry-chart accepts: bar, line, area, pie, donut, radar, scatter, bubble. The rendering is pure Alpine + SVG — no external chart library.

#Data shapes

Three ways to pass data:

  1. data='[...]' — inline JSON. Good for static pages.
  2. items="@Model.List" — C# IEnumerable projected on the server. Most common.
  3. api-url="/api/metrics" — async fetch on mount. Good for dashboards that refresh.

For multi-series data, wrap with :

cshtml 
<noundry-chart type="line" title="Users by region">
    <noundry-chart-series name="US" items="Model.UsRegion" />
    <noundry-chart-series name="EU" items="Model.EuRegion" />
</noundry-chart>

#Styling

uses Tailwind color utilities you pass via attributes like color="indigo", accent="emerald". Baseline defaults pick up the app's indigo primary + Tailwind's default palette.

#Related

Related

Browse all data display · CLI reference · reactivity patterns.