# Polar Bar Chart

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

# Polar Bar Chart

Display bar data in a polar coordinate system, where each bar extends radially. Great for cyclical data like days of the week or hours of the day.

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

<PolarBarChart />

Preview Code

Weekly Activity

Preview Code

Loading state

Simulate loading

Hold skeleton open

Duration: 2s 

Cycle: 1400 ms 

Shape-aware skeleton with reserved space for legend and axes — no layout shift when real data arrives.

## API Reference

### PolarBarChart

Property

Type

Default

Description

Categories

List<string>

\[\]

Angular axis category labels.

Values

List<double>

\[\]

Values for each category.

ShowLegend

bool

false

Shows or hides the chart legend.

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)**

ShowTooltip

bool

true

Shows the hover tooltip with category values.

Colors

List<string>?

null

Custom per-bar colors overriding the theme palette.

Width

string

"100%"

CSS width of the polar bar chart container.

Height

string

"350px"

CSS height of the polar bar chart container.

Theme

string?

null

ECharts theme name applied to this chart instance.

PhantomCycleMs

int

1400

Phantom-mode refresh interval in milliseconds while loading.

ShowDataLabels

bool

false

Displays value labels on each radial bar.

LabelPosition

string

"inside"

Position of data labels relative to each bar.

LabelFormat

string?

null

ECharts label format template for data labels.

DataZoom

bool

false

Enables a zoom slider for the polar bar chart.

Toolbox

bool

false

Shows the ECharts toolbox with save-as-image controls.

ColorPalette

List<string>?

null

Color palette applied to bars across the chart.

AnimationDuration

int?

null

Entry animation duration in milliseconds for the bars.

AnimationEasing

string?

null

ECharts easing function name used during bar animations.