Line
Cartesian line series — curves, axes, multi-series, markers, and labels.
Line charts plot values over a shared category or time domain. Compose LinePath with scales, grid, and axes from @viraui/charts. Curve helpers (curveNatural, curveLinear, curveStep, curveMonotoneX) change how segments connect.
Reach for Line when the story is trend over time. Prefer Area when fill under the line carries weight, Bar for discrete category comparisons, and the Responsive mobile scrub shell for dense day series on small viewports.
When to use
- Trends across months or days with one or more series
- Markers or value labels that call out individual points
When not to use
- Part-to-whole share of a total → Pie or stacked Area
- Category magnitude comparison without a continuous path → Bar
- Multi-axis polar profiles → Radar
Common examples
Natural
Smooth natural spline through monthly visitors.
Linear
Straight segments between points.
Step
Horizontal then vertical steps between months.
Y axis
Show left-axis ticks when magnitude needs a scale.
Multiple
Desktop and mobile as two stroked series.
Dots
Persistent point markers on every datum.
Custom markers
Crosshair ticks at each point.
Value labels
Numeric readout above each point on the visitors series.
Category labels
Browser names as labels on a category line.
Mobile scrub lives on Responsive.
Ask your agent
Add a ViraUI line chart of monthly visitors with a natural curve and a hover tooltip.Related
- Area — filled series and stacks
- Responsive — fluid hosts and mobile scrub
- Tooltips — hover readout patterns
Last updated on