Line

Learn how to apply styles to your Line components in Recharts

Installation

No installation is required for the Line component. You can use it directly in your project.

Usage

Import the <Line /> component from the recharts library and the area styles from @tailus/themer.

import { Line } from 'recharts';
import { area } from "@tailus/themer";

To change the color of the line in the <Line /> component, set the stroke prop to currentColor and apply the area styles to the className prop. You can further customize the line dot by setting the fill prop.

<Line 
    type="monotone"
    className={area({ intent: "primary" })}
    stroke="currentColor"
    fill="url(#dotFill)"
    dataKey="Primary"
    activeDot={
        {
            r:4,
            color:"var(--area-primary-stroke)",
            stroke:"currentColor"
        }
    }
/>

The fill is used as the background of the dot, and the activeDot is used to customize the active dot on hover.

Reference

Although we didn’t create a custom Line component, you can change the Line component’s color using the area styles, its intent variant and CSS variables to customize the activeDot.

Prop
Type
Default
intent
enum
primary

The available CSS variables for customizing the activeDot are as follows:

  • --area-primary-stroke
  • --area-secondary-stroke
  • --area-accent-stroke
  • --area-gray-stroke
  • --area-neutral-stroke

Examples

See the LineChart example on the Line Chart page