Charts

Area Chart

Emphasize magnitude over time with filled area series.

Charts / Area Chart

Preact nativeStackableSVG-firstTyped props

Overview

Area charts use the same cartesian model as line charts, but emphasize filled magnitude under the curve.

import { AreaChart } from "@kamod-ch/charts/area";

Static bundle: Import from @kamod-ch/charts/area for charts without the motion runtime.
Animation: Motion helpers live behind @kamod-ch/charts/motion when you need enter or update transitions.

API notes

Typed props and defaults for AreaChart — no separate options object.

Default curve: linear stays the Kamod default for predictable dashboards. Choose monotoneX for a smooth trend (see Basic smooth).
Smooth curves: monotoneX is Kamod’s smooth X interpolation — similar to “spline” or “monotone” options in other chart libraries.
Step curves: stepBefore and stepAfter map to step-start and step-end conventions. Use step for centered steps.
Markers: Enable showPoints — there is no separate markers prop. Markers accent finite values and are not individual tab stops.
Dashed outlines: Combine outline with strokeDasharray. There is no dashed boolean.
Gradients: Pass fill={{ type: "gradient", ... }}. Stops use CSS var(--chart-*) tokens and adapt to light and dark themes.
Stacked tooltips: Axis tooltips report each series’ raw value, not cumulative stack geometry (y0 / y1).
Typed props: No option: any — every prop is typed on AreaChart and series components.

Variants

Basic smooth

Use curve="monotoneX" for a smooth trend line. Kamod keeps linear as the default curve so dashboards stay predictable unless you opt into smoothing.

monotoneXResponsive

Multi-series

Compare related metrics side by side. Enable showLegend so readers can toggle series without a separate markers API.

LegendAxis tooltip

Stacked

Stack series on a shared baseline. Axis tooltips report each series' raw value, not cumulative y0/y1 stack coordinates.

StackedRaw tooltip values

Gradient fill

Gradients use CSS chart tokens as stop-color, so they adapt to light and dark themes without canvas color conversion.

GradientTheme tokens

Stepped

Use curve="stepAfter" for step-end transitions. Kamod stepBefore and stepAfter map to step-start and step-end conventions in other chart libraries.

stepAfter

Linear multi

Multiple series with the default linear curve—useful when you want straight segments between points without opting into smoothing.

Markers on

Set showPoints to render markers on finite values. Markers highlight data points visually; keyboard focus stays on the chart surface, not each dot.

showPointsKeyboard

Dashed forecast

Combine outline with strokeDasharray for projected periods. Kamod exposes typed props—no option:any configuration objects.

ForecaststrokeDasharray

Props

AreaChart props
Prop	Type	Default	Description
data	readonly TDatum[]	—	Array of row objects rendered by the chart.
xKey	DataAccessor<TDatum, string \| number \| Date \| null \| undefined>	—	Field or accessor for the x axis.
xScale	"linear" \| "time" \| "band" \| "point"	—	Scale kind for the x axis.
height	number	—	Chart height in pixels.
width	number	—	Fixed width. Prefer responsive + initialWidth for fluid layouts.
initialWidth	number	—	SSR / first-paint width before ResizeObserver measures the container.
responsive	boolean	false	Stretch to the parent container width.
title	string	—	Accessible chart title rendered into SVG title.
description	string	—	Accessible description rendered into SVG desc.
showGrid	boolean	—	Show cartesian grid lines.
showLegend	boolean	—	Show an HTML legend with series toggles. Supported on Line, Scatter, Area, and Bar charts.
tooltip	boolean \| CartesianTooltipOptions<TDatum>	—	Enable pointer and keyboard tooltips. `true` uses chart defaults: axis mode for Line and Area, nearest mode for Scatter and Bar. Options may set mode, placement, offset, render, formatValue, and formatLabel. PieChart does not support this prop.
series	readonly LineSeriesConfig<TDatum>[]	—	One or more line series. LineSeriesConfig extends the cartesian config with strokeWidth, strokeDasharray, showPoints, and pointRadius.
animate	boolean \| ChartAnimateOptions	—	Optional data animation. No-op on static entries unless a MotionConfig from @kamod-ch/charts/motion is present. Defaults to on for charts imported from that subpath. Options: enabled, duration (seconds), easing, preset, reducedMotion.
stacked	boolean	false	Stack series on a shared baseline.
baseline	number	0	Baseline value for the area fill.
opacity	number	0.2	Fill opacity for solid fills and the default gradient fromOpacity.
fill	"solid" \| AreaGradientFill	"solid"	Fill style. Use `{ type: "gradient", direction?, fromOpacity?, toOpacity? }` for SVG linear gradients that follow CSS chart tokens in light and dark themes.
outline	boolean	false	Draw a stroke along the area edge. Required for strokeWidth and strokeDasharray.
strokeWidth	number	—	Outline stroke width in pixels. Only applies when outline is true.
strokeDasharray	string	—	SVG dash pattern for the outline, e.g. "6 4". Kamod uses strokeDasharray instead of a dashed boolean.
curve	"linear" \| "monotoneX" \| "basis" \| "step" \| "stepBefore" \| "stepAfter" \| CurveFactory	"linear"	Path interpolation. linear remains the default for predictable dashboards; monotoneX is the smooth curve. stepBefore and stepAfter correspond to step-start and step-end style charts elsewhere.
showPoints	boolean \| "auto"	false	Render point markers on defined values. Kamod uses showPoints instead of a separate markers prop. Markers are visual accents, not individual tab stops.
pointRadius	number	2.5	Marker radius in pixels when showPoints is enabled.