Area Chart

The AreaChart component is a flexible area chart built with recharts. It supports multiple series, gradient fills, stacking, customizable dots, labels, tooltips, legends, Cartesian grid, and tick formatting.

import { AreaChart } from "tawuniya/components";

👉 View in Storybook

Props

Prop	Type	Default	Description
data	T[]	-	Array of data objects.
series	ChartConfig	-	Defines each area series with color, name, etc.
type	CurveType	"natural"	Area curve type (linear, monotoneX, natural, etc.)
dataKey	TypedDataKey<T, unknown>	-	Key used for X-axis.
showCursor	boolean	false	Show cursor line on hover.
hideXAxis	boolean	false	Hide X-axis.
hideYAxis	boolean	false	Hide Y-axis.
hideTooltipLabel	boolean	false	Hide label in tooltip.
showTickLine	boolean	false	Show tick lines on axes.
showAxisLine	boolean	false	Show axis lines.
showCartesianGrid	boolean	false	Show grid lines.
showLegend	boolean	false	Show legend.
tickMargin	number	8	Margin between tick labels and axes.
margin	Partial<Margin>	{ top: 20, left: 12, right: 12 }	Chart margin.
strokeWidth	number	2	Width of the area stroke.
fillOpacity	number	0.4	Opacity of the area fill (0–1).
stacked	boolean	false	Stack multiple series on top of each other.
gradient	boolean | GradientConfig	false	Enable gradient fill. Pass true for defaults or a GradientConfig object for custom control.
dot	DotConfig	{ show: false, fill: "var(--color-background)", strokeWidth: 2, activeRadius: 6 }	Dot configuration for data points.
labelList	LabelListConfig	{ show: false, position: "top", offset: 12, fontSize: 12, fontWeight: "regular" }	Configuration for area labels.
className	string	-	Custom class for chart container.
tickFormatter	(value: unknown) => string	-	Custom function to format axis tick values.
wrapperClassName	string	-	Custom class for the outer wrapper.

GradientConfig

Prop	Type	Default	Description
startOpacity	number	0.8	Opacity at the top of the gradient.
endOpacity	number	0.1	Opacity at the bottom of the gradient.
startOffset	string	"5%"	SVG gradient start offset percentage.
endOffset	string	"95%"	SVG gradient end offset percentage.

Usage

Basic Example

const data = [
  { month: "Jan", mobile: 40, desktop: 30 },
  { month: "Feb", mobile: 35, desktop: 45 },
];

const series = {
  mobile: { color: "var(--color-primary)", name: "Mobile" },
  desktop: { color: "var(--color-success)", name: "Desktop" },
};

<AreaChart data={data} series={series} dataKey="month" />;

With Gradient Fill

<AreaChart
  data={data}
  series={series}
  dataKey="month"
  gradient
/>;

With Custom Gradient

<AreaChart
  data={data}
  series={series}
  dataKey="month"
  gradient={{ startOpacity: 0.9, endOpacity: 0.0 }}
/>;

Stacked Areas

<AreaChart
  data={data}
  series={series}
  dataKey="month"
  stacked
  showLegend
/>;

Stacked with Gradient

<AreaChart
  data={data}
  series={series}
  dataKey="month"
  stacked
  gradient
  showLegend
/>;

With Dots

<AreaChart
  data={data}
  series={series}
  dataKey="month"
  dot={{ show: true, fill: "#fff", strokeWidth: 3, activeRadius: 8 }}
/>;

With Labels

<AreaChart
  data={data}
  series={series}
  dataKey="month"
  labelList={{ show: true, position: "top", fontSize: 12, fontWeight: "semibold" }}
/>;

With Cartesian Grid and Legend

<AreaChart
  data={data}
  series={series}
  dataKey="month"
  showCartesianGrid
  showLegend
/>;

Custom Tick Formatter

<AreaChart
  data={data}
  series={series}
  dataKey="month"
  tickFormatter={(val) => `$${val}`}
/>;

Features

• Supports multiple series with different colors.
• Gradient fills with full control over opacity and offset.
• Stackable series using a shared stackId.
• Customizable dots and active dots.
• Supports curve types (linear, natural, monotoneX, etc.).
• Optional Cartesian grid, legend, and tooltip.
• Customizable labels with font size, weight, style, and position.
• Axis tick formatting.

Notes

• gradient and stacked can be combined for a polished layered look.
• dot and labelList can be combined for enhanced data visualization.
• series order determines area rendering order — last series renders on top.
• Tooltip labels can be hidden individually using hideTooltipLabel.
• fillOpacity applies globally; use gradient for per-area opacity control.