This is the full developer documentation for Chakra UI v3.
# Area Chart
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
Area,
AreaChart,
CartesianGrid,
Legend,
Tooltip,
XAxis,
} from "recharts"
export const AreaChartBasic = () => {
const chart = useChart({
data: [
{ windows: 186, mac: 80, linux: 120, month: "January" },
{ windows: 165, mac: 95, linux: 110, month: "February" },
{ windows: 190, mac: 87, linux: 125, month: "March" },
{ windows: 195, mac: 88, linux: 130, month: "May" },
{ windows: 182, mac: 98, linux: 122, month: "June" },
{ windows: 175, mac: 90, linux: 115, month: "August" },
{ windows: 180, mac: 86, linux: 124, month: "October" },
{ windows: 185, mac: 91, linux: 126, month: "November" },
],
series: [
{ name: "windows", color: "teal.solid" },
{ name: "mac", color: "purple.solid" },
{ name: "linux", color: "blue.solid" },
],
})
return (
value.slice(0, 3)}
/>
}
/>
} />
{chart.series.map((item) => (
))}
)
}
```
## Usage
```tsx
import { Chart, useChart } from "@chakra-ui/charts"
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
```
```tsx
```
## Examples
### Value Axis
Use the `YAxis` component from `recharts` to display the y-axis.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Area, AreaChart, Tooltip, XAxis, YAxis } from "recharts"
export const AreaChartWithValueAxis = () => {
const chart = useChart({
data: [
{ windows: 186, mac: 80, linux: 120, month: "January" },
{ windows: 165, mac: 95, linux: 110, month: "February" },
{ windows: 190, mac: 87, linux: 125, month: "March" },
{ windows: 195, mac: 88, linux: 130, month: "May" },
{ windows: 182, mac: 98, linux: 122, month: "June" },
{ windows: 175, mac: 90, linux: 115, month: "August" },
{ windows: 180, mac: 86, linux: 124, month: "October" },
{ windows: 185, mac: 91, linux: 126, month: "November" },
],
series: [
{ name: "windows", color: "teal.solid" },
{ name: "mac", color: "purple.solid" },
{ name: "linux", color: "orange.solid" },
],
})
return (
value.slice(0, 3)}
stroke={chart.color("border")}
/>
}
/>
{chart.series.map((item) => (
))}
)
}
```
### Dashed Area
Set the `strokeDasharray` prop to the `series` you want to display as a dashed
line.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
Area,
AreaChart,
CartesianGrid,
Legend,
Tooltip,
XAxis,
} from "recharts"
export const AreaChartWithDashedArea = () => {
const chart = useChart({
data: [
{ windows: 186, mac: 80, linux: 120, month: "January" },
{ windows: 165, mac: 95, linux: 110, month: "February" },
{ windows: 190, mac: 87, linux: 125, month: "March" },
{ windows: 195, mac: 88, linux: 130, month: "May" },
{ windows: 182, mac: 98, linux: 122, month: "June" },
{ windows: 175, mac: 90, linux: 115, month: "August" },
{ windows: 180, mac: 86, linux: 124, month: "October" },
{ windows: 185, mac: 91, linux: 126, month: "November" },
],
series: [
{ name: "windows", color: "teal.solid", strokeDasharray: "5 3" },
{ name: "mac", color: "orange.solid" },
{ name: "linux", color: "blue.solid" },
],
})
return (
value.slice(0, 3)}
/>
}
/>
} />
{chart.series.map((item) => (
))}
)
}
```
### Gradient Area
Use the `Chart.Gradient` component to create a gradient fill for the area.
> **Note:** The `id` of the gradient must be unique and referenced in the `fill`
> prop of the `Area` component.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
Area,
AreaChart,
CartesianGrid,
Legend,
Tooltip,
XAxis,
YAxis,
} from "recharts"
export const AreaChartWithGradient = () => {
const chart = useChart({
data: [
{ windows: 186, mac: 80, linux: 120, month: "January" },
{ windows: 165, mac: 95, linux: 110, month: "February" },
{ windows: 190, mac: 87, linux: 125, month: "March" },
{ windows: 195, mac: 88, linux: 130, month: "May" },
{ windows: 182, mac: 98, linux: 122, month: "June" },
{ windows: 175, mac: 90, linux: 115, month: "August" },
{ windows: 180, mac: 86, linux: 124, month: "October" },
{ windows: 185, mac: 91, linux: 126, month: "November" },
],
series: [
{ name: "windows", color: "teal.solid" },
{ name: "mac", color: "purple.solid" },
{ name: "linux", color: "blue.solid" },
],
})
return (
value.slice(0, 3)}
/>
}
/>
} />
{chart.series.map((item) => (
))}
{chart.series.map((item) => (
))}
)
}
```
### Fill With Value
Use the `Chart.Gradient` component to create a gradient fill that changes from
one color to another based on the value.
```tsx {4-7}
```
When the value is positive, it uses the first color, and when negative, it uses
the second color.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from "recharts"
const data = [
{ name: "Product A", uv: 4000, pv: 2400, amt: 2400 },
{ name: "Product B", uv: 3000, pv: 1398, amt: 2210 },
{ name: "Product C", uv: -1000, pv: 9800, amt: 2290 },
{ name: "Product D", uv: 500, pv: 3908, amt: 2000 },
{ name: "Product E", uv: -2000, pv: 4800, amt: 2181 },
{ name: "Product F", uv: -250, pv: 3800, amt: 2500 },
{ name: "Product G", uv: 3490, pv: 4300, amt: 2100 },
]
const gradientOffset = () => {
const max = Math.max(...data.map((i) => i.uv))
const min = Math.min(...data.map((i) => i.uv))
if (max <= 0) return 0
if (min >= 0) return 1
return max / (max - min)
}
const offset = gradientOffset()
export const AreaChartFillWithValue = () => {
const chart = useChart({
data,
series: [
{ name: "uv", color: "teal.solid" },
{ name: "pv", color: "purple.solid" },
],
})
return (
value.replace("Product ", "")}
/>
}
/>
)
}
```
### Percent
To render the area chart as a percentage, with value normalized to 100%:
- Set the `stackId` prop on the `Area` component to the same value
- Set the `stackOffset` prop to `expand` on the `AreaChart` component
- Format the y-axis via the `tickFormatter` prop to percentage format
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
Area,
AreaChart,
CartesianGrid,
Legend,
Tooltip,
XAxis,
YAxis,
} from "recharts"
export const AreaChartPercent = () => {
const chart = useChart({
data: [
{ windows: 186, mac: 80, linux: 120, month: "January" },
{ windows: 165, mac: 95, linux: 110, month: "February" },
{ windows: 190, mac: 87, linux: 125, month: "March" },
{ windows: 195, mac: 88, linux: 130, month: "May" },
{ windows: 182, mac: 98, linux: 122, month: "June" },
{ windows: 175, mac: 90, linux: 115, month: "August" },
{ windows: 180, mac: 86, linux: 124, month: "October" },
{ windows: 185, mac: 91, linux: 126, month: "November" },
],
series: [
{ name: "windows", color: "teal.solid" },
{ name: "mac", color: "purple.solid" },
{ name: "linux", color: "blue.solid" },
],
})
return (
value.slice(0, 3)}
/>
}
/>
} />
{chart.series.map((item) => (
))}
)
}
```
### Dots
Set the `dot` prop on the `Area` component to display dots that map to each data
point.
```tsx
```
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
Area,
AreaChart,
CartesianGrid,
Legend,
Tooltip,
XAxis,
YAxis,
} from "recharts"
export const AreaChartWithDots = () => {
const chart = useChart({
data: [
{ windows: 186, mac: 80, linux: 120, month: "January" },
{ windows: 165, mac: 95, linux: 110, month: "February" },
{ windows: 190, mac: 87, linux: 125, month: "March" },
{ windows: 195, mac: 88, linux: 130, month: "May" },
{ windows: 182, mac: 98, linux: 122, month: "June" },
{ windows: 175, mac: 90, linux: 349, month: "August" },
{ windows: 180, mac: 86, linux: 400, month: "October" },
{ windows: 185, mac: 91, linux: 126, month: "November" },
],
series: [
{ name: "windows", color: "teal.solid" },
{ name: "mac", color: "purple.solid" },
{ name: "linux", color: "blue.solid" },
],
})
return (
value.slice(0, 3)}
/>
}
/>
} />
{chart.series.map((item) => (
))}
{chart.series.map((item) => (
))}
)
}
```
### Connect Nulls
Pass the `connectNulls` prop to the `Area` component to connect data points even
when there are `null` values in between. This is useful when you want to show a
continuous line despite missing data points.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Box, For, Heading, SimpleGrid } from "@chakra-ui/react"
import { Area, AreaChart, CartesianGrid, Tooltip, XAxis } from "recharts"
export const AreaChartWithNulls = () => {
const chart = useChart({
data: [
{ sales: 186, month: "January" },
{ sales: null, month: "February" },
{ sales: 190, month: "March" },
{ sales: 195, month: "May" },
{ sales: null, month: "June" },
{ sales: 175, month: "August" },
{ sales: 180, month: "October" },
{ sales: 185, month: "November" },
{ sales: 300, month: "December" },
],
series: [{ name: "sales", color: "teal.solid" }],
})
return (
{(connectNulls) => (
{``}
value.slice(0, 3)}
/>
}
/>
{chart.series.map((item) => (
))}
)}
)
}
```
### Reference Line
Use the `ReferenceLine` component from `recharts` to add a reference line to
your chart. A reference line is useful when you want to highlight a specific
value in the chart.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
Area,
AreaChart,
CartesianGrid,
Legend,
ReferenceLine,
Tooltip,
XAxis,
YAxis,
} from "recharts"
export const AreaChartWithReferenceLines = () => {
const chart = useChart({
data: [
{ windows: 186, mac: 80, linux: 120, month: "January" },
{ windows: 165, mac: 95, linux: 110, month: "February" },
{ windows: 190, mac: 87, linux: 125, month: "March" },
{ windows: 195, mac: 88, linux: 130, month: "May" },
{ windows: 182, mac: 98, linux: 122, month: "June" },
{ windows: 175, mac: 90, linux: 115, month: "August" },
{ windows: 180, mac: 86, linux: 124, month: "October" },
{ windows: 185, mac: 91, linux: 126, month: "November" },
],
series: [
{ name: "windows", color: "teal.solid" },
{ name: "mac", color: "purple.solid" },
{ name: "linux", color: "blue.solid" },
],
})
return (
value.slice(0, 3)}
/>
}
/>
} />
{chart.series.map((item) => (
))}
)
}
```
### Reference Area
Use the `ReferenceArea` component from `recharts` to add a reference area to
your chart. A reference area is useful when you want to highlight a specific
range in the chart.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
Area,
AreaChart,
CartesianGrid,
Legend,
ReferenceArea,
ReferenceLine,
Tooltip,
XAxis,
YAxis,
} from "recharts"
export const AreaChartWithReferenceArea = () => {
const chart = useChart({
data: [
{ windows: 186, mac: 80, linux: 120, month: "January" },
{ windows: 165, mac: 95, linux: 110, month: "February" },
{ windows: 190, mac: 87, linux: 125, month: "March" },
{ windows: 195, mac: 88, linux: 130, month: "May" },
{ windows: 182, mac: 98, linux: 122, month: "June" },
{ windows: 175, mac: 90, linux: 115, month: "August" },
{ windows: 180, mac: 86, linux: 124, month: "October" },
{ windows: 185, mac: 91, linux: 126, month: "November" },
],
series: [
{ name: "windows", color: "teal.solid" },
{ name: "mac", color: "purple.solid" },
{ name: "linux", color: "blue.solid" },
],
})
return (
value.slice(0, 3)}
ticks={["February", "June"]}
/>
}
/>
} />
{chart.series.map((item) => (
))}
)
}
```
### Area Types
Recharts provides flexible support for various kinds of area charts.
Below are the different types of area charts you can create:
# Axis
This guide will show you how to customize the x and y axis of the charts
component.
:::note
The charts component is built on top of [Recharts](https://recharts.org). For
advanced usage, refer to their documentation.
:::
## X-Axis
### Custom Tick Formatting
To format the labels on the X-axis (e.g., abbreviate months from `January` to
`Jan` based on locale):
```tsx
```
### Rotate X-Axis Labels
If labels overlap, rotate them for better readability:
```tsx
```
### Adjust X-Axis Padding
Control the spacing between the first and last tick labels:
```tsx
```
### Hide X-Axis
If you need to remove the X-axis completely:
```tsx
```
### Custom X-Axis Labels
Render custom labels using a function:
```tsx
```
## Y-Axis
### Set Domain
Define the minimum and maximum values manually:
```tsx
```
### Format Labels
For example, converting values to percentages:
```tsx
`${value}%`} />
```
### Adjust Width
Control the space allocated to Y-axis labels:
```tsx
```
### Hide Y-Axis
To remove the Y-axis from the chart:
```tsx
```
### Custom Grid Lines
Enable or remove grid lines tied to the Y-axis:
```tsx
```
## Additional Customizations
### Multiple X or Y Axes
Overlay multiple axes in a single chart:
```tsx
```
### Reference Lines
Highlight a specific value with a reference line:
```tsx
```
### Axis Ticks and Lines
Remove the tick and axis lines by setting them to false.
```tsx
```
# Bar Chart
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
export const BarChartBasic = () => {
const chart = useChart({
data: [
{ allocation: 60, type: "Stock" },
{ allocation: 45, type: "Crypto" },
{ allocation: 12, type: "ETF" },
{ allocation: 4, type: "Cash" },
],
series: [{ name: "allocation", color: "teal.solid" }],
})
return (
`${value}%`}
/>
{chart.series.map((item) => (
))}
)
}
```
## Usage
```tsx
import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
```
```tsx
```
## Examples
### Bar color
Here's an example of coloring the bars based on the data.
> Use the `shape` prop on the `Bar` component to customize the fill color for
> each bar.
```tsx
}
/>
```
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, Rectangle, XAxis, YAxis } from "recharts"
export const BarChartBarColor = () => {
const chart = useChart({
data: [
{ allocation: 60, type: "Stock", color: "red.solid" },
{ allocation: 45, type: "Crypto", color: "blue.solid" },
{ allocation: 12, type: "ETF", color: "green.solid" },
{ allocation: 4, type: "Cash", color: "yellow.solid" },
],
})
return (
`${value}%`}
/>
(
)}
/>
)
}
```
### Bar Label
Render the `LabelList` component from `recharts` to display the label of the
bar.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
Bar,
BarChart,
CartesianGrid,
LabelList,
Legend,
Tooltip,
XAxis,
} from "recharts"
export const BarChartWithBarLabel = () => {
const chart = useChart({
data: [
{ windows: 186, mac: 80, linux: 120, month: "January" },
{ windows: 165, mac: 95, linux: 110, month: "February" },
{ windows: 190, mac: 87, linux: 125, month: "March" },
{ windows: 195, mac: 88, linux: 130, month: "May" },
],
series: [
{ name: "windows", color: "teal.solid" },
{ name: "mac", color: "purple.solid" },
{ name: "linux", color: "blue.solid" },
],
})
return (
value.slice(0, 3)}
/>
}
/>
} />
{chart.series.map((item) => (
))}
)
}
```
### Formatter
Use the formatter provided from the `useChart` hook to format the value axis.
```tsx
```
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from "recharts"
export const BarChartWithFormatter = () => {
const chart = useChart({
data: [
{ sales: 63000, month: "June" },
{ sales: 72000, month: "July" },
{ sales: 85000, month: "August" },
{ sales: 79000, month: "September" },
{ sales: 90000, month: "October" },
{ sales: 95000, month: "November" },
{ sales: 88000, month: "December" },
],
series: [{ name: "sales", color: "teal.solid" }],
})
return (
value.slice(0, 3)}
/>
}
/>
{chart.series.map((item) => (
))}
)
}
```
### No Gap
To remove the gap between the bars, set the `barCategoryGap` prop to `0` on the
`BarChart` component.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, Tooltip, XAxis } from "recharts"
export const BarChartWithNoGap = () => {
const chart = useChart({
data: [
{ sales: 63000, month: "June" },
{ sales: 72000, month: "July" },
{ sales: 85000, month: "August" },
{ sales: 79000, month: "September" },
{ sales: 90000, month: "October" },
{ sales: 95000, month: "November" },
{ sales: 88000, month: "December" },
],
series: [{ name: "sales", color: "teal.solid" }],
})
return (
value.slice(0, 3)}
/>
}
/>
{chart.series.map((item) => (
))}
)
}
```
### Fill With Value
Compose the `LabelList` and `shape` prop to render bars upward or downward based
on the value.
```tsx /fill={props.payload.views > 0 ? "green.solid" : "red.solid"}/
(
0 ? "green.solid" : "red.solid")}
/>
)}
>
```
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, LabelList, Rectangle } from "recharts"
export const BarChartFillWithValue = () => {
const chart = useChart({
data: [
{ name: "Page A", views: 400 },
{ name: "Page B", views: -300 },
{ name: "Page C", views: -200 },
{ name: "Page D", views: 278 },
{ name: "Page E", views: -189 },
{ name: "Page F", views: 239 },
{ name: "Page G", views: 349 },
],
series: [{ name: "views", color: "teal.solid" }],
})
return (
{chart.series.map((item) => (
(
0 ? "green.solid" : "red.solid",
)}
/>
)}
>
))}
)
}
```
### Horizontal
Pass the `layout="vertical"` prop to the `BarChart` component to render the bars
horizontally.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
Bar,
BarChart,
CartesianGrid,
Legend,
Tooltip,
XAxis,
YAxis,
} from "recharts"
export const BarChartHorizontal = () => {
const chart = useChart({
data: [
{ windows: 186, mac: 80, linux: 120, month: "January" },
{ windows: 165, mac: 95, linux: 110, month: "February" },
{ windows: 190, mac: 87, linux: 125, month: "March" },
{ windows: 180, mac: 86, linux: 124, month: "October" },
{ windows: 185, mac: 91, linux: 126, month: "November" },
],
series: [
{ name: "windows", color: "teal.solid", stackId: "a" },
{ name: "mac", color: "purple.solid", stackId: "a" },
{ name: "linux", color: "blue.solid", stackId: "a" },
],
})
return (
typeof value === "string" ? value.slice(0, 3) : value
}
/>
}
/>
} />
{chart.series.map((item) => (
))}
)
}
```
### Rounded
Pass the `radius` prop to the `Bar` component to render the bars with rounded
corners.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
export const BarChartRounded = () => {
const chart = useChart({
data: [
{ allocation: 60, type: "Stock" },
{ allocation: 45, type: "Crypto" },
{ allocation: 12, type: "ETF" },
{ allocation: 4, type: "Cash" },
],
series: [{ name: "allocation", color: "teal.solid" }],
})
return (
`${value}%`}
/>
{chart.series.map((item) => (
))}
)
}
```
### Range
Passing an array of values to the `dataKey` prop will render a range bar that
indicates the lower and upper bounds of the values.
```ts /value: [10, 20]/
const chart = useChart({
data: [
{ name: "UK", value: [10, 20] },
// ...
],
})
```
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
export const BarChartRange = () => {
const chart = useChart({
data: [
{ name: "UK", value: [10, 20] },
{ name: "US", value: [15, 25] },
{ name: "EU", value: [5, 18] },
{ name: "JP", value: [12, 30] },
],
})
return (
)
}
```
### Multiple
Render multiple `Bar` components to create a bar chart with multiple series.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
Bar,
BarChart,
CartesianGrid,
Legend,
Tooltip,
XAxis,
YAxis,
} from "recharts"
export const BarChartMultiple = () => {
const chart = useChart({
data: [
{ type: "mobile", poor: 40, fair: 100, good: 200, excellent: 70 },
{ type: "marketing", poor: 15, fair: 40, good: 120, excellent: 90 },
{ type: "social", poor: 70, fair: 135, good: 220, excellent: 180 },
{ type: "ecommerce", poor: 175, fair: 155, good: 75, excellent: 95 },
],
series: [
{ name: "poor", color: "blue.solid" },
{ name: "fair", color: "orange.solid" },
{ name: "good", color: "yellow.solid" },
{ name: "excellent", color: "green.solid" },
],
})
return (
}
/>
}
/>
{chart.series.map((item) => (
))}
)
}
```
### Legend Position
Pass the `layout` prop to the `Legend` component from `recharts` to configure
the position of the legend.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
Bar,
BarChart,
CartesianGrid,
Legend,
Tooltip,
XAxis,
YAxis,
} from "recharts"
export const BarChartLegendPosition = () => {
const chart = useChart({
data: [
{ category: "Web Server", value: 200, maxValue: 450 },
{ category: "Credit Card", value: 700, maxValue: 900 },
{ category: "Payment", value: 439, maxValue: 500 },
{ category: "API", value: 147, maxValue: 200 },
{ category: "AddToCart", value: 84, maxValue: 100 },
],
series: [
{ name: "value", color: "blue.solid" },
{ name: "maxValue", color: "green.solid" },
],
})
return (
}
/>
}
/>
{chart.series.map((item) => (
))}
)
}
```
### Percent
Set the `stackOffset` prop to `expand` on the `BarChart` component to render the
bars with value normalized to 100%.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
Bar,
BarChart,
CartesianGrid,
Legend,
Tooltip,
XAxis,
YAxis,
} from "recharts"
export const BarChartPercent = () => {
const chart = useChart({
data: [
{ windows: 186, mac: 80, linux: 120, month: "January" },
{ windows: 165, mac: 95, linux: 110, month: "February" },
{ windows: 190, mac: 87, linux: 125, month: "March" },
{ windows: 195, mac: 88, linux: 130, month: "May" },
{ windows: 182, mac: 98, linux: 122, month: "June" },
{ windows: 175, mac: 90, linux: 115, month: "August" },
{ windows: 180, mac: 86, linux: 124, month: "October" },
{ windows: 185, mac: 91, linux: 126, month: "November" },
],
series: [
{ name: "windows", color: "teal.solid", stackId: "a" },
{ name: "mac", color: "purple.solid", stackId: "a" },
{ name: "linux", color: "blue.solid", stackId: "a" },
],
})
return (
value.slice(0, 3)}
/>
}
/>
} />
{chart.series.map((item) => (
))}
)
}
```
### Stacked
Render multiple `Bar` components and set their `stackId` prop to the same value
to stack them.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis } from "recharts"
export const BarChartStacked = () => {
const chart = useChart({
data: [
{ windows: 186, mac: 80, linux: 120, month: "January" },
{ windows: 165, mac: 95, linux: 110, month: "February" },
{ windows: 190, mac: 87, linux: 125, month: "March" },
{ windows: 195, mac: 88, linux: 130, month: "May" },
{ windows: 182, mac: 98, linux: 122, month: "June" },
{ windows: 175, mac: 90, linux: 115, month: "August" },
{ windows: 180, mac: 86, linux: 124, month: "October" },
{ windows: 185, mac: 91, linux: 126, month: "November" },
],
series: [
{ name: "windows", color: "teal.solid", stackId: "a" },
{ name: "mac", color: "purple.solid", stackId: "a" },
{ name: "linux", color: "blue.solid", stackId: "a" },
],
})
return (
value.slice(0, 3)}
/>
}
/>
} />
{chart.series.map((item) => (
))}
)
}
```
### Stacked Mix
Render multiple `Bar` components with different `stackId` props to create a bar
chart with some series stacked and some not.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis } from "recharts"
export const BarChartStackedMix = () => {
const chart = useChart({
data: [
{ windows: 186, mac: 80, linux: 120, month: "January" },
{ windows: 165, mac: 95, linux: 110, month: "February" },
{ windows: 190, mac: 87, linux: 125, month: "March" },
{ windows: 195, mac: 88, linux: 130, month: "May" },
{ windows: 182, mac: 98, linux: 122, month: "June" },
{ windows: 175, mac: 90, linux: 115, month: "August" },
{ windows: 180, mac: 86, linux: 124, month: "October" },
{ windows: 185, mac: 91, linux: 126, month: "November" },
],
series: [
{ name: "windows", color: "teal.solid", stackId: "a" },
{ name: "mac", color: "purple.solid", stackId: "b" },
{ name: "linux", color: "blue.solid", stackId: "b" },
],
})
return (
value.slice(0, 3)}
/>
}
/>
} />
{chart.series.map((item) => (
))}
)
}
```
### Reference Lines
Use the `ReferenceLine` component from `recharts` to make reference to a
specific value on the chart.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
Bar,
BarChart,
CartesianGrid,
ReferenceArea,
ReferenceLine,
Tooltip,
XAxis,
} from "recharts"
export const BarChartWithReferenceLines = () => {
const chart = useChart({
data: [
{ sales: 63000, month: "June" },
{ sales: 72000, month: "July" },
{ sales: 85000, month: "August" },
{ sales: 79000, month: "September" },
{ sales: 90000, month: "October" },
{ sales: 95000, month: "November" },
{ sales: 88000, month: "December" },
],
series: [{ name: "sales", color: "blue.solid" }],
})
return (
value.slice(0, 3)}
/>
}
/>
{chart.series.map((item) => (
))}
)
}
```
### Histogram
For those mathematics wiz, you can compose the barchart to create a histogram.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from "recharts"
export const BarChartHistogram = () => {
const chart = useChart({ data })
return (
[`${value}`, "Frequency"]}
labelFormatter={(label) => {
const bin = data.find((item) => item.from === Number(label))
return bin ? `Range: ${bin.from}-${bin.to}` : ""
}}
/>
)
}
const data = [
{ from: 0, to: 10, value: 0 },
{ from: 10, to: 20, value: 10 },
{ from: 20, to: 30, value: 30 },
{ from: 30, to: 40, value: 50 },
{ from: 40, to: 50, value: 100 },
{ from: 50, to: 60, value: 200 },
{ from: 60, to: 70, value: 120 },
{ from: 70, to: 80, value: 220 },
{ from: 80, to: 90, value: 300 },
{ from: 90, to: 100, value: 320 },
{ from: 100, to: 110, value: 400 },
{ from: 110, to: 120, value: 470 },
{ from: 120, to: 130, value: 570 },
{ from: 130, to: 140, value: 810 },
{ from: 140, to: 150, value: 720 },
{ from: 150, to: 160, value: 810 },
{ from: 160, to: 170, value: 750 },
{ from: 170, to: 180, value: 810 },
{ from: 180, to: 190, value: 700 },
{ from: 190, to: 200, value: 530 },
{ from: 200, to: 210, value: 380 },
{ from: 210, to: 220, value: 410 },
{ from: 220, to: 230, value: 250 },
{ from: 230, to: 240, value: 170 },
{ from: 240, to: 250, value: 120 },
{ from: 250, to: 260, value: 100 },
{ from: 260, to: 270, value: 90 },
{ from: 270, to: 280, value: 120 },
{ from: 280, to: 290, value: 70 },
{ from: 290, to: 300, value: 55 },
{ from: 300, to: 310, value: 40 },
{ from: 310, to: 320, value: 20 },
{ from: 320, to: 330, value: 0 },
]
const ticks = Array.from({ length: 12 }, (_, i) => i * 30)
```
### Avatar Ticks
Here's an example of rendering images as the `XAxis` tick by leveraging svg
`foreignObject`.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Bar, BarChart, XAxis, YAxis } from "recharts"
const data = [
{ name: "Alice", value: 400, avatar: "https://i.pravatar.cc/50?img=1" },
{ name: "Bob", value: 300, avatar: "https://i.pravatar.cc/50?img=2" },
{ name: "Charlie", value: 200, avatar: "https://i.pravatar.cc/50?img=5" },
{ name: "David", value: 278, avatar: "https://i.pravatar.cc/50?img=4" },
]
interface AvatarTickProps {
x: number
y: number
index: number
}
const AvatarTicks = (props: Partial) => {
const { x, y, index } = props as AvatarTickProps
const avatarUrl = data[index].avatar
return (
)
}
export const BarChartWithAvatarTicks = () => {
const chart = useChart({
data,
series: [{ name: "value", color: "teal.solid" }],
})
return (
}
stroke={chart.color("border.emphasized")}
/>
{chart.series.map((item) => (
))}
)
}
```
### Candlestick
Combine the bar chart with the `ErrorBar` and `Bar` components to create a
candlestick chart.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import {
Bar,
BarChart,
CartesianGrid,
ErrorBar,
Rectangle,
XAxis,
YAxis,
} from "recharts"
export const BarChartCandlestick = () => {
const chart = useChart({
data,
series: [{ name: "open_close", color: "teal.solid" }],
})
return (
{
const entry = props.payload
const fill =
entry?.open_close[0] > entry?.open_close[1]
? chart.color("red.solid")
: chart.color("green.solid")
return
}}
>
[
obj.open_close[0] - obj.high_low[0],
obj.high_low[1] - obj.open_close[1],
]}
width={2}
stroke={chart.color("fg")}
/>
)
}
const data = [
{
date: "2024-01-01",
open_close: [185.96, 185.64],
high_low: [186.74, 185.19],
},
{
date: "2024-01-02",
open_close: [184.22, 185.14],
high_low: [185.15, 182.73],
},
{
date: "2024-01-03",
open_close: [184.22, 181.42],
high_low: [184.26, 181.12],
},
{
date: "2024-01-04",
open_close: [181.99, 182.68],
high_low: [183.0872, 181.59],
},
{
date: "2024-01-05",
open_close: [182.15, 185.56],
high_low: [185.66, 181.5],
},
{
date: "2024-01-08",
open_close: [184.51, 185.8],
high_low: [186.01, 183.98],
},
{
date: "2024-01-09",
open_close: [186.19, 185.64],
high_low: [187.05, 184.74],
},
{
date: "2024-01-10",
open_close: [186.09, 186.19],
high_low: [187.3499, 185.36],
},
{
date: "2024-01-11",
open_close: [186.54, 185.59],
high_low: [187.05, 185.08],
},
{
date: "2024-01-12",
open_close: [185.34, 185.92],
high_low: [186.565, 184.455],
},
]
```
### Composition
Here's an example of composing the `BarChart`, `Card` and `SegmentGroup`
components.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Card, SegmentGroup } from "@chakra-ui/react"
import * as React from "react"
import { Bar, BarChart, XAxis } from "recharts"
type CurrentKey = "windows" | "mac" | "linux"
export const BarChartComposition = () => {
const [currentKey, setCurrentKey] = React.useState("windows")
const chart = useChart({
data: [
{ windows: 186, mac: 80, linux: 120, month: "January" },
{ windows: 165, mac: 95, linux: 110, month: "February" },
{ windows: 190, mac: 87, linux: 125, month: "March" },
{ windows: 195, mac: 88, linux: 130, month: "May" },
{ windows: 182, mac: 98, linux: 122, month: "June" },
{ windows: 175, mac: 90, linux: 115, month: "August" },
{ windows: 180, mac: 86, linux: 124, month: "October" },
{ windows: 185, mac: 91, linux: 126, month: "November" },
],
series: [
{ name: "windows", color: "teal.solid" },
{ name: "mac", color: "purple.solid" },
{ name: "linux", color: "blue.solid" },
],
})
const totals = chart.data.reduce(
(acc, item) => {
return {
windows: acc.windows + item.windows,
mac: acc.mac + item.mac,
linux: acc.linux + item.linux,
}
},
{ windows: 0, mac: 0, linux: 0 },
)
const series = chart.getSeries({ name: currentKey })
const formatNumber = chart.formatNumber({
style: "decimal",
minimumFractionDigits: 0,
maximumFractionDigits: 2,
})
return (
OS Downloads
setCurrentKey(e.value as CurrentKey)}
>
value.slice(0, 3)}
/>
)
}
```
# Bar List
```tsx
"use client"
import { BarList, type BarListData, useChart } from "@chakra-ui/charts"
export const BarListBasic = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 1200000 },
{ name: "Direct", value: 100000 },
{ name: "Bing", value: 200000 },
{ name: "Yahoo", value: 20000 },
{ name: "ChatGPT", value: 1345000 },
{ name: "Github", value: 100000 },
{ name: "Yandex", value: 100000 },
],
series: [{ name: "name", color: "teal.subtle" }],
})
return (
)
}
```
## Usage
```tsx
import { BarList, Chart, useChart } from "@chakra-ui/charts"
```
```tsx
```
## Examples
### Sort Order
Set the `sort` key to `{ by: "value", direction: "asc" }` to sort the bars in
ascending order.
```ts
const chart = useChart({
sort: { by: "value", direction: "asc" },
// ...
})
```
```tsx
"use client"
import { BarList, type BarListData, useChart } from "@chakra-ui/charts"
export const BarListAscending = () => {
const chart = useChart({
sort: { by: "value", direction: "asc" },
data: [
{ name: "Google", value: 1200000 },
{ name: "Direct", value: 100000 },
{ name: "Bing", value: 200000 },
{ name: "Yahoo", value: 20000 },
{ name: "ChatGPT", value: 1345000 },
{ name: "Github", value: 100000 },
{ name: "Yandex", value: 100000 },
],
series: [{ name: "name", color: "teal.subtle" }],
})
return (
)
}
```
### Format Value
Pass the `valueFormatter` prop to the `BarList.Value` component to format the
value of the bars.
```tsx /valueFormatter={(value) => value.toLocaleString()}/
value.toLocaleString()} />
```
```tsx
"use client"
import { BarList, type BarListData, useChart } from "@chakra-ui/charts"
export const BarListWithFormatter = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Created", value: 120 },
{ name: "Initial Contact", value: 90 },
{ name: "Booked Demo", value: 45 },
{ name: "Closed", value: 10 },
],
series: [{ name: "name", color: "pink.subtle" }],
})
const getPercent = (value: number) =>
chart.getValuePercent("value", value).toFixed(0)
return (
`${value} (${getPercent(value)}%)`}
/>
)
}
```
### Labels
To add name and value labels to the bars, use the `BarList.Label` component.
```tsx
```
```tsx
"use client"
import { BarList, type BarListData, useChart } from "@chakra-ui/charts"
export const BarListWithLabel = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 1200000 },
{ name: "Direct", value: 100000 },
{ name: "Bing", value: 200000 },
{ name: "Yahoo", value: 20000 },
{ name: "ChatGPT", value: 1345000 },
{ name: "Github", value: 100000 },
{ name: "Yandex", value: 100000 },
],
series: [{ name: "name", color: "teal.subtle" }],
})
return (
)
}
```
### Link
To make the bars render a link, pass the `label` prop to the `BarList.Bar`
component.
```tsx
{payload.name}}
/>
```
```tsx
"use client"
import { BarList, type BarListData, useChart } from "@chakra-ui/charts"
export const BarListWithLink = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Created", value: 120, href: "#" },
{ name: "Initial Contact", value: 90, href: "#" },
{ name: "Booked Demo", value: 45, href: "#" },
{ name: "Closed", value: 10, href: "#" },
],
series: [{ name: "name", color: "pink.subtle" }],
})
return (
{payload.name}}
/>
)
}
```
### Tooltip
Pass the `tooltip` prop to the `BarList.Bar` component to show a tooltip when
hovering over the bar.
```tsx
"use client"
import { BarList, type BarListData, useChart } from "@chakra-ui/charts"
export const BarListWithTooltip = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 1200000 },
{ name: "Direct", value: 100000 },
{ name: "Bing", value: 200000 },
{ name: "Yahoo", value: 20000 },
{ name: "ChatGPT", value: 1345000 },
{ name: "Github", value: 100000 },
{ name: "Yandex", value: 100000 },
],
series: [{ name: "name", color: "teal.subtle", label: "Search Engine" }],
})
return (
)
}
```
### Multiple values
Here's an example of how to render the value and percent of the bars.
```tsx
"use client"
import { BarList, type BarListData, useChart } from "@chakra-ui/charts"
export const BarListWithMultiValue = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 1200000 },
{ name: "Direct", value: 100000 },
{ name: "Bing", value: 200000 },
{ name: "Yahoo", value: 20000 },
{ name: "ChatGPT", value: 1345000 },
{ name: "Github", value: 100000 },
{ name: "Yandex", value: 100000 },
],
series: [{ name: "name", color: "teal.subtle" }],
})
const getPercent = (value: number) =>
chart.getValuePercent("value", value).toFixed(2)
return (
`${getPercent(value)}%`} />
)
}
```
# Bar Segment
```tsx
"use client"
import { BarSegment, useChart } from "@chakra-ui/charts"
export const BarSegmentBasic = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 500000, color: "teal.solid" },
{ name: "Direct", value: 100000, color: "blue.solid" },
{ name: "Bing", value: 200000, color: "orange.solid" },
{ name: "Yandex", value: 100000, color: "purple.solid" },
],
})
return (
)
}
```
## Usage
```tsx
import { BarSegment, Chart, useChart } from "@chakra-ui/charts"
```
```tsx
```
## Examples
### Bar Size
Pass the `barSize` prop to the `BarSegment.Root` component to configure the size
of the bar.
```tsx
"use client"
import { BarSegment, useChart } from "@chakra-ui/charts"
export const BarSegmentWithBarSize = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Ruby", value: 450000, color: "green.solid" },
{ name: "CSS", value: 150000, color: "yellow.solid" },
{ name: "JavaScript", value: 300000, color: "orange.solid" },
{ name: "HTML", value: 175000, color: "purple.solid" },
{ name: "React", value: 225000, color: "blue.solid" },
],
})
return (
)
}
```
### Legend
Use the `BarSegment.Legend` component to render the legend. You can pass
`showPercent` and `showValue` to control the visibility of the percentage and
values.
```tsx
"use client"
import { BarSegment, useChart } from "@chakra-ui/charts"
export const BarSegmentWithLegend = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 500000, color: "teal.solid" },
{ name: "Direct", value: 100000, color: "blue.solid" },
{ name: "Bing", value: 200000, color: "orange.solid" },
{ name: "Yandex", value: 100000, color: "purple.solid" },
],
})
return (
)
}
```
### Tooltip
Pass the `tooltip` prop to the `BarSegment.Bar` component to show a tooltip when
hovering over the bar.
```tsx
"use client"
import { BarSegment, useChart } from "@chakra-ui/charts"
export const BarSegmentWithTooltip = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 500000, color: "teal.solid" },
{ name: "Direct", value: 100000, color: "blue.solid" },
{ name: "Bing", value: 200000, color: "orange.solid" },
{ name: "Yandex", value: 100000, color: "purple.solid" },
],
})
return (
)
}
```
### Reference
To reference a specific value on the chart, use the `BarSegment.Reference`
component.
```tsx
"use client"
import { BarSegment, useChart } from "@chakra-ui/charts"
export const BarSegmentWithReference = () => {
const chart = useChart({
sort: { by: "value", direction: "desc" },
data: [
{ name: "Google", value: 500000, color: "teal.solid" },
{ name: "Direct", value: 100000, color: "blue.solid" },
{ name: "Bing", value: 200000, color: "orange.solid" },
{ name: "Yandex", value: 80000, color: "purple.solid" },
],
})
return (
)
}
```
# Cartesian Grid
This guide will show you how to customize the cartesian grid of the charts
component.
:::note
The charts component is built on top of [Recharts](https://recharts.org). For
advanced usage, refer to their documentation.
:::
## Usage
```tsx
import { CartesianGrid } from "recharts"
```
```tsx
```
This will render a default grid with light gray lines on both the X and Y axes.
## Customize Stroke
Modify the appearance of the grid lines using `stroke`, `strokeDasharray`, and
`opacity`
```tsx
```
| Property | Description |
| ----------------- | -------------------------------------------------------- |
| `stroke` | Changes the grid line color (e.g., `#ddd`, `red`, etc.). |
| `strokeDasharray` | Defines the dash pattern (e.g., `5 5` for dashed lines). |
| `opacity` | Controls grid line transparency (0 to 1). |
## Show/Hide Grid Lines
To control whether horizontal or vertical lines are displayed:
```tsx
```
- `vertical={false}` → Hides vertical grid lines
- `horizontal={false}` → Hides horizontal grid lines
- `horizontal={true}` and `vertical={true}` → Shows both (default behavior)
## Remove Grid Lines
To remove the grid completely, simply omit the `CartesianGrid` component or
explicitly hide both horizontal and vertical lines:
```tsx
```
# Donut Chart
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Pie, PieChart, Sector, Tooltip } from "recharts"
export const DonutChartBasic = () => {
const chart = useChart({
data: [
{ name: "windows", value: 400, color: "blue.solid" },
{ name: "mac", value: 300, color: "orange.solid" },
{ name: "linux", value: 300, color: "pink.solid" },
{ name: "other", value: 200, color: "green.solid" },
],
})
return (
}
/>
(
)}
/>
)
}
```
## Usage
```tsx
import { Chart, useChart } from "@chakra-ui/charts"
import { Pie, PieChart, Sector } from "recharts"
```
```tsx
} />
```
## Examples
### Point Label
To display a point label on the chart, use the `PointLabel` component from
`recharts`.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Pie, PieChart, Sector, Tooltip } from "recharts"
export const DonutChartWithPointLabel = () => {
const chart = useChart({
data: [
{ name: "windows", value: 400, color: "blue.solid" },
{ name: "mac", value: 300, color: "orange.solid" },
{ name: "linux", value: 300, color: "pink.solid" },
{ name: "other", value: 200, color: "green.solid" },
],
})
return (
}
/>
(
)}
/>
)
}
```
### Start and End Angle
Customizing the `startAngle` and `endAngle` prop of the `` component can
create partial donuts.
```tsx
{/* ... */}
```
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Pie, PieChart, Sector, Tooltip } from "recharts"
export const DonutChartWithStartAndEndAngle = () => {
const chart = useChart({
data: [
{ name: "windows", value: 400, color: "blue.solid" },
{ name: "mac", value: 300, color: "orange.solid" },
{ name: "linux", value: 300, color: "pink.solid" },
{ name: "other", value: 200, color: "green.solid" },
],
})
return (
}
/>
(
)}
/>
)
}
```
### Angle Padding
To add some space between the segments, use the `paddingAngle` prop.
> **Pro Tip:** To round the corners of the segments, use the `cornerRadius`
> prop.
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Pie, PieChart, Sector, Tooltip } from "recharts"
export const DonutChartWithAnglePadding = () => {
const chart = useChart({
data: [
{ name: "windows", value: 400, color: "blue.solid" },
{ name: "mac", value: 300, color: "orange.solid" },
{ name: "linux", value: 300, color: "pink.solid" },
],
})
return (
}
/>
(
)}
/>
)
}
```
### Detached Segment
To create an effect where the active segment is scaled and detached from the
rest of the segments, use the `activeIndex` prop and the `activeShape` prop.
```tsx /activeIndex/ /activeShape/
}
/>
```
```tsx
"use client"
import { Chart, useChart } from "@chakra-ui/charts"
import { Pie, PieChart, Sector, Tooltip } from "recharts"
export const DonutChartWithDetachedSegment = () => {
const chart = useChart({
data: [
{ name: "windows", value: 400, color: "blue.solid" },
{ name: "mac", value: 300, color: "orange.solid" },
{ name: "linux", value: 300, color: "pink.solid" },
{ name: "other", value: 200, color: "green.solid" },
],
})
return (
}
/>
}
strokeWidth={5}
shape={(props) => (
)}
/>
)
}
```
### Centered Text
Use the `Chart.RadialText` component to display a centered text on the chart
with an optional description.
```tsx