Area Chart

A versatile area chart component for visualizing trends and volumes over time. Supports gradient fills, stacked areas, multiple series, and smooth animations.

CLI Installation

Gradient & Solid Fill

Stacked Areas

Multiple Series

Curve Interpolation

Interactive Tooltips

Grid Lines & Y-Axis

Keyboard Accessible

Performance Optimized

TypeScript

Zero Dependencies

Basic Example

A simple area chart showing weekly website traffic with gradient fill and interactive points

Selected: Click a point to select

Animations

Dots

Gradient

Curve:

Installation

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

Quick Install

bash

npx mario-charts@latest add area-chart

Zero Lock-in Philosophy

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

Examples

Explore different configurations and use cases for the AreaChart component.

Multiple Series

Revenue, costs, and profit visualized as overlapping areas with an interactive legend

Stacked Areas

Areas stacked on top of each other for cumulative visualization of revenue and costs

Curve Types

Four interpolation modes for different data characteristics

linear

curve="linear"

monotone

curve="monotone"

natural

curve="natural"

step

curve="step"

Fill Styles

Gradient fill fades to transparent, solid fill uses a flat color with adjustable opacity

Gradient

gradient=true (default)

Solid

gradient=false areaOpacity=0.4

Chart States

Built-in loading, error, and empty states

Error

Chart Error

Network connection failed

Empty

No Data

There's no data to display

API Reference

Complete TypeScript interface with all available props and configurations.

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 area, array for multiple series
`colors`	readonly string[]	DEFAULT_COLORS	Array of colors to use for areas (cycles through for multiple series)
`height`	number	300	Height of the chart in pixels
`areaOpacity`	number	0.3	Fill opacity for the area (0 to 1)
`gradient`	boolean	true	Use gradient fill from top to bottom instead of solid color
`stacked`	boolean	false	Stack areas on top of each other for cumulative visualization
`strokeWidth`	number	1.5	Width of the area border line in pixels
`curve`	'linear' \| 'monotone' \| 'natural' \| 'step'	'monotone'	Type of curve interpolation for the area boundary
`showDots`	boolean	false	Show circle markers at each data point
`showGrid`	boolean	false	Show horizontal grid lines and Y-axis tick labels
`gridStyle`	'solid' \| 'dashed' \| 'dotted'	'dashed'	Style of the grid lines when showGrid is enabled
`showLegend`	boolean	false	Show legend below the chart for multi-series data
`connectNulls`	boolean	true	Whether to connect points across null/missing values
`loading`	boolean	false	Show loading state with animated skeleton
`error`	string \| null	null	Error message to display
`animation`	boolean	true	Enable entrance animations
`onPointClick`	(data: T, index: number, series?: string) => void	—	Callback fired when a data point is clicked
`tooltipRenderer`	(data: AreaChartTooltipData<T>) => React.ReactNode	—	Custom tooltip render function for full control over tooltip content
`className`	string	—	Additional CSS classes to apply to the container