Line Charts in Python
A line chart (also called a line graph or line plot) connects ordered
observations to show a trend over time or any
continuous sequence. With xy you create an interactive line chart in Python
that stays smooth at millions of points: pan, zoom, and hover work by default,
and long lines are decimated to the visible resolution and refined as you zoom.
Jump to multiple series, smooth curves, or large and real-time data.
Create a Line Chart
Pass equal-length x and y arrays to line. This is the minimal Python line
chart:
Interactive Line Charts
Every line chart is interactive out of the box — drag to pan, scroll or pinch to zoom, and hover to inspect exact values with a tooltip. No configuration is required; the same chart renders in a notebook, a Reflex app, or exported HTML.
Smooth vs. Straight Lines
Keep the default straight segments when each observation should stay explicit,
or set curve="smooth" for interpolation. Use dash for plan/actual or
forecast comparisons.
Plot Multiple Line Series
Layer several named line marks and add a legend() to compare series. Bind
marks to named axes when series use different units. The example above overlays
two series; add as many as you need.
Large and Real-Time Line Charts
xy is built for large data: a line with millions of points renders as a
decimated path sized to the screen, then refines when the viewport changes, so
navigation never blocks. For streaming updates, see
real-time and streaming data,
and for the performance model see
large data and performance.
Line Chart Options
Missing numeric values create gaps in the line. Pass column names with data=
instead of arrays when your data is a table.
Related Charts
- Area charts — fill the region to a baseline.
- Step and stairs charts — for piecewise-constant states.
- Scatter charts — for relationships without a connecting line.
API Reference
xy.line_chart
A line chart composing `line` marks and axis/legend children.
Props
| Prop | Type | Description |
|---|---|---|
*children | Component | Marks, axes, annotations, and chart chrome. |
title | Optional[str] | Title shown above the plot. |
width | int | str | Chart width in pixels or a CSS size such as ``"100%"``. |
height | int | str | Chart height in pixels or a CSS size such as ``"100%"``. |
padding | Union[float, Sequence[float], None] | Plot margins, as one value or a sequence of side values. Use zero for an edge-to-edge sparkline. |
data | TableLike | Chart-level data used by marks that omit their own ``data``. |
class_name | Optional[str] | CSS class applied to the chart container. |
class_names | Optional[dict[str, str]] | CSS classes keyed by stable chart DOM slot. |
style | Optional[dict[str, StyleValue]] | Inline style overrides for the chart container. |
styles | Optional[dict[str, dict[str, StyleValue]]] | Inline style mappings keyed by stable chart DOM slot. |
on_hover | Optional[Callable[[dict], None]] | Callback receiving hover event payloads. |
on_click | Optional[Callable[[dict], None]] | Callback receiving picked-mark click payloads. |
on_brush | Optional[Callable[[dict], None]] | Callback receiving brush event payloads. |
on_select | Optional[Callable[[Selection], None]] | Callback receiving data-space selections. |
on_view_change | Optional[Callable[[dict], None]] | Callback receiving viewport change payloads. |
hover | Optional[bool] | Whether pointer movement emits hover events. |
click | Optional[bool] | Whether picked marks emit click events. |
select | Optional[bool] | Whether shift-drag box selection is enabled. |
brush | Optional[bool] | Whether brush selection is enabled. |
crosshair | Optional[bool] | Whether plot-aligned hover guides are shown. |
navigation | Optional[bool] | Whether browser pan and zoom navigation is enabled. |
pan | Optional[bool] | Whether plain-drag panning is enabled. |
pan_axes | Optional[tuple[str, ...]] | Declared axis IDs translated by pan gestures. |
zoom | Optional[bool] | Whether viewport zoom is enabled. Defaults to on for Cartesian charts and off for polar ones (`wind_rose` excepted); |
default_drag_action | Optional[DefaultDragAction] | Initial action performed by a plain plot drag. |
zoom_axes | Optional[tuple[str, ...]] | Declared axis IDs changed by zoom gestures and controls. |
zoom_limits | Optional[ZoomLimits] | Minimum and maximum magnification globally or by axis. |
wheel_zoom | Optional[bool] | Whether wheel and trackpad zoom is available. |
box_zoom | Optional[bool] | Whether box zoom is available as a drag action. |
zoom_buttons | Optional[bool] | Whether modebar Zoom In/Out commands are available. |
double_click_reset | Optional[bool] | Whether double-click restores ``reset_axes``. |
reset_axes | Optional[tuple[str, ...]] | Declared axis IDs restored by reset. |
link_group | Optional[str] | Identifier used to synchronize charts in the browser. |
link_axes | Optional[tuple[str, ...]] | Axes synchronized within the link group. |
coords | str | Coordinate system, ``"cartesian"`` (default) or ``"polar"``. Under ``"polar"`` each mark's first channel is the angle and its second is the radius. Prefer ``xy.polar_chart(...)``, which sets this for you. |
FAQ
How do I make an interactive line chart in Python?
Call xy.line(x, y) inside xy.chart(...) and render it. Pan, zoom, and hover
are enabled automatically — no callbacks or extra libraries required.
How many points can a line chart plot?
Millions. xy decimates a long line to the visible pixels and refines it on
zoom, so a multi-million-point line stays interactive instead of freezing the
page.
How do I plot multiple lines on one chart?
Add one named line mark per series inside the same xy.chart(...) and include
xy.legend().
How do I draw a smooth line instead of straight segments?
Pass curve="smooth" to line. Omit it to keep straight segments between
observations.