Leave Yamada UI a star

Star
Yamada UIYamada UIv1.5.1

LineChart

LineChart is a component for drawing line charts to compare multiple sets of data.

Source@yamada-ui/charts

Props

LineChartProps

data

Required

Description

Chart data.

Type

Dict[]

dataKey

Required

Description

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

Type

string

series

Required

Description

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

Type

LineProps[]

chartProps

Description

Props passed down to recharts LineChart component.

Type

LineChartProps

colorScheme

Description

The visual color appearance of the component.

Type

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

connectNulls

Description

Determines whether points with null values should be connected.

Type

boolean

Default

true

containerProps

Description

Props passed down to recharts ResponsiveContainer component.

Type

ResponsiveContainerProps

curveType

Description

Type of the curve.

Type

ChartCurveType

Default

`monotone`

gridAxis

Description

Specifies which lines should be displayed in the grid.

Type

ChartAxisType

Default

'x'

gridProps

Description

Props passed down to recharts 'CartesianGrid' component.

Type

GridProps

labelFormatter

Description

A function to format labels on inside the tooltip.

Type

(label: string) => string

layoutType

Description

Chart orientation.

Type

ChartLayoutType

Default

'horizontal'

legendProps

Description

Props passed down to recharts 'Legend' component.

Type

LegendProps

lineProps

Description

Props for the lines.

Type

Partial<LineProps>

referenceLineProps

Description

Reference lines that should be displayed on the chart.

Type

ReferenceLineProps[]

size

Description

The size of the LineChart.

Type

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

Default

full

syncId

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

tickLine

Description

The option is the configuration of tick lines.

Type

ChartAxisType

Default

'y'

tooltipAnimationDuration

Description

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

Type

number

Default

0

tooltipProps

Description

Props passed down to recharts 'Tooltip' component.

Type

TooltipProps

type

Description

Controls how chart areas are positioned relative to each other

Type

AreaChartType

Default

`default`

unit

Description

Unit displayed next to each tick in y-axis.

Type

string

valueFormatter

Description

A function to format values on inside the tooltip.

Type

(value: any) => string

variant

Description

The variant of the LineChart.

Type

string

withActiveDots

Description

Determines whether activeDots should be displayed.

Type

boolean

Default

true

withDots

Description

Determines whether dots should be displayed.

Type

boolean

Default

true

withLegend

Description

If true, legend is visible.

Type

boolean

Default

false

withTooltip

Description

If true, tooltip is visible.

Type

boolean

Default

true

withXAxis

Description

If true, X axis is visible.

Type

boolean

Default

true

withYAxis

Description

If true, Y axis is visible.

Type

boolean

Default

true

xAxisLabel

Description

A label to display below the X axis.

Type

string

xAxisLabelProps

Description

Props passed down to recharts 'XAxisLabel' component.

Type

LabelProps

xAxisProps

Description

Props passed down to recharts 'XAxis' component.

Type

XAxisProps

xAxisTickFormatter

Description

A function to format X axis tick.

Type

(value: any) => string

yAxisLabel

Description

A label to display below the Y axis.

Type

string

yAxisLabelProps

Description

Props passed down to recharts 'YAxisLabel' component.

Type

LabelProps

yAxisProps

Description

Props passed down to recharts 'YAxis' component.

Type

YAxisProps

yAxisTickFormatter

Description

A function to format Y axis tick.

Type

(value: any) => string

LineProps

activeDot

Type

DotProps

color

Type

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

dimDot

Type

DotProps

dimLine

Type

Partial<LineProps>

dot

Type

DotProps

DotProps

Edit this page on GitHub

PreviousCalendarNextAreaChart