AreaChart

AreaChart is a component for drawing area charts to compare multiple sets of data.

Source @yamada-ui/charts

Props

AreaChartProps

Description

Chart data.

Type

Dict<any>[]

Description

The key of a group of data which should be unique in an chart.

Type

string

Description

An array of objects with dataKey and color keys. Determines which data should be consumed from the data array.

Type

AreaProps[]

Description

Props for the areas.

Type

Partial<AreaProps>

Description

Props passed down to recharts AreaChart component.

Type

AreaChartProps

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

Description

Determines whether points with null values should be connected.

Type

boolean

Default

true

Description

Props passed down to recharts ResponsiveContainer component.

Type

ResponsiveContainerProps

Description

Type of the curve.

Type

ChartCurveType

Default

`monotone`

Description

Controls fill opacity of all areas.

Type

number | [number, number]

Default

0.4

Description

Specifies which lines should be displayed in the grid.

Type

ChartAxisType

Default

'x'

Description

Props passed down to recharts 'CartesianGrid' component.

Type

GridProps

Description

A function to format labels on inside the tooltip.

Type

(label: string) => string

Description

Chart orientation.

Type

ChartLayoutType

Default

'horizontal'

Description

Props passed down to recharts 'Legend' component.

Type

LegendProps

Description

Reference lines that should be displayed on the chart.

Type

ReferenceLineProps[]

Description

The size of the AreaChart.

Type

"sm" | "md" | "lg" | "full"

Default

"full"

Description

A tuple of colors used when type="split" is set, ignored in all other cases.

Type

[string, string]

Default

'["red.400", "green.400"]'

Description

Offset for the split gradient. By default, value is inferred from data and series if possible. Must be generated from the data array with getSplitOffset function.

Type

number

Description

Dash array for the grid lines and cursor. The first number is the length of the solid line section and the second number is the length of the interval.

Type

string | number

Default

'5 5'

Description

Stroke width for the chart areas.

Type

number

Default

2

Description

If any two categorical charts have the same syncId, these two charts can sync the position tooltip, and the startIndex, endIndex of Brush.

Type

string | number

Description

The option is the configuration of tick lines.

Type

ChartAxisType

Default

'y'

Description

Specifies the duration of animation, the unit of this option is ms.

Type

number

Default

0

Description

Props passed down to recharts 'Tooltip' component.

Type

TooltipProps

Description

Controls how chart areas are positioned relative to each other.

Type

AreaChartType

Default

`default`

Description

Unit displayed next to each tick in y-axis.

Type

string

Description

A function to format values on inside the tooltip.

Type

(value: any) => string

Description

The variant of the AreaChart.

Type

string

Description

Determines whether activeDots should be displayed.

Type

boolean

Default

true

Description

Determines whether dots should be displayed.

Type

boolean

Default

true

Description

Determines whether the chart area should be represented with a gradient instead of the solid color.

Type

boolean

Description

If true, legend is visible.

Type

boolean

Default

false

Description

If true, tooltip is visible.

Type

boolean

Default

true

Description

If true, X axis is visible.

Type

boolean

Default

true

Description

If true, Y axis is visible.

Type

boolean

Default

true

Description

A label to display below the X axis.

Type

string

Description

Props passed down to recharts 'XAxisLabel' component.

Type

LabelProps

Description

Props passed down to recharts 'XAxis' component.

Type

XAxisProps

Description

A function to format X axis tick.

Type

(value: any) => string

Description

A label to display below the Y axis.

Type

string

Description

Props passed down to recharts 'YAxisLabel' component.

Type

LabelProps

Description

Props passed down to recharts 'YAxis' component.

Type

YAxisProps

Description

A function to format Y axis tick.

Type

(value: any) => string

AreaProps

Type

DotProps

Type

UIValue<"border" | ({} & string) | Color | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">

Type

Partial<AreaProps>

Type

DotProps

Type

DotProps

Edit this page on GitHub

PreviousLineChart NextBarChart