Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.3.10

AreaChart

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

ソース@yamada-ui/charts

Props

AreaChartProps

data

必須

説明

Chart data.

タイプ

Dict[]

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.

タイプ

(Omit<Omit<CSSUIProps, "string" | "offset" | "style" | "children" | "onClick" | "onMouseLeave" | "onMouseEnter" | "onMouseMove" | "onMouseDown" | "onMouseUp" | "cx" | ... 457 more ... | keyof AreaProps> & Omit<...> & AreaProps, "color" | ... 3 more ... | "dimArea"> & { ...; })[]

areaProps

説明

Props for the areas.

タイプ

Partial<Omit<Omit<CSSUIProps, "string" | "offset" | "style" | "children" | "onClick" | "onMouseLeave" | "onMouseEnter" | "onMouseMove" | "onMouseDown" | "onMouseUp" | ... 458 more ... | keyof AreaProps> & Omit<...> & AreaProps, "color" | ... 3 more ... | "dimArea"> & { ...; }>

chartProps

説明

Props passed down to recharts AreaChart component.

タイプ

Omit<CSSUIProps, keyof CategoricalChartProps> & CategoricalChartProps

colorScheme

説明

The visual color appearance of the component.

タイプ

"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "rose" | "pink" | "flashy" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia"

connectNulls

説明

Determines whether points with null values should be connected.

タイプ

boolean

デフォルト

true

containerProps

説明

Props passed down to recharts ResponsiveContainer component.

タイプ

Omit<CSSUIProps, "width" | "height" | "style" | "className" | "id" | "maxHeight" | "minHeight" | "minWidth" | "onResize" | "aspect" | "initialDimension" | "debounce"> & Omit<...>

curveType

説明

Type of the curve.

タイプ

ChartCurveType

デフォルト

`monotone`

gridAxis

説明

Specifies which lines should be displayed in the grid.

タイプ

ChartAxisType

デフォルト

'x'

gridProps

説明

Props passed down to recharts 'CartesianGrid' component.

タイプ

Omit<CSSUIProps, "string" | "style" | "className" | "children" | "onClick" | "onMouseLeave" | "onMouseEnter" | "onMouseMove" | "onMouseDown" | "onMouseUp" | "id" | ... 461 more ... | keyof CartesianGridProps> & AcceptedSvgProps & CartesianGridProps

layoutType

説明

Chart orientation.

タイプ

ChartLayoutType

デフォルト

'horizontal'

legendProps

説明

Props passed down to recharts 'Legend' component.

タイプ

Omit<CSSUIProps, "string" | "offset" | "width" | "height" | "margin" | "style" | "className" | "children" | "onMouseMove" | "onMouseDown" | "onMouseUp" | "id" | "cx" | ... 416 more ... | "onBBoxUpdate"> & Omit<...>

referenceLineProps

説明

Reference lines that should be displayed on the chart.

タイプ

(Omit<CSSUIProps, "string" | "offset" | "width" | "height" | "style" | "children" | "onClick" | "onMouseLeave" | "onMouseEnter" | "onMouseMove" | "onMouseDown" | ... 462 more ... | keyof ReferenceLineProps> & Omit<...> & 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

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.

タイプ

Omit<Omit<CSSUIProps, "offset" | "animationDuration" | "content" | "cursor" | "position" | "viewBox" | "isAnimationActive" | "animationEasing" | keyof Props<any, any> | ... 11 more ... | "wrapperStyle"> & Omit<...>, "cursor"> & { ...; }

type

説明

Controls how chart areas are positioned relative to each other. 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 Y axis and inside the tooltip

タイプ

(value: number) => 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

xAxisProps

説明

Props passed down to recharts 'XAxis' component.

タイプ

Omit<Omit<CSSUIProps, "string" | "offset" | "style" | "children" | "onClick" | "onMouseLeave" | "onMouseEnter" | "onMouseMove" | "onMouseDown" | "onMouseUp" | "id" | ... 459 more ... | keyof XAxisProps> & Omit<...> & XAxisProps, "color" | ... 1 more ... | "stroke"> & { ...; }

yAxisProps

説明

Props passed down to recharts 'YAxis' component.

タイプ

Omit<Omit<CSSUIProps, "string" | "offset" | "style" | "children" | "onClick" | "onMouseLeave" | "onMouseEnter" | "onMouseMove" | "onMouseDown" | "onMouseUp" | "id" | ... 459 more ... | keyof YAxisProps> & Omit<...> & YAxisProps, "color"> & { ...; }

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

前Alert次BarChart