Props Click to collapse

• activeDotFunction | Partial<ActiveDotProps> | ReactNode | false | trueoptional

  The active dot is rendered on the closest data point when user interacts with the chart. Options:

  • false: dots do not change on user activity; both active and inactive dots follow the dot prop (see below)
  • true: renders the active dot with default settings
  • object: the props of the active dot. This will be merged with the internal calculated props of the active dot
  • ReactElement: the custom active dot element
  • function: a render function of the custom active dot

  DEFAULT: true

  FORMAT:

  <Line dataKey="value" activeDot={false} />
  <Line dataKey="value" activeDot={{ stroke: 'red', strokeWidth: 2, r: 10 }} />
  <Line dataKey="value" activeDot={CustomizedActiveDot} />

  Examples:

  • A line chart with customized active dot
  • Dashed Line Chart
  • Vertical Line Chart
  • Biaxial Line Chart
  • Vertical Line Chart With Specified Domain
  • Line Chart Connect Nulls
  • Line Chart With X Axis Padding
  • Line Chart With Reference Lines
  • Customized Dot Line Chart
  • Customized Label Line Chart

• animateNewValuesbooleanoptional

  DEFAULT: true

• animationBeginnumberoptional

  Specifies when the animation should begin, the unit of this option is ms.

  DEFAULT: 0

• animationDurationnumberoptional

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

  DEFAULT: 1500

  Examples:

  • Line that animates opacity
  • Highlight And Zoom Line Chart
  • Compare Two Lines
  • Animated Time Series

• animationEasing"ease" | "ease-in" | "ease-in-out" | "ease-out" | "linear" | "spring" | EasingFunction | `cubic-bezier(${number},${number},${number},${number})`optional

  The type of easing function.

  DEFAULT: "ease"

• animationInterpolateFnAnimationInterpolateFn<LinePointItem, CartesianLayout>optional

  Custom animation function for interpolating data items. When provided, this replaces the default animation interpolation.

  Available since Recharts 3.9

  Examples:

  • Animations guide

• animationMatchBy"append" | "index" | AnimationMatchBy<LinePointItem>optional

  Strategy for matching previous items to next items during animation. Determines how Recharts pairs old data points with new data points to create smooth transitions.

  • matchByIndex (default): match by array position with proportional stretching
  • matchAppend: match sequentially by index and treat newly appended items as new
  • matchByDataKey('someKey'): match by a data key from the payload
  • Custom function (item, index) => key: match by the returned key

  Available since Recharts 3.9

  DEFAULT: "index"

  Examples:

  • *
  • *
  • *
  • Animations guide
  • Animated Time Series

• childrenReactNodeoptional

  Examples:

  • Target Price Chart with active Label

• classNamestringoptional

• connectNullsbooleanoptional

  Whether to connect the curve across null points.

  DEFAULT: false

  Examples:

  • LineChart with connectNull true and false
  • AreaChart with connectNull true and false
  • Banded Chart

• dangerouslySetInnerHTMLObjectoptional

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

  FORMAT:

  data={[{ name: 'a', value: 12 }]}
  data={[{ label: 'foo', measurements: [5, 12] }]}

  Examples:

  • Line Chart Has Multi Series
  • Line Chart Negative Values With Reference Lines

• dataKeyTypedDataKey<DataPointType, DataValueType>optional

  The data that you provide via the data prop is an array of objects. Each object can have multiple properties, each representing a different data dimension. Use the dataKey prop to specify which property (or dimension) to use for this component.

  Typically, you will want to have one dataKey on the X axis, and different dataKey on the Y axis, where they extract different values from the same data objects.

  Decides how to extract the value from the data:

  • string: the name of the field in the data object;
  • number: the index of the field in the data;
  • function: a function that receives the data object and returns the value.

  Examples:

  • Simple Line Chart
  • Dashed Line Chart
  • Vertical Line Chart
  • Biaxial Line Chart
  • Vertical Line Chart With Specified Domain
  • Line Chart Connect Nulls
  • Line Chart With X Axis Padding
  • Line Chart With Reference Lines
  • Customized Dot Line Chart
  • Customized Label Line Chart

• dotFunction | Partial<Props> | ReactNode | false | trueoptional

  Renders a circle element at each data point. Options:

  • false: no dots are drawn;
  • true: renders the dots with default settings;
  • object: the props of the dot. This will be merged with the internal calculated props of each dot;
  • ReactElement: the custom dot element;
  • function: a render function of the custom dot.

  DEFAULT: true

  FORMAT:

  <Line dataKey="value" dot={false} />
  <Line dataKey="value" dot={{ stroke: 'red', strokeWidth: 2 }} />
  <Line dataKey="value" dot={CustomizedDot} />

  Examples:

  • A line chart with customized dot
  • Simple Line Chart
  • Dashed Line Chart
  • Vertical Line Chart
  • Biaxial Line Chart
  • Vertical Line Chart With Specified Domain
  • Line Chart With X Axis Padding
  • Line Chart With Reference Lines
  • Customized Label Line Chart
  • Highlight And Zoom Line Chart

• formatterFormatteroptional

  Formats the value displayed in the tooltip for this Line. When set, takes precedence over the formatter prop on the Tooltip component.

• hidebooleanoptional

  Hides the whole graphical element when true.

  Hiding an element is different from removing it from the chart: Hidden graphical elements are still visible in Legend, and can be included in axis domain calculations, depending on includeHidden props of your XAxis/YAxis.

  DEFAULT: false

• idstringoptional

  Unique identifier of this component. Used as an HTML attribute id, and also to identify this element internally.

  If undefined, Recharts will generate a unique ID automatically.

• isAnimationActive"auto" | false | trueoptional

  If set false, animation of line will be disabled. If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.

  DEFAULT: "auto"

  Examples:

  • Vertical Line Chart
  • Vertical Line Chart With Specified Domain
  • Target Price Chart with active Label

• labelFunction | Props | ReactNode | false | trueoptional

  Renders one label for each data point. Options:

  • true: renders default labels;
  • false: no labels are rendered;
  • object: the props of LabelList component;
  • ReactElement: a custom SVG label element, such as <text> or <g>. HTML elements such as <div> are not valid inside the chart SVG and may trigger React DOM warnings.
  • function: a render function of custom label.

  DEFAULT: false

  FORMAT:

  <Line dataKey="value" label />
  <Line dataKey="value" label={{ fill: 'red', fontSize: 20 }} />
  <Line dataKey="value" label={CustomizedLabel} />

  Examples:

  • A line chart with customized label

• legendType"circle" | "cross" | "diamond" | "line" | "none" | "plainline" | "rect" | "square" | "star" | "triangle" | "wye"optional

  The type of icon in legend. If set to 'none', no legend item will be rendered.

  DEFAULT: "line"

  Examples:

  • Scatter And Line Of Best Fit

• namestringoptional

  The name of data. This option will be used in tooltip and legend to represent this graphical item. If no value was set to this option, the value of dataKey will be used alternatively.

  Examples:

  • Line Chart Has Multi Series
  • Compare Two Lines
  • Legend Position

• pathstringoptional

• shape(union of 5 variants)optional

  If set a ReactElement, the shape of line can be customized. If set a function, the function will be called to render customized shape.

  During animations the shape receives additional props: animationElapsedTime, isAnimating, and isEntrance. When a custom shape is provided, the built-in stroke-dasharray entrance animation is skipped.

  FORMAT:

  <Line dataKey="value" shape={CustomizedShapeComponent} />
  <Line dataKey="value" shape={renderShapeFunction} />

  Examples:

  • Line that animates opacity

• strokestringoptional

  The stroke color. If "none", no line will be drawn.

  DEFAULT: "#3182bd"

  Examples:

  • Simple Line Chart
  • Dashed Line Chart
  • Vertical Line Chart
  • Biaxial Line Chart
  • Vertical Line Chart With Specified Domain
  • Line Chart Connect Nulls
  • Line Chart With X Axis Padding
  • Line Chart With Reference Lines
  • Customized Dot Line Chart
  • Customized Label Line Chart

• strokeDasharraynumber | stringoptional

  The pattern of dashes and gaps used to paint the line.

  FORMAT:

  strokeDasharray="5 5"
  strokeDasharray={10}
  <Line strokeDasharray="4" />
  <Line strokeDasharray="4 1" />
  <Line strokeDasharray="4 1 2" />

  Examples:

  • https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
  • Dashed Line Chart
  • Compare Two Lines

• strokeWidthnumber | stringoptional

  The width of the stroke

  DEFAULT: 1

  Examples:

  • Line that animates opacity
  • Line Chart Negative Values With Reference Lines
  • Compare Two Lines
  • Tiny Line Chart
  • Animated Time Series

• tooltipType"none"optional

  Examples:

  • Line Chart Negative Values With Reference Lines

• type"basis" | "basisClosed" | "basisOpen" | "bump" | "bumpX" | "bumpY" | "linear" | "linearClosed" | "monotone" | "monotoneX" | "monotoneY" | "natural" | "step" | "stepAfter" | "stepBefore" | CurveFactoryoptional

  The interpolation type of curve. Allows custom interpolation function.

  DEFAULT: "linear"

  Examples:

  • An AreaChart which has two area with different interpolation.
  • https://d3js.org/d3-shape/curve
  • Simple Line Chart
  • Dashed Line Chart
  • Biaxial Line Chart
  • Line Chart Connect Nulls
  • Line Chart With X Axis Padding
  • Line Chart With Reference Lines
  • Customized Dot Line Chart
  • Customized Label Line Chart
  • Synchronized Line Chart
  • Line that animates opacity

• unitnull | number | stringoptional

  The unit of data. This option will be used in tooltip.

• xAxisIdnumber | stringoptional

  The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.

  DEFAULT: 0

  Examples:

  • Multiple X Axes

• yAxisIdnumber | stringoptional

  The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.

  DEFAULT: 0

  Examples:

  • Biaxial Line Chart
  • Highlight And Zoom Line Chart

• zIndexnumberoptional

  Z-Index of this component and its children. The higher the value, the more on top it will be rendered. Components with higher zIndex will appear in front of components with lower zIndex. If undefined or 0, the content is rendered in the default layer without portals.

  Available since Recharts 3.4

  DEFAULT: 400

  Examples:

  • Z-Index and layers guide
  • Dynamic Z-Index Line Chart

Events Click to expand