Chart Components
Interactive SVG charts with support for bar, line, area, pie, donut, and radar types. Data can be loaded from server-side collections, inline JSON, or API endpoints.
Bar Chart
Grouped bar charts for comparing multiple data series across categories.
Monthly Revenue
Revenue vs Expenses ($)
Trending up by 12% this quarter
Profit by Month
Net profit after expenses
View Code
<noundry-chart
type="bar"
title="Monthly Revenue"
description="Revenue vs Expenses ($)"
x-axis="month"
height="300"
show-grid="true"
show-legend="true"
show-tooltip="true"
items="@Model.RevenueData"
footer-text="Trending up by 12% this quarter">
<noundry-chart-series key="revenue" label="Revenue" color="indigo" />
<noundry-chart-series key="expenses" label="Expenses" color="emerald" />
</noundry-chart>Line Chart
Line charts for visualizing trends over time with multiple series.
Revenue Trend
Monthly revenue and expenses
Profit Trend
Net profit over time
View Code
<noundry-chart
type="line"
title="Revenue Trend"
x-axis="month"
items="@Model.RevenueData">
<noundry-chart-series key="revenue" label="Revenue" color="indigo" />
<noundry-chart-series key="expenses" label="Expenses" color="red" />
</noundry-chart>Area Chart
Area charts with gradient fills for showing volume or magnitude over time.
Revenue & Expenses
Filled area comparison
Profit Area
View Code
<noundry-chart
type="area"
title="Revenue & Expenses"
x-axis="month"
items="@Model.RevenueData">
<noundry-chart-series key="revenue" label="Revenue" color="blue" />
<noundry-chart-series key="expenses" label="Expenses" color="amber" />
</noundry-chart>Pie & Donut Charts
Pie and donut charts for showing proportional data. Use label-key and value-key instead of x-axis.
Sales by Category
Total sales distribution
Sales by Category
Donut variant with center total
View Code
<!-- Pie Chart -->
<noundry-chart
type="pie"
title="Sales by Category"
label-key="category"
value-key="value"
show-values="true"
items="@Model.SalesData">
<noundry-chart-series key="value" color="indigo" />
</noundry-chart>
<!-- Donut Chart -->
<noundry-chart
type="donut"
title="Sales by Category"
label-key="category"
value-key="value"
items="@Model.SalesData">
<noundry-chart-series key="value" color="indigo" />
</noundry-chart>Radar Chart
Radar (spider) charts for multi-dimensional data comparison.
Skills Assessment
Developer skill scores (0-100)
Data Loading Patterns
1. Server-Side Items
items="@Model.ChartData"
Pass an IEnumerable from your PageModel or Controller. Properties are automatically serialized to camelCase JSON.
2. Inline JSON
data='[{"month":"Jan","revenue":4200}]'
Embed JSON directly in the attribute. Useful for static data or computed JSON via Razor.
3. API Endpoint
api-url="/api/analytics/revenue"
Fetch data from an API endpoint. Shows a loading spinner while fetching and handles errors gracefully.
View Code
<noundry-chart
type="radar"
title="Skills Assessment"
label-key="skill"
value-key="score"
items="@Model.SkillData">
<noundry-chart-series key="score" label="Score" color="indigo" />
</noundry-chart>API-Loaded Chart
Charts can load data from an API endpoint. The chart shows a loading spinner during fetch and handles errors.
Sales by Category (API)
Data loaded from /api/chart/sales
Weekly Visitors (API)
Data loaded from /api/chart/visitors
View Code
<!-- API-loaded bar chart -->
<noundry-chart
type="bar"
title="Sales by Category"
api-url="/api/chart/sales"
x-axis="category">
<noundry-chart-series key="amount" label="Sales ($)" color="violet" />
</noundry-chart>
<!-- API-loaded line chart -->
<noundry-chart
type="line"
title="Weekly Visitors"
api-url="/api/chart/visitors"
x-axis="week">
<noundry-chart-series key="visitors" label="Visitors" color="cyan" />
<noundry-chart-series key="conversions" label="Conversions" color="pink" />
</noundry-chart>Properties Reference
noundry-chart
| Property | Type | Default | Description |
|---|---|---|---|
type | string | "bar" | Chart type: bar, line, area, pie, donut, radar |
title | string | null | Chart title |
description | string | null | Subtitle/description |
items | IEnumerable | null | Server-side data collection |
data | string | null | Inline JSON data |
api-url | string | null | API endpoint for async data loading |
x-axis | string | null | Property name for X axis labels (bar/line/area) |
label-key | string | null | Label property (pie/donut/radar) |
value-key | string | null | Value property (pie/donut/radar) |
height | int | 300 | Chart height in pixels |
show-grid | bool | true | Show grid lines |
show-legend | bool | true | Show color legend |
show-tooltip | bool | true | Enable hover tooltips |
show-values | bool | false | Show values on chart elements |
animated | bool | true | Enable CSS animations |
footer-text | string | null | Footer metric text |
noundry-chart-series
| Property | Type | Default | Description |
|---|---|---|---|
key | string | required | Data property key to plot |
label | string | same as key | Display label in legend and tooltips |
color | string | "indigo" | Color: indigo, emerald, violet, amber, blue, red, pink, cyan, slate |