Struct LineChartProps 

pub struct LineChartProps {

    pub dataset: Option<Dataset>,
    pub x_field: Option<String>,
    pub y_fields: Option<Vec<String>>,
    pub binding: Option<ChartFieldBinding>,
    pub series: Option<Vec<SeriesDef>>,
    pub x_axis: Option<Vec<AxisDef>>,
    pub y_axis: Option<Vec<AxisDef>>,
    pub width: Option<f64>,
    pub height: Option<f64>,
    pub margin: Option<PlotInset>,
    pub grid: Option<GridConfig>,
    pub loading: Option<bool>,
    pub skip_animation: Option<bool>,
    pub motion: Option<ChartMotion>,
    pub highlight_scope: Option<HighlightScope>,
    pub axis_highlight: Option<AxisHighlightConfig>,
    pub legend: Option<LegendConfig>,
    pub tooltip: Option<TooltipConfig>,
    pub charts_theme: Option<OrbitalChartsTheme>,
    pub palette: Option<OrbitalChartPalette>,
    pub on_item_click: Option<Callback<(ChartItemId,), ()>>,
    pub on_axis_click: Option<Callback<(AxisClickData,), ()>>,
    pub on_legend_click: Option<Callback<(String,), ()>>,
    pub features: ChartFeatures,
    pub keyboard_navigation: bool,
    pub zoom: Option<Vec<ZoomWindow>>,
    pub on_zoom_change: Option<Callback<(Vec<ZoomWindow>,), ()>>,
    pub class: MaybeProp<String>,
    pub children: Option<Children>,
}

Props for the LineChart component.

Show change over a continuous dimension — time, index, or ordered categories.

Use line charts when the story is about trend and rate of change, not category totals. Bind a shared Dataset via x_field and y_fields, or pass inline series and axis definitions for demos.

When to use

• Revenue, throughput, or KPI trends across months or quarters.
• Multiple series on one axis when metrics share the same x dimension.
• Threshold annotations via composition children such as [ReferenceLine].

Usage

1. Bind a Dataset with x_field and y_fields, or pass inline series with aligned x_axis categories.
2. Set show_markers: true on series when points are sparse; use connect_nulls to bridge missing values.
3. Inferred x-axes use crate::DomainLimit::Strict by default — override via AxisDef.domain_limit.
4. Leave skip_animation unset to honor reduced-motion; path draw animation runs on enter/update otherwise.
5. Wrap the chart in a native element with data-testid for E2E hooks.

Best Practices

Do’s

• Prefer crate::AreaChart when filled volume or stacked composition matters more than the stroke alone.
• Set connect_nulls: true on a series when null cells should not break the stroke.
• Add [ReferenceLine] children for targets or limits instead of drawing ad-hoc SVG.

Don’ts

• Do not use lines for unordered categories — prefer crate::BarChart.
• Do not duplicate legend/tooltip demos here; link to charts-legend and charts-tooltip.
• Do not put data-testid on the component itself — wrap with a native element.

Related previews

Cross-cutting UX: charts-legend, charts-tooltip, charts-highlighting, charts-label, charts-styling, charts-zoom-pan.

Examples

Two-series line chart

Compare two metrics that share the same time axis. Markers are off by default; set show_markers: true when sparse points need visible marks. Enable legend and tooltip (see cross-cutting previews) for exploration.

use crate::LineChart;
use crate::preview::fixtures::{cost_series, full_grid, quarter_x_axis, revenue_series, revenue_y_axis};
view! {
    <div data-testid="line-chart-preview">
        <LineChart
            series=vec![revenue_series(), cost_series()]
            x_axis=vec![quarter_x_axis()]
            y_axis=vec![revenue_y_axis()]
            grid=full_grid()
            width=560.0
            height=320.0
        />
    </div>
}

Connect nulls across gaps

Missing values (f64::NAN or null dataset cells) break the stroke by default. Set connect_nulls: true on the series to bridge gaps — useful for sparse telemetry feeds.

use crate::LineChart;
use crate::preview::fixtures::{full_grid, quarter_x_axis, revenue_y_axis, sparse_revenue_series};
view! {
    <div data-testid="line-chart-connect-nulls-preview">
        <LineChart
            series=vec![sparse_revenue_series()]
            x_axis=vec![quarter_x_axis()]
            y_axis=vec![revenue_y_axis()]
            grid=full_grid()
            width=560.0
            height=320.0
        />
    </div>
}

Reference line

Horizontal threshold via [ReferenceLine] composition child. Place the line after LinePlot so it renders above the stroke; use when targets or limits must stay visible on resize.

use crate::LineChart;
use crate::preview::fixtures::{cost_series, full_grid, quarter_x_axis, revenue_series, revenue_y_axis};
use crate::{LinePlot, ReferenceLine, ReferenceLineLabelAlign};
view! {
    <div data-testid="line-chart-reference-preview">
        <LineChart
            series=vec![revenue_series(), cost_series()]
            x_axis=vec![quarter_x_axis()]
            y_axis=vec![revenue_y_axis()]
            grid=full_grid()
            width=560.0
            height=320.0
        >
            <LinePlot />
            <ReferenceLine y=520_000.0 label="Target" label_align=ReferenceLineLabelAlign::Middle />
        </LineChart>
    </div>
}

Optional Props

• dataset: Dataset
  • Tabular data source.
• x_field: impl Into<String>
  • Category field key when using dataset.
• y_fields: Vec<String>
  • Value field keys when using dataset.
• binding: ChartFieldBinding
  • Explicit field binding (alternative to x_field/y_fields).
• series: Vec<SeriesDef>
  • Inline or explicit series definitions.
• x_axis: Vec<AxisDef>
  • X-axis definitions.
• y_axis: Vec<AxisDef>
  • Y-axis definitions.
• width: f64
  • Chart width in pixels.
• height: f64
  • Chart height in pixels.
• margin: PlotInset
  • Plot inset between SVG border and plot area.
• grid: GridConfig
  • Background grid configuration.
• loading: bool
  • Whether the chart is loading.
• skip_animation: bool
  • Skip enter/update animations.
• motion: ChartMotion
  • Chart motion configuration.
• highlight_scope: HighlightScope
  • Highlight and fade scope.
• axis_highlight: AxisHighlightConfig
  • Axis highlight configuration.
• legend: LegendConfig
  • Legend configuration.
• tooltip: TooltipConfig
  • Tooltip configuration.
• charts_theme: OrbitalChartsTheme
  • Chart theme extension.
• palette: OrbitalChartPalette
  • Color palette override.
• on_item_click: Callback<(ChartItemId,), ()>
  • Fired when a mark is clicked.
• on_axis_click: Callback<(AxisClickData,), ()>
  • Fired when a category band is clicked.
• on_legend_click: Callback<(String,), ()>
  • Fired when a legend entry is clicked.
• features: ChartFeatures
  • Opt-in capability flags.
• keyboard_navigation: bool
  • Enable arrow-key navigation between marks (CH-22). Keyboard zoom (CH-24) is deferred.
• zoom: Vec<ZoomWindow>
  • Controlled zoom state.
• on_zoom_change: Callback<(Vec<ZoomWindow>,), ()>
  • Fired when zoom changes.
• class: impl Into<MaybeProp<String>>
  • Optional CSS class on the root element.
• children: Children
  • Composition children (e.g. LinePlot, [ReferenceLine]).

Fields

dataset: Option<Dataset>

Tabular data source.

x_field: Option<String>

Category field key when using dataset.

y_fields: Option<Vec<String>>

Value field keys when using dataset.

binding: Option<ChartFieldBinding>

Explicit field binding (alternative to x_field/y_fields).

series: Option<Vec<SeriesDef>>

Inline or explicit series definitions.

x_axis: Option<Vec<AxisDef>>

X-axis definitions.

y_axis: Option<Vec<AxisDef>>

Y-axis definitions.

width: Option<f64>

Chart width in pixels.

height: Option<f64>

Chart height in pixels.

margin: Option<PlotInset>

Plot inset between SVG border and plot area.

grid: Option<GridConfig>

Background grid configuration.

loading: Option<bool>

Whether the chart is loading.

skip_animation: Option<bool>

Skip enter/update animations.

motion: Option<ChartMotion>

Chart motion configuration.

highlight_scope: Option<HighlightScope>

Highlight and fade scope.

axis_highlight: Option<AxisHighlightConfig>

Axis highlight configuration.

legend: Option<LegendConfig>

Legend configuration.

tooltip: Option<TooltipConfig>

Tooltip configuration.

charts_theme: Option<OrbitalChartsTheme>

Chart theme extension.

palette: Option<OrbitalChartPalette>

Color palette override.

on_item_click: Option<Callback<(ChartItemId,), ()>>

Fired when a mark is clicked.

on_axis_click: Option<Callback<(AxisClickData,), ()>>

Fired when a category band is clicked.

on_legend_click: Option<Callback<(String,), ()>>

Fired when a legend entry is clicked.

features: ChartFeatures

Opt-in capability flags.

keyboard_navigation: bool

Enable arrow-key navigation between marks (CH-22). Keyboard zoom (CH-24) is deferred.

zoom: Option<Vec<ZoomWindow>>

Controlled zoom state.

on_zoom_change: Option<Callback<(Vec<ZoomWindow>,), ()>>

Fired when zoom changes.

class: MaybeProp<String>

Optional CSS class on the root element.

children: Option<Children>

Composition children (e.g. LinePlot, [ReferenceLine]).

Implementations

impl LineChartProps

pub fn builder() -> LineChartPropsBuilder<((), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), ())>

Create a builder for building LineChartProps. On the builder, call .dataset(...)(optional), .x_field(...)(optional), .y_fields(...)(optional), .binding(...)(optional), .series(...)(optional), .x_axis(...)(optional), .y_axis(...)(optional), .width(...)(optional), .height(...)(optional), .margin(...)(optional), .grid(...)(optional), .loading(...)(optional), .skip_animation(...)(optional), .motion(...)(optional), .highlight_scope(...)(optional), .axis_highlight(...)(optional), .legend(...)(optional), .tooltip(...)(optional), .charts_theme(...)(optional), .palette(...)(optional), .on_item_click(...)(optional), .on_axis_click(...)(optional), .on_legend_click(...)(optional), .features(...)(optional), .keyboard_navigation(...)(optional), .zoom(...)(optional), .on_zoom_change(...)(optional), .class(...)(optional), .children(...)(optional) to set the values of the fields. Finally, call .build() to create the instance of LineChartProps.

Trait Implementations

impl Props for LineChartProps

type Builder = LineChartPropsBuilder

fn builder() -> Self::Builder