API

Charts

General Components

Cartesian Components

Polar Components

Shapes

Animation

ReferenceLine

Draws a line on the chart connecting two points.

This component, unlike line, is aware of the cartesian coordinate system, so you specify the dimensions by using data coordinates instead of pixels.

ReferenceLine will calculate the pixels based on the provided data coordinates.

If you prefer to render using pixels rather than data coordinates, consider using the line SVG element instead.

Related Links

import { AreaChart, ReferenceLine, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';

// #region Sample data
const data = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: 'Page E',
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: 'Page F',
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: 'Page G',
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];

// #endregion
const ReferenceLineExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => (
  <AreaChart
    style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
    responsive
    data={data}
    margin={{
      top: 20,
      right: 0,
      left: 0,
      bottom: 0,
    }}
  >
    <XAxis dataKey="name" />
    <YAxis width="auto" />
    <CartesianGrid />
    <Tooltip />
    <Area type="monotone" dataKey="uv" fillOpacity={0.3} isAnimationActive={isAnimationActive} />
    <ReferenceLine
      x="Page C"
      stroke="green"
      label={{ value: 'prop `x` creates vertical lines', position: 'insideTop', offset: 70 }}
    />
    <ReferenceLine
      y={4000}
      label={{ value: 'prop `y` creates horizontal lines', position: 'insideTopRight' }}
      stroke="red"
      strokeDasharray="3 3"
    />
    <ReferenceLine
      label={{ value: 'prop `segment` connects two arbitrary points', position: 'middle' }}
      stroke="green"
      strokeDasharray="3 3"
      segment={[
        { x: 'Page D', y: 0 },
        { x: 'Page F', y: 1500 },
      ]}
    />
    <RechartsDevtools />
  </AreaChart>
);

export default ReferenceLineExample;
import { ReferenceLine, XAxis, YAxis, CartesianGrid, Tooltip, BarChart, Bar } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';

// #region Sample data
const smallData = [
  {
    name: 'Page A',
    pv: 2400,
  },
  {
    name: 'Page B',
    pv: 1398,
  },
  {
    name: 'Page C',
    pv: 9800,
  },
];

// #endregion
export const ReferenceLinePositionExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => (
  <BarChart
    style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
    responsive
    data={smallData}
  >
    <XAxis dataKey="name" />
    <YAxis width="auto" />
    <CartesianGrid />
    <Tooltip />
    <ReferenceLine x="Page B" label={{ value: 'position: start' }} position="start" />
    <ReferenceLine x="Page B" label={{ value: 'position: middle' }} position="middle" />
    <ReferenceLine x="Page B" label={{ value: 'position: end' }} position="end" />
    <Bar dataKey="pv" fillOpacity={0.3} isAnimationActive={isAnimationActive} />
    <RechartsDevtools />
  </BarChart>
);

export default ReferenceLinePositionExample;

Parent Components

ReferenceLine consumes context provided by these components:

Child Components

ReferenceLine provides context for these components: