# Bar Chart

Source: https://lumeo.nativ.sh/components/charts/bar

# Bar Chart

Compare discrete categories side-by-side. Ideal for monthly comparisons, ranking, or showing multiple series over the same categories.

## 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

<BarChart />

Preview Code

Basic Bar Chart

Side-by-side grouped bars comparing this year's revenue against last year across twelve months.

Preview Code

Stacked Vertical

Stack two product lines to show combined monthly revenue and relative contribution of each.

Preview Code

Horizontal Bar

Horizontal orientation works well for ranking category labels that are too long to fit on a vertical axis.

Preview Code

Horizontal Stacked

Combine horizontal layout with stacking to show part-to-whole breakdowns across departments.

Preview Code

With Data Labels

Display the exact value on top of each bar — useful for presentations where reading specific numbers matters.

Preview Code

Custom Color Palette + DataZoom

Override the default palette with brand colors and enable the DataZoom slider to scroll through a dense dataset.

Preview Code

Interactive label density

Categories: 12

Strategy

Smart ShowAll Auto

Move the slider to see Smart's auto-rotate kick in at 11 / 17 / 25 categories.

Drag the slider to change the number of categories and watch Smart rotate labels as the axis gets crowded.

Preview Code

Loading state

Simulate loading

Hold skeleton open

Duration: 2s 

Cycle: 1400 ms 

Shape-aware skeleton renders automatically before ECharts mounts and while IsLoading is true — no empty-whitespace flash, no layout shift. Click Simulate to fake a 2-second fetch, or flip the switch to pin the skeleton for inspection.

## API Reference

### BarChart

Property

Type

Default

Description

Categories

List<string>

\[\]

X-axis category labels.

Series

List<ChartSeriesData>

\[\]

Data series with Name and Values.

Horizontal

bool

false

Rotates bars to grow horizontally.

Stacked

bool

false

Stacks series on top of each other.

ShowLegend

bool

true

Shows or hides the chart legend.

ShowTooltip

bool

true

Enables the hover tooltip.

Colors

List<string>?

null

Custom color palette for series.

DataZoom

bool

false

Enables zoom slider for large datasets.

Toolbox

bool

false

Shows save/restore/zoom toolbox.

ShowDataLabels

bool

false

Renders value labels on each bar.

LabelPosition

string

"top"

Label position: "top", "inside", "bottom".

LabelStrategy

ChartLabelStrategy

Smart

How category-axis labels are rendered. Smart auto-rotates at higher densities; ShowAll forces all horizontal; Auto thins overlapping labels.

LabelRotate

int?

null

Manual rotation override in degrees on top of LabelStrategy.

IsLoading

bool

false

When true, renders a shape-matched loading skeleton in place of the chart. Bind to your async fetch state.

ShowLoadingSkeleton

bool

true

Set to false to opt out of the skeleton (chart area stays empty while IsLoading is true).

SkeletonKind

ChartSkeletonKind

(chart default)

Override the skeleton silhouette (Bars, Line, Area, Pie, Scatter, Grid, Generic).

SkeletonStyle

ChartSkeletonStyle

Phantom

Phantom renders the real chart with placeholder data and morphs to real data via ECharts animation. Silhouette falls back to the legacy SVG skeleton overlay.

ShowLoadingLabel

bool

true

Shows a small "Loading…" pill in the top-right corner whenever `IsLoading` is true. Layered on top of any `SkeletonStyle`. Set to false for bare visuals. **(rc.18)**

LoadingText

string?

"Loading…"

Label rendered next to the spinner inside the loading pill. Set to empty to show the spinner alone. **(rc.18)**

Width

string

"100%"

CSS width of the chart container.

Height

string

"350px"

CSS height of the chart container.

Theme

string?

null

ECharts theme name override; null follows global Lumeo theme.

PhantomCycleMs

int

1400

Phantom-mode refresh interval in milliseconds; lower cycles placeholder data faster.

LabelFormat

string?

null

ECharts formatter string applied to bar data labels.

ColorPalette

List<string>?

null

Alternate color palette applied when Colors is unset.

AnimationDuration

int?

null

Override ECharts bar-grow animation duration in milliseconds.

AnimationEasing

string?

null

ECharts easing function name for entry animation.

MarkLine

EChartMarkLine?

null

Reference lines (avg, max, target) overlaid on the bars.

MarkPoint

EChartMarkPoint?

null

Marker points highlighting extrema or annotations on bars.

MarkArea

EChartMarkArea?

null

Shaded regions highlighting value ranges behind the bars.