Pictorial Bar Chart
A bar chart that uses symbols instead of rectangular bars. Each symbol represents a data point, making the visualization more expressive and engaging.
Installation
dotnet add package Lumeo.Charts
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <PictorialBarChart />
Shape-aware skeleton with reserved space for legend and axes — no layout shift when real data arrives.
API Reference
PictorialBarChart
| Property | Type | Default | Description |
|---|---|---|---|
| Categories | List<string> | [] | X-axis category labels. |
| Series | List<PictorialSeriesData> | [] | Data series with Name, Values, Symbol, and SymbolSize. |
| ShowLegend | bool | true | Shows or hides the chart legend. |
| 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) |
| ShowTooltip | bool | true | Enables the hover tooltip showing pictorial bar values. |
| Colors | List<string>? | null | Custom color palette for the pictorial bars. |
| Width | string | "100%" | Chart container width as a CSS length. |
| Height | string | "350px" | Chart container height as a CSS length. |
| Theme | string? | null | ECharts theme name applied to this chart instance. |
| PhantomCycleMs | int | 1400 | Phantom-mode refresh interval in milliseconds. Lower = faster data cycling while loading. |
| ShowDataLabels | bool | false | When true, displays value labels on the pictorial bars. |
| LabelPosition | string | "top" | Position of data labels relative to each bar symbol. |
| LabelFormat | string? | null | Optional ECharts label formatter string for data labels. |
| DataZoom | bool | false | Enables zoom slider for long category axes. |
| Toolbox | bool | false | Shows the ECharts toolbox with export and zoom controls. |
| ColorPalette | List<string>? | null | Alternate full color palette applied to the chart. |
| AnimationDuration | int? | null | Animation duration in milliseconds when data changes. |
| AnimationEasing | string? | null | ECharts easing function name for animation curves. |
| MarkLine | EChartMarkLine? | null | Optional mark lines overlaid on the chart (e.g. averages, thresholds). |
| MarkPoint | EChartMarkPoint? | null | Optional mark points highlighting min/max or custom values. |
| MarkArea | EChartMarkArea? | null | Optional shaded mark areas highlighting value bands. |