||

Area Chart

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Simple static & beautifully designed area charts

apidocgithub
Basic Chart

Installation
npx shadcn@latest add @evilcharts/area-chart

Usage

The area chart is composible. <EvilAreaChart> is the container, and you compose only the parts you need — <Grid>, <XAxis>, <YAxis>, <Legend>, <Tooltip>, and one or more <Area> — as its children. Each <Area> carries its own variant, strokeVariant, and isClickable, so a single chart can mix fill styles, stroke styles, and make only some series interactive.

import {
  EvilAreaChart,
  Area,
  XAxis,
  YAxis,
  Grid,
  Tooltip,
  Legend,
  Dot,
  ActiveDot,
} from "@/components/evilcharts/charts/area-chart";
<EvilAreaChart data={data} config={chartConfig} stackType="stacked">
  <Grid />
  <XAxis dataKey="month" />
  <YAxis />
  <Legend isClickable />
  <Tooltip />
  <Area dataKey="desktop" variant="gradient" strokeVariant="dashed" isClickable>
    <Dot variant="border" />
    <ActiveDot variant="colored-border" />
  </Area>
  <Area dataKey="mobile" variant="hatched" strokeVariant="solid" isClickable>
    <ActiveDot variant="colored-border" />
  </Area>
</EvilAreaChart>

Interactive Selection

Add isClickable to any <Area> (and to <Legend>) to make those series selectable. Use the onSelectionChange callback on <EvilAreaChart> to handle selection events:

<EvilAreaChart
  data={data}
  config={chartConfig}
  onSelectionChange={(selectedDataKey) => {
    if (selectedDataKey) {
      console.log("Selected:", selectedDataKey);
    } else {
      console.log("Deselected");
    }
  }}
>
  <XAxis dataKey="month" />
  <Legend isClickable />
  <Tooltip />
  <Area dataKey="desktop" variant="gradient" isClickable />
  <Area dataKey="mobile" variant="gradient" isClickable />
</EvilAreaChart>

Loading State

isLoading='true'

Examples

Below are some examples of the area chart with different variants. where you can change the stackType, curveType, strokeVariant & areaVariant.

Gradient Colors

gradient colors
gradient colors - bump

Curve Types

curveType='bump'
curveType='step'
curveType='monotoneY'

Stack Types

stackType='default'
stackType='stacked'
stackType='expanded'

Stroke Variants

strokeVariant='solid'
strokeVariant='dashed'
strokeVariant='animated-dashed'

Area Variants

areaVariant='gradient'
areaVariant='gradient-reverse'
areaVariant='solid'
areaVariant='dotted'
areaVariant='lines'
areaVariant='hatched'

API Reference

The chart is composed of several parts. The props below are grouped by the component they belong to.

EvilAreaChart

The root container. It owns the data, the shared selection state, the loading skeleton, and the optional brush. Everything visual is composed as its children.

PropTypeDefaultDescription
data*TData[]–

Data used to display the chart — an array of objects where each object is a data point (TData extends Record<string, unknown>).

config*Record<string, ChartConfig[string]>–

Defines the chart's series. Each key matches a data key, with a color or color array.

children*ReactNode–

The composed chart parts — <Grid />, <XAxis />, <YAxis />, <Legend />, <Tooltip />, and one or more <Area />.

classNamestring–

Additional CSS classes for the chart container.

curveType"linear" | "bump" | "natural" | "monotone" | "step" | …"linear"

Default curve interpolation inherited by every <Area />.

animationTypenone|left-to-right|right-to-left|center-out|edges-in"left-to-right"

Direction of the custom intro reveal inherited by every <Area />. "none" disables it — devices with the OS reduce-motion preference fall back to "none" automatically.

stackTypedefault|expanded|stacked"default"

How multiple areas combine — independent, stacked, or normalized to 100%.

defaultSelectedDataKeystring | nullnull

The series selected on first render.

onSelectionChange(key: string | null) => void–

Fires when a series is selected or deselected via a clickable <Area /> or <Legend />.

isLoadingbooleanfalse

Shows the animated loading skeleton.

loadingPointsnumber14

Number of points in the loading skeleton.

showBrushbooleanfalse

Renders a zoom brush below the chart.

xDataKeykeyof TData & string–

X-axis key — only needed by the brush footer.

brushHeightnumber–

Height of the brush preview in pixels.

brushFormatLabel(value: unknown, index: number) => string–

Formats the brush axis labels.

onBrushChange(range: EvilBrushRange) => void–

Fires when the brush selection range changes.

chartPropsComponentProps<typeof AreaChart>–

Escape hatch forwarded to the underlying Recharts AreaChart. See the Recharts AreaChart documentation.

Area

A single area series. Each <Area /> is self-contained and generates its own gradient/pattern definitions, so a chart can hold any number of areas — each with its own variant, stroke, and clickability.

PropTypeDefaultDescription
dataKey*string–

The series key. Must exist on both the data rows and the chart config.

variantgradient|gradient-reverse|solid|dotted|lines|hatched"gradient"

The visual style of the area fill. Applies to this area only.

strokeVariantsolid|dashed|animated-dashed"dashed"

The stroke style for this area.

curveType"basis" | "bump" | "linear" | "natural" | "monotone" | "step" | …–

The curve interpolation for this area. Falls back to the chart's curveType when omitted.

animationTypenone|left-to-right|right-to-left|center-out|edges-in–

The intro reveal animation for this area. Falls back to the chart's animationType when omitted.

connectNullsbooleanfalse

Whether to connect line segments across null or missing values.

isClickablebooleanfalse

Lets this area be selected by clicking it. When any area is selected, unselected areas become semi-transparent.

childrenReactNode–

Optional <Dot /> and <ActiveDot /> composition that adds point markers to this area.

areaPropsComponentProps<typeof Area>–

Escape hatch for raw props forwarded to the underlying Recharts Area component.

Dot and ActiveDot

Point markers composed inside an <Area />. <Dot /> is the resting marker; <ActiveDot /> is the hovered marker. They render nothing on their own — the parent <Area /> reads their variant.

PropTypeDefaultDescription
variantdefault|border|colored-border–

The visual style of the point marker.

XAxis and YAxis

The category and value axes. Both ship with the chart's flat default styling and forward every Recharts axis prop, so dataKey, tickFormatter, tickMargin, etc. pass straight through. They are hidden automatically while the chart is loading, and <YAxis /> formats ticks as percentages when stackType="expanded".

PropTypeDefaultDescription
dataKeystring–

The data key for the axis values.

…axisProps––

Every other Recharts XAxis / YAxis prop is forwarded as-is. See the Recharts XAxis and Recharts YAxis documentation.

Grid

The background grid lines. Defaults to horizontal-only dashed lines and forwards every Recharts CartesianGrid prop.

PropTypeDefaultDescription
…gridProps––

Every Recharts CartesianGrid prop is forwarded as-is. See the Recharts CartesianGrid documentation.

Tooltip

The hover tooltip. It reads the chart's selection state so its content dims unselected series.

PropTypeDefaultDescription
variantdefault|frosted-glass"default"

The visual style of the tooltip surface.

roundnesssm|md|lg|xl"lg"

Controls the border-radius of the tooltip.

defaultIndexnumber–

When set, the tooltip is visible by default at the specified data point index.

cursorbooleantrue

Whether the vertical cursor line follows the pointer on hover.

Legend

The series legend. When isClickable is set, each entry toggles selection of its series.

PropTypeDefaultDescription
variantsquare|circle|circle-outline|rounded-square|rounded-square-outline|vertical-bar|horizontal-bar–

The visual style of the legend indicators.

alignleft|center|right"right"

Horizontal placement of the legend.

verticalAligntop|middle|bottom"top"

Vertical placement of the legend.

isClickablebooleanfalse

Lets each legend entry toggle selection of its series.

Did you like the content?