{"@context":"https://schema.org","@graph":[{"@type":"TechArticle","headline":"Area Chart","description":"Display trends and compare series with filled areas along an axis.","url":"https://intentui.com/docs/components/visualizations/area-chart","author":{"@type":"Person","name":"Irsyad","url":"https://x.com/irsyad"},"publisher":{"@type":"Organization","name":"Intent UI","url":"https://intentui.com","logo":{"@type":"ImageObject","url":"https://intentui.com/icon.svg"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://intentui.com/docs/components/visualizations/area-chart"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://intentui.com"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://intentui.com/docs"},{"@type":"ListItem","position":3,"name":"Components","item":"https://intentui.com/docs/components"},{"@type":"ListItem","position":4,"name":"Visualizations","item":"https://intentui.com/docs/components/visualizations"},{"@type":"ListItem","position":5,"name":"Area Chart","item":"https://intentui.com/docs/components/visualizations/area-chart"}]}]}
Area Chart
Loading...
Installation
Add the component with the CLI.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/area-chart
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the dependencies, then copy the component source into your project.
npm
pnpm
yarn
bun
npm install recharts react-aria-components
Examples
Monotone
Use monotone interpolation to draw a smooth curve between data points.
Loading...
Custom format
Customize the chart’s colors and styles.
Loading...
Custom tooltip
Use a custom tooltip to display labels, units, or icons when users hover over a data point.
Loading...
Custom legend
Use a custom legend to display series labels, icons, or controls.
Loading...
Custom colors
Set series colors in the chart configuration.
Loading...
Controlled
Manage chart state to switch datasets or coordinate with other controls.
Loading...
Component API
AreaChart extends the internal Intent UI <BaseChart> component.
areaPropsPartial<ComponentProps<typeof Area>>cartesianGridPropsCartesianGridPropschartPropsOmit<ComponentProps<typeof AreaChartPrimitive>, "data" | "stackOffset">childrenReact.ReactNodeclassNamestringcolorsreadonly (ChartColorKeys | string)[]Default:
DEFAULT_COLORSconfigChartConfigconnectNullsbooleanDefault:
falsecontainerHeightnumberDefault:
370 desktop / 200 mobiledataRecord<string, any>[]Default:
[]dataKeystringdisplayEdgeLabelsOnlybooleanDefault:
falsefillType"gradient" | "solid" | "none"Default:
gradienthideGridLinesbooleanDefault:
falsehideXAxisbooleanDefault:
falsehideYAxisbooleanDefault:
falseintervalTypeIntervalTypeDefault:
equidistantPreserveStartlayoutChartLayoutDefault:
horizontallegendLegendContentType | booleanDefault:
truelegendPropsOmit<ComponentProps<typeof LegendPrimitive>, "content" | "ref">tooltipTooltipContentType<ValueType, NameType> | booleanDefault:
truetooltipPropsBaseChartProps["tooltipProps"]typeChartTypeDefault:
defaultvalueFormatter(value: number) => stringDefault:
(value) => value.toString()xAxisPropsXAxisPropsPrimitiveyAxisPropsYAxisPrimitivePropsSee the Recharts for the full API reference.