AreaChart

AreaChartは、複数のデータを比較するためのエリアチャートを描画するコンポーネントです。

ソース @yamada-ui/charts

Props

AreaChartProps

説明

Chart data.

タイプ

Dict<any>[]

説明

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

タイプ

string

説明

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

タイプ

AreaProps[]

説明

Props for the areas.

タイプ

Partial<AreaProps>

説明

Props passed down to recharts AreaChart component.

タイプ

AreaChartProps

説明

The visual color appearance of the component.

タイプ

"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"

説明

Determines whether points with null values should be connected.

タイプ

boolean

デフォルト

true

説明

Props passed down to recharts ResponsiveContainer component.

タイプ

ResponsiveContainerProps

説明

Type of the curve.

タイプ

ChartCurveType

デフォルト

`monotone`

説明

Controls fill opacity of all areas.

タイプ

number | [number, number]

デフォルト

0.4

説明

Specifies which lines should be displayed in the grid.

タイプ

ChartAxisType

デフォルト

'x'

説明

Props passed down to recharts 'CartesianGrid' component.

タイプ

GridProps

説明

A function to format labels on inside the tooltip.

タイプ

(label: string) => string

説明

Chart orientation.

タイプ

ChartLayoutType

デフォルト

'horizontal'

説明

Props passed down to recharts 'Legend' component.

タイプ

LegendProps

説明

Reference lines that should be displayed on the chart.

タイプ

ReferenceLineProps[]

説明

The size of the AreaChart.

タイプ

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

デフォルト

"full"

説明

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

タイプ

[string, string]

デフォルト

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

説明

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.

タイプ

number

説明

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.

タイプ

string | number

デフォルト

'5 5'

説明

Stroke width for the chart areas.

タイプ

number

デフォルト

2

説明

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

タイプ

string | number

説明

The option is the configuration of tick lines.

タイプ

ChartAxisType

デフォルト

'y'

説明

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

タイプ

number

デフォルト

0

説明

Props passed down to recharts 'Tooltip' component.

タイプ

TooltipProps

説明

Controls how chart areas are positioned relative to each other.

タイプ

AreaChartType

デフォルト

`default`

説明

Unit displayed next to each tick in y-axis.

タイプ

string

説明

A function to format values on inside the tooltip.

タイプ

(value: any) => string

説明

The variant of the AreaChart.

タイプ

string

説明

Determines whether activeDots should be displayed.

タイプ

boolean

デフォルト

true

説明

Determines whether dots should be displayed.

タイプ

boolean

デフォルト

true

説明

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

タイプ

boolean

説明

If true, legend is visible.

タイプ

boolean

デフォルト

false

説明

If true, tooltip is visible.

タイプ

boolean

デフォルト

true

説明

If true, X axis is visible.

タイプ

boolean

デフォルト

true

説明

If true, Y axis is visible.

タイプ

boolean

デフォルト

true

説明

A label to display below the X axis.

タイプ

string

説明

Props passed down to recharts 'XAxisLabel' component.

タイプ

LabelProps

説明

Props passed down to recharts 'XAxis' component.

タイプ

XAxisProps

説明

A function to format X axis tick.

タイプ

(value: any) => string

説明

A label to display below the Y axis.

タイプ

string

説明

Props passed down to recharts 'YAxisLabel' component.

タイプ

LabelProps

説明

Props passed down to recharts 'YAxis' component.

タイプ

YAxisProps

説明

A function to format Y axis tick.

タイプ

(value: any) => string

AreaProps

タイプ

DotProps

タイプ

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">

タイプ

Partial<AreaProps>

タイプ

DotProps

タイプ

DotProps

GitHubでこのページを編集する

前LineChart 次BarChart