# Mixed Chart
Source: https://lumeo.nativ.sh/components/charts/mixed
# 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
.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
Preview Code
Sales vs Target
Monthly actual sales (bar) overlaid with a rolling sales target line. The cross-type tooltip makes it easy to read both values simultaneously.
Preview Code
Revenue & Growth Rate
Quarterly revenue bars with a year-over-year growth rate line. The line series communicates momentum without a secondary axis.
Preview Code
Support Volume & Resolution Rate
Weekly ticket volume (bar) alongside resolution rate % (line). Data labels enabled on both series; DataZoom allows drilling into specific weeks.
Preview Code
Multi-Product Revenue with Trend
Three product revenue streams as bars plus a total trend line. Custom palette and Toolbox for export.
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
### MixedChart
Property
Type
Default
Description
Categories
List
\[\]
X-axis category labels.
Series
List
\[\]
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?
null
Alternate color palette applied when Colors is unset.
Colors
List?
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.