# Line Chart

Source: https://lumeo.nativ.sh/components/charts/line

# Line Chart

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

## 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

<LineChart />

Preview Code

Smooth Line with Dots

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

Preview Code

Razor-Rendered Tooltip Slot

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.

Preview Code

Threshold lines + Reference zones

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

Preview Code

Straight Line, No Dots

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

Preview Code

Three-Series Comparison

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

Preview Code

With Data Labels

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

Preview Code

Daily Time-Series with DataZoom

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

Preview Code

Custom Colors, No Legend

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

Preview Code

Loading state

Simulate loading

Hold skeleton open

Duration: 2s 

Cycle: 1400 ms 

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.