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 />
| Category | Actual Sales | Sales Target |
|---|---|---|
| Jan | 38200 | 45000 |
| Feb | 41500 | 45000 |
| Mar | 36800 | 50000 |
| Apr | 52100 | 55000 |
| May | 58400 | 60000 |
| Jun | 67300 | 65000 |
| Jul | 61700 | 65000 |
| Aug | 64800 | 65000 |
| Sep | 73100 | 70000 |
| Oct | 79400 | 75000 |
| Nov | 71200 | 75000 |
| Dec | 88600 | 85000 |
Monthly actual sales (bar) overlaid with a rolling sales target line. The cross-type tooltip makes it easy to read both values simultaneously.
| Category | Revenue ($k) | YoY Growth (%) |
|---|---|---|
| Q1 '23 | 1820 | 12 |
| Q2 '23 | 2050 | 18 |
| Q3 '23 | 2310 | 22 |
| Q4 '23 | 2680 | 28 |
| Q1 '24 | 2950 | 62 |
| Q2 '24 | 3340 | 63 |
| Q3 '24 | 3610 | 56 |
| Q4 '24 | 4020 | 50 |
Quarterly revenue bars with a year-over-year growth rate line. The line series communicates momentum without a secondary axis.
| Category | Tickets | Resolution Rate |
|---|---|---|
| Wk 1 | 142 | 88 |
| Wk 2 | 168 | 84 |
| Wk 3 | 155 | 91 |
| Wk 4 | 190 | 79 |
| Wk 5 | 178 | 85 |
| Wk 6 | 162 | 90 |
| Wk 7 | 145 | 93 |
| Wk 8 | 138 | 95 |
Weekly ticket volume (bar) alongside resolution rate % (line). Data labels enabled on both series; DataZoom allows drilling into specific weeks.
| Category | Core | Pro | Enterprise | Total |
|---|---|---|---|---|
| Jan | 18200 | 8400 | 4200 | 30800 |
| Feb | 19500 | 9100 | 4800 | 33400 |
| Mar | 17800 | 8600 | 4400 | 30800 |
| Apr | 22100 | 11200 | 6100 | 39400 |
| May | 26400 | 13800 | 7200 | 47400 |
| Jun | 30300 | 16400 | 8900 | 55600 |
| Jul | 29700 | 15200 | 8600 | 53500 |
| Aug | 31800 | 17100 | 9400 | 58300 |
| Sep | 35100 | 19600 | 10500 | 65200 |
| Oct | 38400 | 22300 | 12100 | 72800 |
| Nov | 34200 | 20100 | 11400 | 65700 |
| Dec | 42600 | 25400 | 14200 | 82200 |
Three product revenue streams as bars plus a total trend line. Custom palette and Toolbox for export.
| Category | Actual Sales | Sales Target |
|---|---|---|
| Jan | 38200 | 45000 |
| Feb | 41500 | 45000 |
| Mar | 36800 | 50000 |
| Apr | 52100 | 55000 |
| May | 58400 | 60000 |
| Jun | 67300 | 65000 |
| Jul | 61700 | 65000 |
| Aug | 64800 | 65000 |
| Sep | 73100 | 70000 |
| Oct | 79400 | 75000 |
| Nov | 71200 | 75000 |
| Dec | 88600 | 85000 |
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. |