Import
tsx
import { AreaChart } from "@indoku/ui"Examples
Gradient fill
tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const stacked = [ { name: "Web", values: [40, 55, 50, 80, 70, 110] }, { name: "Mobile", values: [30, 45, 40, 70, 65, 90] }, { name: "API", values: [20, 30, 25, 50, 45, 70] },]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const stacked = [ { name: "Web", values: [40, 55, 50, 80, 70, 110] }, { name: "Mobile", values: [30, 45, 40, 70, 65, 90] }, { name: "API", values: [20, 30, 25, 50, 45, 70] },]function AreaGradient() { return <Box maxW="2xl"><AreaChart series={[{ name: "Revenue", values: revenue }]} categories={months} /></Box>}Stacked
mode=stacked adds series on top of each other.
tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const stacked = [ { name: "Web", values: [40, 55, 50, 80, 70, 110] }, { name: "Mobile", values: [30, 45, 40, 70, 65, 90] }, { name: "API", values: [20, 30, 25, 50, 45, 70] },]const stacked = [ { name: "Web", values: [40, 55, 50, 80, 70, 110] }, { name: "Mobile", values: [30, 45, 40, 70, 65, 90] }, { name: "API", values: [20, 30, 25, 50, 45, 70] },]function AreaStacked() { return <Box maxW="2xl"><AreaChart series={stacked} categories={months} mode="stacked" legend /></Box>}Percent
mode=percent shows each share of the total.
tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const stacked = [ { name: "Web", values: [40, 55, 50, 80, 70, 110] }, { name: "Mobile", values: [30, 45, 40, 70, 65, 90] }, { name: "API", values: [20, 30, 25, 50, 45, 70] },]const stacked = [ { name: "Web", values: [40, 55, 50, 80, 70, 110] }, { name: "Mobile", values: [30, 45, 40, 70, 65, 90] }, { name: "API", values: [20, 30, 25, 50, 45, 70] },]function AreaPercent() { return <Box maxW="2xl"><AreaChart series={stacked} categories={months} mode="percent" legend /></Box>}Reference area
Shade a range of categories.
tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const stacked = [ { name: "Web", values: [40, 55, 50, 80, 70, 110] }, { name: "Mobile", values: [30, 45, 40, 70, 65, 90] }, { name: "API", values: [20, 30, 25, 50, 45, 70] },]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const stacked = [ { name: "Web", values: [40, 55, 50, 80, 70, 110] }, { name: "Mobile", values: [30, 45, 40, 70, 65, 90] }, { name: "API", values: [20, 30, 25, 50, 45, 70] },]function AreaReference() { return <Box maxW="2xl"><AreaChart series={[{ name: "Revenue", values: revenue }]} categories={months} referenceArea={{ from: 2, to: 4, label: "Campaign" }} /></Box>}Dot markers
showDots marks every point.
tsx
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const stacked = [ { name: "Web", values: [40, 55, 50, 80, 70, 110] }, { name: "Mobile", values: [30, 45, 40, 70, 65, 90] }, { name: "API", values: [20, 30, 25, 50, 45, 70] },]const revenue = [120, 180, 150, 240, 210, 300]const costs = [80, 110, 100, 150, 140, 170]const stacked = [ { name: "Web", values: [40, 55, 50, 80, 70, 110] }, { name: "Mobile", values: [30, 45, 40, 70, 65, 90] }, { name: "API", values: [20, 30, 25, 50, 45, 70] },]function AreaDots() { return <Box maxW="2xl"><AreaChart series={[{ name: "Revenue", values: revenue }]} categories={months} showDots gradient={false} /></Box>}Props
AreaChart
| Prop | Type | Default | Description |
|---|---|---|---|
mode | 'overlap' | 'stacked' | 'percent' | 'overlap' | How series combine. |
gradient | boolean | true | Gradient or flat fill. |
showDots | boolean | false | Circle on every point. |
referenceArea | { from: number; to: number; label?: string } | – | Shaded span between two category indexes. |
* required. Style props and HTML attributes are accepted as well.
Created by @indokudev