# Chart

Source: https://lumeo.nativ.sh/components/chart

# 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

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo.Charts

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Chart />

**Dependencies & licensing — Apache 2.0, fully free for any use.** Powered by [Apache ECharts](https://echarts.apache.org/) (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.

## Cartesian Charts

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

[

### Bar Chart

Compare discrete categories side-by-side.

](/components/charts/bar)[

### Line Chart

Show trends over time with continuous lines.

](/components/charts/line)[

### Area Chart

Emphasize volume and magnitude of change.

](/components/charts/area)[

### Scatter Chart

Reveal correlations between two variables.

](/components/charts/scatter)[

### Effect Scatter

Animated scatter with ripple effects.

](/components/charts/effect-scatter)[

### Candlestick Chart

Financial OHLC data visualization.

](/components/charts/candlestick)[

### BoxPlot Chart

Statistical distribution through quartiles.

](/components/charts/boxplot)[

### Waterfall Chart

Sequential positive and negative changes.

](/components/charts/waterfall)[

### Pictorial Bar

Bar chart with custom symbol shapes.

](/components/charts/pictorial-bar)[

### Mixed Chart

Combine bar and line in one view.

](/components/charts/mixed)

## Proportional & Distribution

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

[

### Pie Chart

Proportional distribution across categories.

](/components/charts/pie)[

### Donut Chart

Pie chart with center cutout for labels.

](/components/charts/donut)[

### Nightingale Chart

Rose-type pie with varying radii.

](/components/charts/nightingale)[

### Funnel Chart

Sequential stages with drop-off rates.

](/components/charts/funnel)

## Radial & Polar

Charts using polar coordinate systems and circular layouts.

[

### Radar Chart

Compare multiple variables on a common scale.

](/components/charts/radar)[

### Radial Chart

Gauge arc for KPIs and progress.

](/components/charts/radial)[

### Gauge Chart

Speedometer with pointer and color zones.

](/components/charts/gauge)[

### Polar Bar Chart

Bar data in polar coordinates.

](/components/charts/polar-bar)[

### Liquid Fill

Animated liquid fill percentage display.

](/components/charts/liquid-fill)

## Hierarchical

Visualize nested and tree-structured data.

[

### Treemap Chart

Nested rectangles proportional to values.

](/components/charts/treemap)[

### Sunburst Chart

Concentric rings for hierarchical data.

](/components/charts/sunburst)[

### Tree Chart

Org charts and tree structures.

](/components/charts/tree)

## Relationship & Flow

Visualize connections, networks, and flow between entities.

[

### Graph Chart

Network and relationship visualization.

](/components/charts/graph)[

### Sankey Chart

Flow diagrams with proportional links.

](/components/charts/sankey)[

### Parallel Chart

Multi-dimensional data across parallel axes.

](/components/charts/parallel)

## Specialized

Purpose-built charts for specific use cases.

[

### Heatmap Chart

Density and intensity across two dimensions.

](/components/charts/heatmap)[

### Calendar Heatmap

GitHub-style contribution calendar.

](/components/charts/calendar-heatmap)[

### Theme River

Flowing streams showing thematic changes.

](/components/charts/theme-river)[

### Geo Map Chart

Data on geographic maps with GeoJSON.

](/components/charts/geo-map)[

### Word Cloud

Text weighted by frequency or importance.

](/components/charts/word-cloud)