Line Chart

A sophisticated line chart component for time series and continuous data visualization. Supports multiple series, gap handling, curve interpolation, and advanced interactions.

Triangular Markers

Multiple Series Support

Gap Handling

Curve Interpolation

Textured Area Fill

Interactive Tooltips

Performance Optimized

TypeScript

Basic Line Chart

A simple line chart showing monthly revenue with interactive points and customizable curve styles

Selected: Click a point to select

Animations

Show Triangles

Show Area

Curve:

Installation

Get started with the LineChart component in just a few steps.

Quick Install

bash

npx mario-charts@latest add line-chart

Zero Lock-in Philosophy

The component is fully yours to own, modify, and customize.

Examples

Explore different configurations and use cases for the LineChart component.

Multiple Series - Revenue & Users

Multiple lines on the same chart with different colors and multi-point tooltips

Missing Data Handling

Demonstrates how the chart handles null values and missing data points

Connect NullsToggle to see how missing data is handled

Textured Area Chart

Line chart with innovative dot-pattern textured area fill combining gradient and micro-dots

Large Dataset Performance

100 data points with smooth performance and optimized rendering

Performance Notes:

• 100 data points rendered smoothly
• Dots disabled for better performance with large datasets
• Optimized SVG path generation

Loading State

Error State

Chart Error

Failed to load time series data

Empty State

No Data

There's no data to display

Curve Types

Different curve interpolation methods for various data visualization needs.

Linear Interpolation

Straight lines between points - best for discrete data

Monotone Curves

Smooth curves that preserve monotonicity - best for most time series

API Reference

Complete TypeScript interface with all available props and configurations for LineChart.

Prop	Type	Default	Description
`data`required	readonly T[]	—	Array of data objects to display in the chart
`x`required	keyof T	—	Key from data object to use for x-axis labels
`y`required	keyof T \| readonly (keyof T)[]	—	Key(s) from data object to use for y-axis values. Single key for one line, array for multiple lines
`colors`	readonly string[]	DEFAULT_COLORS	Array of colors to use for lines (cycles through for multiple series)
`strokeWidth`	number	2	Width of the line stroke in pixels
`curve`	'linear' \| 'monotone' \| 'natural' \| 'step'	'monotone'	Type of curve interpolation for the line
`showDots`	boolean	true	Show triangular markers at each data point with hover animations
`showArea`	boolean	false	Fill area under the line with gradient and dot pattern texture
`connectNulls`	boolean	true	Whether to connect points across null/missing values
`height`	number	300	Height of the chart in pixels
`loading`	boolean	false	Show loading state with animated skeleton
`error`	string \| null	null	Error message to display
`animation`	boolean	true	Enable line drawing and point entrance animations
`onPointClick`	(data: T, index: number, series?: string) => void	—	Callback fired when a point is clicked
`className`	string	—	Additional CSS classes to apply to the container