data
RequiredDescription
Chart data.
Type
Dict<any>[]LineChart
LineChart is a component for drawing line charts to compare multiple sets of data.
Props
LineChartProps
dataKey
RequiredDescription
The key of a group of data which should be unique in an chart.
Type
stringseries
RequiredDescription
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
LineChartPropscolorScheme
Description
The visual color appearance of the component.
Type
"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
Description
Determines whether points with null values should be connected.
Type
booleanDefault
truecontainerProps
Description
Props passed down to recharts ResponsiveContainer component.
Type
ResponsiveContainerPropscurveType
Description
Type of the curve.
Type
ChartCurveTypeDefault
`monotone`fillOpacity
Description
Controls fill opacity of all lines.
Type
number | [number, number]Default
1gridAxis
Description
Specifies which lines should be displayed in the grid.
Type
ChartAxisTypeDefault
'x'gridProps
Description
Props passed down to recharts 'CartesianGrid' component.
Type
GridPropslabelFormatter
Description
A function to format labels on inside the tooltip.
Type
(label: string) => stringlayoutType
Description
Chart orientation.
Type
ChartLayoutTypeDefault
'horizontal'legendProps
Description
Props passed down to recharts 'Legend' component.
Type
LegendPropslineProps
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"strokeDasharray
Description
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.
Type
string | numberDefault
'5 5'strokeWidth
Description
Stroke width for the chart lines.
Type
numberDefault
2syncId
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 | numbertickLine
Description
The option is the configuration of tick lines.
Type
ChartAxisTypeDefault
'y'tooltipAnimationDuration
Description
Specifies the duration of animation, the unit of this option is ms.
Type
numberDefault
0tooltipProps
Description
Props passed down to recharts 'Tooltip' component.
Type
TooltipPropstype
Description
Controls how chart areas are positioned relative to each other
Type
AreaChartTypeDefault
`default`unit
Description
Unit displayed next to each tick in y-axis.
Type
stringvalueFormatter
Description
A function to format values on inside the tooltip.
Type
(value: any) => stringvariant
Description
The variant of the LineChart.
Type
stringwithActiveDots
Description
Determines whether activeDots should be displayed.
Type
booleanDefault
truewithDots
Description
Determines whether dots should be displayed.
Type
booleanDefault
truewithLegend
Description
If true, legend is visible.
Type
booleanDefault
falsewithTooltip
Description
If true, tooltip is visible.
Type
booleanDefault
truewithXAxis
Description
If true, X axis is visible.
Type
booleanDefault
truewithYAxis
Description
If true, Y axis is visible.
Type
booleanDefault
truexAxisLabel
Description
A label to display below the X axis.
Type
stringxAxisLabelProps
Description
Props passed down to recharts 'XAxisLabel' component.
Type
LabelPropsxAxisProps
Description
Props passed down to recharts 'XAxis' component.
Type
XAxisPropsxAxisTickFormatter
Description
A function to format X axis tick.
Type
(value: any) => stringyAxisLabel
Description
A label to display below the Y axis.
Type
stringyAxisLabelProps
Description
Props passed down to recharts 'YAxisLabel' component.
Type
LabelPropsyAxisProps
Description
Props passed down to recharts 'YAxis' component.
Type
YAxisPropsyAxisTickFormatter
Description
A function to format Y axis tick.
Type
(value: any) => stringLineProps
activeDot
Type
DotPropscolor
Type
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">dimDot
Type
DotPropsdimLine
Type
Partial<LineProps>dot
Type
DotPropsDotProps
Edit this page on GitHub