Scatter

Learn how to apply styles to your Scatter component in Recharts

Installation

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

Usage

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

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

To change the color of the <Scatter /> component, set the fill prop to currentColor and apply the area styles to the className prop.

<Scatter 
    className={area({ gradient:true, intent: "primary" })}
    fill="currentColor"
    dataKey="Primary"
/>

To maintain the original opacity of the fill color in the area styles, set the gradient variant to true. This prevents the fill color from becoming less opaque.

Reference

Although we didn’t create a custom Scatter component, you can change the component’s color using the intent variant of the area styles.

Prop
Type
Default
intent
enum
primary

Examples

See more examples on the ScatterChart page