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 />
Line chart with 2 series (Revenue, Expenses) across 12 categories.
CategoryRevenueExpenses
Jan1820012100
Feb2150013800
Mar1980013200
Apr2730015900
May3160017600
Jun4480020800
Jul4010019400
Aug3770016900
Sep4260019700
Oct4840021500
Nov5190023800
Dec6020026400

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

Line chart with 2 series (Revenue, Expenses) across 12 categories.
CategoryRevenueExpenses
Jan1820012100
Feb2150013800
Mar1980013200
Apr2730015900
May3160017600
Jun4480020800
Jul4010019400
Aug3770016900
Sep4260019700
Oct4840021500
Nov5190023800
Dec6020026400

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.

Line chart with 2 series (Revenue, Expenses) across 12 categories.
CategoryRevenueExpenses
Jan1820012100
Feb2150013800
Mar1980013200
Apr2730015900
May3160017600
Jun4480020800
Jul4010019400
Aug3770016900
Sep4260019700
Oct4840021500
Nov5190023800
Dec6020026400

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

Line chart with 2 series (Revenue, Expenses) across 12 categories.
CategoryRevenueExpenses
Jan1820012100
Feb2150013800
Mar1980013200
Apr2730015900
May3160017600
Jun4480020800
Jul4010019400
Aug3770016900
Sep4260019700
Oct4840021500
Nov5190023800
Dec6020026400

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

Line chart with 3 series (Gross Revenue, Net Revenue, Operating Costs) across 12 categories.
CategoryGross RevenueNet RevenueOperating Costs
Jan842006130022900
Feb794005780021600
Mar967007040026300
Apr1123008160030700
May1086007890029700
Jun1314009550035900
Jul1248009070034100
Aug13870010090037800
Sep15120010990041300
Oct16490011980045100
Nov14930010860040700
Dec17860012970048900

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

Line chart with 4 categories: ARR ($K).
CategoryARR ($K)
Q12840
Q23170
Q33490
Q43820

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

Line chart with 60 categories: Active Sessions.
CategoryActive Sessions
Jan 14821
Jan 25103
Jan 34967
Jan 45312
Jan 55874
Jan 66201
Jan 75943
Jan 86418
Jan 96782
Jan 107034
Jan 116891
Jan 127213
Jan 137548
Jan 147892
Jan 157634
Jan 168012
Jan 178347
Jan 188691
Jan 198423
Jan 208978
Jan 219213
Jan 229547
Jan 239389
Jan 249812
Jan 2510134
Jan 2610478
Jan 2710221
Jan 2810689
Jan 2911012
Jan 3011356
Jan 3111098
Feb 111534
Feb 211867
Feb 312201
Feb 411943
Feb 512478
Feb 612813
Feb 713157
Feb 812899
Feb 913434
Feb 1013769
Feb 1114113
Feb 1213855
Feb 1314390
Feb 1414725
Feb 1515069
Feb 1614811
Feb 1715346
Feb 1815681
Feb 1916025
… and 10 more data points

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

Line chart with 12 categories: Monthly Recurring Revenue.
CategoryMonthly Recurring Revenue
Jan48300
Feb51200
Mar53800
Apr57400
May61900
Jun67200
Jul64800
Aug69300
Sep74100
Oct79600
Nov76200
Dec83900

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

Line chart with 12 categories: Monthly Recurring Revenue.
CategoryMonthly Recurring Revenue
Jan48300
Feb51200
Mar53800
Apr57400
May61900
Jun67200
Jul64800
Aug69300
Sep74100
Oct79600
Nov76200
Dec83900

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.

Cookies & consent

We use a minimal set of cookies to run the site and optionally measure anonymous usage to improve it. You choose what's on.Read the privacy policy.