Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

AreaChart

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

ソース@yamada-ui/charts

Props

AreaChartProps

data

必須

説明

Chart data.

タイプ

Dict<any>[]

dataKey

必須

説明

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

タイプ

string

series

必須

説明

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

タイプ

AreaProps[]

areaProps

説明

Props for the areas.

タイプ

Partial<AreaProps>

chartProps

説明

Props passed down to recharts AreaChart component.

タイプ

AreaChartProps

colorScheme

説明

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"

connectNulls

説明

Determines whether points with null values should be connected.

タイプ

boolean

デフォルト

true

containerProps

説明

Props passed down to recharts ResponsiveContainer component.

タイプ

ResponsiveContainerProps

curveType

説明

Type of the curve.

タイプ

ChartCurveType

デフォルト

`monotone`

fillOpacity

説明

Controls fill opacity of all areas.

タイプ

number | [number, number]

デフォルト

0.4

gridAxis

説明

Specifies which lines should be displayed in the grid.

タイプ

ChartAxisType

デフォルト

'x'

gridProps

説明

Props passed down to recharts 'CartesianGrid' component.

タイプ

GridProps

labelFormatter

説明

A function to format labels on inside the tooltip.

タイプ

(label: string) => string

layoutType

説明

Chart orientation.

タイプ

ChartLayoutType

デフォルト

'horizontal'

legendProps

説明

Props passed down to recharts 'Legend' component.

タイプ

LegendProps

referenceLineProps

説明

Reference lines that should be displayed on the chart.

タイプ

ReferenceLineProps[]

size

説明

The size of the AreaChart.

タイプ

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

デフォルト

"full"

splitColors

説明

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

タイプ

[string, string]

デフォルト

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

splitOffset

説明

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

strokeDasharray

説明

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'

strokeWidth

説明

Stroke width for the chart areas.

タイプ

number

デフォルト

2

syncId

説明

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

tickLine

説明

The option is the configuration of tick lines.

タイプ

ChartAxisType

デフォルト

'y'

tooltipAnimationDuration

説明

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

タイプ

number

デフォルト

0

tooltipProps

説明

Props passed down to recharts 'Tooltip' component.

タイプ

TooltipProps

type

説明

Controls how chart areas are positioned relative to each other.

タイプ

AreaChartType

デフォルト

`default`

unit

説明

Unit displayed next to each tick in y-axis.

タイプ

string

valueFormatter

説明

A function to format values on inside the tooltip.

タイプ

(value: any) => string

variant

説明

The variant of the AreaChart.

タイプ

string

withActiveDots

説明

Determines whether activeDots should be displayed.

タイプ

boolean

デフォルト

true

withDots

説明

Determines whether dots should be displayed.

タイプ

boolean

デフォルト

true

withGradient

説明

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

タイプ

boolean

withLegend

説明

If true, legend is visible.

タイプ

boolean

デフォルト

false

withTooltip

説明

If true, tooltip is visible.

タイプ

boolean

デフォルト

true

withXAxis

説明

If true, X axis is visible.

タイプ

boolean

デフォルト

true

withYAxis

説明

If true, Y axis is visible.

タイプ

boolean

デフォルト

true

xAxisLabel

説明

A label to display below the X axis.

タイプ

string

xAxisLabelProps

説明

Props passed down to recharts 'XAxisLabel' component.

タイプ

LabelProps

xAxisProps

説明

Props passed down to recharts 'XAxis' component.

タイプ

XAxisProps

xAxisTickFormatter

説明

A function to format X axis tick.

タイプ

(value: any) => string

yAxisLabel

説明

A label to display below the Y axis.

タイプ

string

yAxisLabelProps

説明

Props passed down to recharts 'YAxisLabel' component.

タイプ

LabelProps

yAxisProps

説明

Props passed down to recharts 'YAxis' component.

タイプ

YAxisProps

yAxisTickFormatter

説明

A function to format Y axis tick.

タイプ

(value: any) => string

AreaProps

activeDot

タイプ

DotProps

color

タイプ

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

dimArea

タイプ

Partial<AreaProps>

dimDot

タイプ

DotProps

dot

タイプ

DotProps

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

LineChartBarChart