Area

Learn how to apply styles to your Area component in Recharts

Installation

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

Usage

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

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

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

<Area 
    className={area({ intent: "primary" })}
    fill="currentColor"
    stroke="currentColor"
    activeDot={{ color: "var(--area-primary-stroke)", r: 4, stroke: "white" }}
    dataKey="Primary"
/>

Reference

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

Prop
Type
Default
intent
enum
primary

Examples

Custom Linear Gradient

import { ResponsiveContainer, AreaChart, Area, Tooltip } from 'recharts';
import { CustomTooltip, LinearGradient } from "@tailus-ui/visualizations";
import { area, cartesianGrid } from "@tailus/themer";

const data = [];

export const MyChart = () => {
    return (
        <div className="h-72 w-full sm:max-w-2xl sm:min-w-[36rem]">
            <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={data}>
                    <defs>
                        <LinearGradient intent="secondary" id="Secondary" />
                    </defs>

                    <Tooltip
                        cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }}
                        content={
                            <Custom payload={[]} active fancy label={""}/>
                        }
                    />

                    <CartesianGrid
                        className={cartesianGrid()}
                        horizontal={false}
                        stroke="currentColor"
                        strokeDasharray={3}
                    />
                    
                    <Area
                        className={area({ intent: "secondary" })
                        stroke="currentColor"
                        fill="url(#Secondary)"
                        dataKey="Primary"
                        activeDot={
                            {
                                color: "var(--area-secondary-stroke)",
                                r: 3,
                                stroke: "white"
                            }
                        }
                    />
                </AreaChart>
            </ResponsiveContainer>
        </div>
    )
}

See more examples on the AreaChart page