BarChart

BarChartは、複数のデータを比較するための棒グラフを描画するコンポーネントです。

ソース @yamada-ui/charts

Props

BarChartProps

説明

Chart data.

タイプ

Dict[]

説明

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

タイプ

string

説明

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

タイプ

BarProps[]

説明

Props for the bars.

タイプ

Partial<BarProps>

説明

A function that returns a component that renders the bar cells.

タイプ

string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | FC<...>

説明

Props passed down to recharts BarChart component.

タイプ

BarChartProps

説明

The visual color appearance of the component.

タイプ

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

説明

Props passed down to recharts ResponsiveContainer component.

タイプ

ResponsiveContainerProps

説明

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 BarChart.

タイプ

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

デフォルト

full

説明

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 bars are positioned relative to each other. Controls how chart areas are positioned relative to each other

タイプ

"default" | "stacked" | "percent"

デフォルト

`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 BarChart.

タイプ

string

説明

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

BarProps

タイプ

Merge<SVGProps<SVGPathElement>, CSSUIProps>

タイプ

Merge<SVGProps<SVGPathElement>, CSSUIProps>

タイプ

UIValue<"border" | "link" | Color | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | ... 319 more ... | "link.950">

タイプ

Partial<BarProps>

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

前AreaChart 次PieChart