Lumeo

Mixed Chart

Combine multiple chart types (bar, line) in a single view. Useful for overlaying a trend line on top of bar data, such as actual vs. target comparisons.

Installation

dotnet add package Lumeo.Charts

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<MixedChart />

Monthly actual sales (bar) overlaid with a rolling sales target line. The cross-type tooltip makes it easy to read both values simultaneously.

Quarterly revenue bars with a year-over-year growth rate line. The line series communicates momentum without a secondary axis.

Weekly ticket volume (bar) alongside resolution rate % (line). Data labels enabled on both series; DataZoom allows drilling into specific weeks.

Three product revenue streams as bars plus a total trend line. Custom palette and Toolbox for export.

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

API Reference

MixedChart

Property Type Default Description
Categories List<string> [] X-axis category labels.
Series List<MixedSeriesData> [] Data series with Name, Values, and Type ("bar" or "line").
ShowLegend bool true Shows or hides the chart legend.
DataZoom bool false Enables zoom slider for large datasets.
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)
AnimationDuration int? null Override ECharts animation duration in milliseconds.
AnimationEasing string? null ECharts easing function name for entry animation.
ColorPalette List<string>? null Alternate color palette applied when Colors is unset.
Colors List<string>? null Custom color palette for bar and line series.
Height string "350px" CSS height of the chart container.
LabelFormat string? null ECharts formatter string applied to data labels.
LabelPosition string "top" Position of data labels relative to each bar or point.
MarkArea EChartMarkArea? null Shaded regions highlighting value ranges on the chart.
MarkLine EChartMarkLine? null Reference lines (avg, max, custom) overlaid on the chart.
MarkPoint EChartMarkPoint? null Marker points highlighting extrema or annotations.
PhantomCycleMs int 1400 Phantom-mode refresh interval in milliseconds; lower cycles placeholder data faster.
ShowDataLabels bool false Renders value labels on each bar and line point.
ShowTooltip bool true Enables the cross-type hover tooltip.
Theme string? null ECharts theme name override; null follows global Lumeo theme.
Toolbox bool false Shows save/restore/zoom toolbox in the corner.
Width string "100%" CSS width of the chart container.