Charts

Beautiful charts built on Apache ECharts. Lumeo includes 30 chart components for every visualization need, from basic bar charts to advanced geographic maps and word clouds.

Installation

dotnet add package Lumeo.Charts

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<Chart />

Dependencies & licensing — Apache 2.0, fully free for any use. Powered by Apache ECharts (Apache License 2.0), loaded once on demand. No commercial license, no attribution requirement beyond Apache 2.0's standard notice. ECharts is the same engine used by Alibaba, Baidu, and many enterprise BI products.

Privacy: ECharts loads from a CDN by default. On the first chart render Lumeo.Charts injects the ECharts script from cdn.jsdelivr.net — a third-party request that discloses the visitor's IP to the CDN, independent of any cookie consent. Under GDPR that is a data transfer you should disclose or avoid. To keep charts on your own origin, self-host ECharts and point the library's documented overrides at it. The global window.lumeoCdn map (options 1–2) is the complete fix — it redirects core ECharts and both plugin extensions; a per-chart EChartsSource (option 3) redirects only that chart's core ECharts:

Run lumeo deps install to vendor every CDN dependency into wwwroot/lib/lumeo-vendor/ and emit a window.lumeoCdn map pointing at them.
Set it yourself before Blazor boots: window.lumeoCdn = { echarts: '/lib/echarts.min.js', echartsLiquidfill: '/lib/echarts-liquidfill.min.js', echartsWordcloud: '/lib/echarts-wordcloud.min.js' }. The plugin charts (liquid fill, word cloud) pull their own scripts, so include the echartsLiquidfill and echartsWordcloud keys too, or those charts silently fall back to jsDelivr.
Per chart, redirect the core ECharts source: <Chart EChartsSource="/lib/echarts.min.js" … />. This covers core ECharts for that chart only — the plugin charts (liquid fill, word cloud) load their extension scripts solely through the global echartsLiquidfill / echartsWordcloud keys above (or the lumeo deps install bootstrap), so EChartsSource alone leaves those extensions on jsDelivr.

This documentation site itself self-hosts a pinned ECharts 5.6.0 from its own origin, so the charts on this page contact no third party.

Cartesian Charts

Standard X/Y axis charts for comparing categories, tracking trends, and analyzing distributions.

Bar Chart

Compare discrete categories side-by-side.

Line Chart

Show trends over time with continuous lines.

Area Chart

Emphasize volume and magnitude of change.

Scatter Chart

Reveal correlations between two variables.

Effect Scatter

Animated scatter with ripple effects.

Candlestick Chart

Financial OHLC data visualization.

BoxPlot Chart

Statistical distribution through quartiles.

Waterfall Chart

Sequential positive and negative changes.

Pictorial Bar

Bar chart with custom symbol shapes.

Mixed Chart

Combine bar and line in one view.

Proportional & Distribution

Charts for showing parts of a whole, proportions, and data distributions.

Pie Chart

Proportional distribution across categories.

Donut Chart

Pie chart with center cutout for labels.

Nightingale Chart

Rose-type pie with varying radii.

Funnel Chart

Sequential stages with drop-off rates.

Radial & Polar

Charts using polar coordinate systems and circular layouts.

Radar Chart

Compare multiple variables on a common scale.

Radial Chart

Gauge arc for KPIs and progress.

Gauge Chart

Speedometer with pointer and color zones.

Polar Bar Chart

Bar data in polar coordinates.

Liquid Fill

Animated liquid fill percentage display.

Hierarchical

Visualize nested and tree-structured data.

Treemap Chart

Nested rectangles proportional to values.

Sunburst Chart

Concentric rings for hierarchical data.

Tree Chart

Org charts and tree structures.

Relationship & Flow

Visualize connections, networks, and flow between entities.

Graph Chart

Network and relationship visualization.

Sankey Chart

Flow diagrams with proportional links.

Parallel Chart

Multi-dimensional data across parallel axes.

Specialized

Purpose-built charts for specific use cases.

Heatmap Chart

Density and intensity across two dimensions.

Calendar Heatmap

GitHub-style contribution calendar.

Theme River

Flowing streams showing thematic changes.

Geo Map Chart

Data on geographic maps with GeoJSON.

Word Cloud

Text weighted by frequency or importance.

Accessibility

ECharts paints to a <canvas>, which is invisible to screen readers. Every Lumeo chart therefore ships an accessibility layer (on by default, shadcn accessibilityLayer parity): the canvas host becomes keyboard-focusable with an aria-label summarising the data, and a visually-hidden but screen-reader-navigable <table> is generated from the series. Tab to the chart below, or inspect the DOM to see the hidden table. Set AccessibilityLayer="false" to opt out.

AccessibilityLayer = true

Bar chart with 4 categories: Revenue.
Category	Revenue
Jan	42
Feb	58
Mar	51
Apr	67

Toggle it off and inspect the DOM: the generated screen-reader table plus the host's tabindex and aria-label are removed.

API Reference

Every typed chart (BarChart, LineChart, …) wraps the underlying Chart primitive documented below and forwards its loading/theming/event parameters through. See each chart type's own page (under /components/charts/*) for its data-shaping parameters (Categories, Series, etc.).

Chart

ChartThreshold

Declarative threshold line — a horizontal (default) or vertical marker at a given value. Place inside any typed chart's ChildContent; it renders nothing visible itself and instead registers a markLine entry on the underlying option.

ChartReferenceZone

Declarative reference band — a shaded rectangle between two values on one axis, spanning the full extent of the other. Wraps ECharts' native markArea.

ChartTooltip

Declarative tooltip body for any chart wrapper. The child fragment is given a ChartTooltipContext on every hover and is rendered into a hidden DOM portal that ECharts' tooltip formatter pulls its innerHTML from — use this when you need real Razor markup (themed cards, formatted numbers, child components) instead of ECharts' raw formatter string.

ChartSkeleton

The legacy SVG overlay skeleton used by SkeletonStyle="ChartSkeletonStyle.Silhouette". Can also be rendered standalone as a static loading placeholder.

Typed chart wrapper common props

Every typed chart (BarChart, LineChart, and the rest of the 30 chart types) exposes this parameter alongside its own data-shaping props:

Prop	Type	Default	Description
OptionOverride	Dictionary<string, object>?	null	Escape hatch: entries are merged into the generated EChartOption's extension data, letting you set any raw ECharts option key the typed wrapper doesn't expose a dedicated parameter for.