Bar Chart
Compare discrete categories side-by-side. Ideal for monthly comparisons, ranking, or showing multiple series over the same categories.
Installation
dotnet add package Lumeo.Charts
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <BarChart />
Side-by-side grouped bars comparing this year's revenue against last year across twelve months.
Stack two product lines to show combined monthly revenue and relative contribution of each.
Horizontal orientation works well for ranking category labels that are too long to fit on a vertical axis.
Combine horizontal layout with stacking to show part-to-whole breakdowns across departments.
Display the exact value on top of each bar — useful for presentations where reading specific numbers matters.
Override the default palette with brand colors and enable the DataZoom slider to scroll through a dense dataset.
Drag the slider to change the number of categories and watch Smart rotate labels as the axis gets crowded.
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. |