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 />
| Category | This Year | Last Year |
|---|---|---|
| Jan | 41200 | 35000 |
| Feb | 38400 | 31200 |
| Mar | 52100 | 44800 |
| Apr | 61800 | 53100 |
| May | 57300 | 48900 |
| Jun | 74200 | 62400 |
| Jul | 68900 | 58700 |
| Aug | 72500 | 61200 |
| Sep | 81300 | 69800 |
| Oct | 88700 | 74300 |
| Nov | 79400 | 65100 |
| Dec | 95600 | 82200 |
Side-by-side grouped bars comparing this year's revenue against last year across twelve months.
| Category | SaaS | On-Premise |
|---|---|---|
| Jan | 28400 | 19700 |
| Feb | 31100 | 17600 |
| Mar | 38700 | 21400 |
| Apr | 42300 | 18900 |
| May | 45800 | 17200 |
| Jun | 51200 | 16300 |
| Jul | 53600 | 15800 |
| Aug | 58900 | 14700 |
| Sep | 62100 | 13900 |
| Oct | 67400 | 12800 |
| Nov | 71800 | 11600 |
| Dec | 79300 | 10400 |
Stack two product lines to show combined monthly revenue and relative contribution of each.
| Category | Revenue ($K) |
|---|---|
| North America | 184300 |
| Western Europe | 142700 |
| Asia Pacific | 211500 |
| Latin America | 63200 |
| Middle East | 47800 |
| Africa | 28900 |
Horizontal orientation works well for ranking category labels that are too long to fit on a vertical axis.
| Category | This Year | Last Year |
|---|---|---|
| Jan | 41200 | 35000 |
| Feb | 38400 | 31200 |
| Mar | 52100 | 44800 |
| Apr | 61800 | 53100 |
| May | 57300 | 48900 |
| Jun | 74200 | 62400 |
| Jul | 68900 | 58700 |
| Aug | 72500 | 61200 |
| Sep | 81300 | 69800 |
| Oct | 88700 | 74300 |
| Nov | 79400 | 65100 |
| Dec | 95600 | 82200 |
Combine horizontal layout with stacking to show part-to-whole breakdowns across departments.
| Category | Actual | Target |
|---|---|---|
| Q1 | 142800 | 150000 |
| Q2 | 161300 | 155000 |
| Q3 | 154700 | 160000 |
| Q4 | 178200 | 175000 |
Display the exact value on top of each bar — useful for presentations where reading specific numbers matters.
| Category | New Customers | Renewals |
|---|---|---|
| Jan 24 | 312 | 891 |
| Feb 24 | 287 | 843 |
| Mar 24 | 341 | 912 |
| Apr 24 | 398 | 967 |
| May 24 | 423 | 1034 |
| Jun 24 | 512 | 1128 |
| Jul 24 | 487 | 1087 |
| Aug 24 | 531 | 1142 |
| Sep 24 | 604 | 1213 |
| Oct 24 | 672 | 1289 |
| Nov 24 | 598 | 1198 |
| Dec 24 | 741 | 1347 |
| Jan 25 | 328 | 1024 |
| Feb 25 | 304 | 968 |
| Mar 25 | 367 | 1047 |
| Apr 25 | 421 | 1103 |
| May 25 | 448 | 1171 |
| Jun 25 | 539 | 1264 |
| Jul 25 | 513 | 1224 |
| Aug 25 | 557 | 1278 |
| Sep 25 | 631 | 1352 |
| Oct 25 | 698 | 1428 |
| Nov 25 | 624 | 1334 |
| Dec 25 | 779 | 1491 |
Override the default palette with brand colors and enable the DataZoom slider to scroll through a dense dataset.
| Category | Revenue (K) |
|---|---|
| Jan '24 | 60 |
| Feb '24 | 84.1 |
| Mar '24 | 100.3 |
| Apr '24 | 103.5 |
| May '24 | 93 |
| Jun '24 | 73.1 |
| Jul '24 | 51.3 |
| Aug '24 | 35.6 |
| Sep '24 | 32.2 |
| Oct '24 | 42.6 |
| Nov '24 | 63.8 |
| Dec '24 | 89 |
Drag the slider to change the number of categories and watch Smart rotate labels as the axis gets crowded.
| Category | Actual | Target |
|---|---|---|
| Q1 | 142800 | 150000 |
| Q2 | 161300 | 155000 |
| Q3 | 154700 | 160000 |
| Q4 | 178200 | 175000 |
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. |