Recharts

LineChart

父组件

LineChart consumes context provided by these components:

<ResponsiveContainer />

子组件

LineChart provides context for these components:

Props

accessibilityLayerbooleanoptional
Turn on accessibility support for keyboard-only and screen reader users.
默认值：true
barCategoryGapnumber | stringoptional
The gap between two bar categories, which can be a percent value or a fixed value.
默认值："10%"
示例：
- Bar Alignment Guide
barGapnumber | stringoptional
The gap between two bars in the same category.
默认值：4
示例：
- Bar Alignment Guide
barSizenumber | stringoptional
The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
baseValue"dataMax" | "dataMin" | numberoptional
Configures the starting value used to build the internal baseline for non-ranged, non-stacked areas.
WARNING despite the name dataMin|dataMax this actually reads the domain instead, so it should rather bedomainMin|domainMax. This looks like a small detail, but it's actually important because domains are usually extended automatically. For example the default numerical domain starts from 0.
- number: uses the corresponding axis value as a flat baseline
- dataMin: uses the minimum of the value-axis domain
- dataMax: uses the maximum of the value-axis domain
This uses the same BaseValue resolution as the baseValue prop on <Area />, but acts as a fallback: item-level Area.baseValue takes precedence over the chart-level baseValue.
Ignored for stacked areas and for ranged areas where dataKey already returns [min, max] tuples.
Note that the baseValue does not interact with animationInterpolateFn; baseValue is always animated by linear interpolation. If you want a custom animation then have your dataKey return a tuple of two values instead of a single number which will also render a ranged Area, and that does work with your custom animationInterpolateFn.
childrenReactNodeoptional
示例：
classNamestringoptional
compactbooleanoptional
cursor(union of 45 variants)optional
The CSS cursor style applied to the chart container. Useful for setting the mouse cursor when hovering over the chart (e.g. "pointer", "crosshair").
dataReadonlyArray<DataPointType>optional
The source data. Each element should be an object. The properties of each object represent the values of different data dimensions.
Use the dataKey prop to specify which properties to use.
格式：
```
data={[{ name: 'a', value: 12 }]}
data={[{ label: 'foo', measurements: [5, 12] }]}
```
示例：
dataKeyFunction | number | stringoptional
descstringoptional
height`${number}%` | numberoptional
The height of chart container. Can be a number or a percent string like "100%".
示例：
- Chart sizing guide
idstringoptional
layout"horizontal" | "vertical"optional
The layout of chart defines the orientation of axes, graphical items, and tooltip.
默认值："horizontal"
示例：
- Vertical Line Chart
- Vertical Line Chart With Specified Domain
marginPartial<Margin>optional
Empty space around the container.
默认值：{"top":5,"right":5,"bottom":5,"left":5}
示例：
maxBarSizenumberoptional
The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart.
refFunction | React.RefObject<SVGSVGElement> | nulloptional
responsivebooleanoptional
If true, then it will listen to container size changes and adapt the SVG chart accordingly. If false, then it renders the chart at the specified width and height and will stay that way even if the container size changes.
This is similar to ResponsiveContainer but without the need for an extra wrapper component. The responsive prop also uses standard CSS sizing rules, instead of custom resolution logic (like ResponsiveContainer does).
默认值：false
示例：
reverseStackOrderbooleanoptional
If false, stacked items will be rendered left to right. If true, stacked items will be rendered right to left.
Render direction affects SVG layering, not x position.
默认值：false
rolestringoptional
The ARIA role for the chart, which provides semantic information for screen reader users.
stackOffset"expand" | "none" | "positive" | "sign" | "silhouette" | "wiggle"optional
The type of offset function used to generate the lower and upper values in the series array. The types are built-in offsets in d3-shape. Only applicable for stacked Area or Bar charts. Has no effect when the stackId prop is not set on Area or Bar components.
默认值："none"
示例：
- Chart with stackOffset=sign example
- https://d3js.org/d3-shape/stack#stack_offset
styleReact.CSSPropertiesoptional
示例：
syncIdnumber | stringoptional
Charts with the same syncId will synchronize Tooltip and Brush events.
示例：
- Synchronized Charts Example
- Synchronized Line Chart
syncMethod"index" | "value" | Functionoptional
Customize how the charts will synchronize tooltips and brushes.index: synchronize using the data index in the data array. Index expects that all data has the same length.value: synchronize using the data value on categorical axis (categorical: XAxis in horizontal layout, YAxis in vertical layout). function: a custom sync method which receives tick and data as argument and returns an index.
默认值："index"
tabIndexnumberoptional
If and where the chart should appear in the tab order
throttleDelay"raf" | numberoptional
Decides the time interval to throttle events. Only events defined in throttledEvents prop are throttled. All other events are executed immediately/synchronously.
Options:
- number: the time interval in milliseconds
- 'raf': use requestAnimationFrame to schedule updates.
默认值："raf"
throttledEvents"all" | Array<keyof GlobalEventHandlersEventMap>optional
Defines which events should be throttled. Events not in this list will not be throttled.
Use the special value 'all' to throttle all events. Empty array means no events are throttled.
Use the prop throttleDelay to define the throttling interval.
If an event is on this list, then you lose the opportunity to access the event synchronously. Which means that if you want to call e.preventDefault() or e.stopPropagation() inside the event handler, then that event handler must not be in this list.
默认值：["mousemove","touchmove","pointermove","scroll","wheel"]
titlestringoptional
width`${number}%` | numberoptional
The width of chart container. Can be a number or a percent string like "100%".
示例：
- Chart sizing guide
onClickCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional
The customized event handler of click in this chart.
onContextMenuCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional
The customized event handler of contextmenu in this chart.
onDoubleClickCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional
The customized event handler of dblclick in this chart.
onMouseDownCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional
The customized event handler of mousedown in this chart.
示例：
- Highlight And Zoom Line Chart
onMouseEnterCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional
The customized event handler of mouseenter in this chart.
onMouseLeaveCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional
The customized event handler of mouseleave in this chart.
示例：
- Compare Two Lines
onMouseMoveCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional
The customized event handler of mousemove in this chart.
示例：
- Highlight And Zoom Line Chart
- Compare Two Lines
onMouseUpCategoricalChartFunc<React.MouseEvent<SVGGraphicsElement, MouseEvent>>optional
The customized event handler of mouseup in this chart.
示例：
- Highlight And Zoom Line Chart
onTouchEndCategoricalChartFunc<React.TouchEvent<SVGGraphicsElement>>optional
The customized event handler of touchend in this chart.
onTouchMoveCategoricalChartFunc<React.TouchEvent<SVGGraphicsElement>>optional
The customized event handler of touchmove in this chart.
onTouchStartCategoricalChartFunc<React.TouchEvent<SVGGraphicsElement>>optional
The customized event handler of touchstart in this chart.

API

图表类型

通用组件

笛卡尔坐标系组件

极坐标系组件

图形

动画

LineChart

相关链接

父组件

子组件

Props