Lumeo

Line Chart

Show trends over time. Use when continuity between data points matters, such as revenue tracking or performance monitoring.

Installation

dotnet add package Lumeo.Charts

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

Usage

@using Lumeo

<LineChart />

Bezier-smoothed curves with dot markers — a clean default for multi-series trend comparisons.

Replace ECharts' default tooltip body with any Razor markup — themed cards, formatted numbers, child components. With axis-trigger (the default) the slot receives every series at the hovered category via ctx.Points.

Declaratively overlay target lines and healthy / critical bands. Each child translates to ECharts' native markLine / markArea without you touching EChartOption.

Precise straight-line segments without markers keep focus on broad trends rather than individual data points.

Compare three key metrics simultaneously. Smooth curves reduce noise when datasets overlap frequently.

Show the exact value at each data point — useful for executive summaries or printable reports.

A 60-day daily view with the DataZoom slider so users can zoom into any specific window.

Override the palette with brand colors and hide the legend for a minimal single-focus layout.

Multi-series line skeleton draws itself across the path. IsLoading binds to your async fetch; ShowLoadingSkeleton=false opts out.

API Reference

LineChart

Property Type Default Description
Categories List<string> [] X-axis labels for each data point.
Series List<ChartSeriesData> [] Data series to plot as lines.
Smooth bool false Renders smooth bezier curves.
ShowDots bool true Shows dot markers at each data point.
ShowLegend bool true Shows or hides the chart legend.
ShowDataLabels bool false Renders value labels at each data point.
DataZoom bool false Enables zoom slider for long time-series.
Colors List<string>? null Custom color palette.
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.
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 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.
ShowTooltip bool true Enables the hover tooltip on the line series.
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.