Area Chart

Some examples of how to use the AreaChart component

Simple

Overview

Visualize your main activities data

5649336%

import { CustomTooltip, data } from "@tailus-ui/visualizations";
import { ResponsiveContainer, AreaChart, Area, Tooltip, YAxis, XAxis, CartesianGrid } from 'recharts';
import { Text, Title } from '@tailus-ui/typography';
import Badge from '@tailus-ui/Badge';
import { TrendingDown, TrendingUp } from 'lucide-react';

export const MyChart = () => {
    return (
        <div className="w-full">
            <Title as="h2" size="lg" weight="medium" className="mb-1">
                Overview
            </Title>
            <Text className="mb-0 mt-1" size="sm">
                Visualize your main activities data
            </Text>
            <Title className="mt-2 flex items-center gap-3" as="span" weight="medium" size="xl">
                56493
                <Badge intent="success" size="xs" className="flex h-fit items-center gap-1.5">
                    <TrendingUp className="size-3.5" />
                    36%
                </Badge>
            </Title>
            <div className="mt-6 h-56 sm:h-72 w-full sm:max-w-2xl sm:min-w-[36rem]">
                <ResponsiveContainer width="100%" height="100%">
                    <AreaChart data={data}>
                        <YAxis className="text-caption" fontSize={12} tickLine={false} axisLine={false} />
                        <XAxis className="text-caption" dataKey="name" fontSize={12} tickLine={false} axisLine={false} />
                        <Tooltip cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }} content={<CustomTooltip payload={[]} mixed label={''} />} />
                        <CartesianGrid horizontal={false} stroke="var(--ui-border-color)" strokeDasharray={3} />

                        <Area
                            fill="var(--dv-primary)"
                            stroke="var(--dv-primary)"
                            fillOpacity={0.1}
                            dataKey="Primary"
                            activeDot={{
                                color: 'var(--dv-primary)',
                                r: 3,
                                stroke: 'white'
                            }}
                        />
                    </AreaChart>
                </ResponsiveContainer>
            </div>
        </div>
    )
}

Two Areas

Visitors and Revenue

New users by First user primary channel group (Default Channel Group)

Visitors5649336%

Revenue$430036%

import { CustomTooltip, data } from "@tailus-ui/visualizations";
import { ResponsiveContainer, AreaChart, Area, Tooltip, YAxis, XAxis, CartesianGrid } from 'recharts';
import { Caption, Text, Title } from '@tailus-ui/typography';
import Badge from '@tailus-ui/Badge';
import { TrendingDown, TrendingUp } from 'lucide-react';

export const MyChart = () => {
    return (
        <div>
            <Title as="h2" size="lg" weight="medium" className="mb-1">
                Visitors and Revenue
            </Title>
            <Text className="mb-0 mt-1" size="sm">
                New users by First user primary channel group (Default Channel Group)
            </Text>

            <div className="mb-8 mt-6 grid max-w-2xl grid-cols-3 gap-6 divide-y sm:divide-x sm:divide-y-0">
                <div>
                    <Caption as="span">Visitors</Caption>
                    <Title className="mt-2 flex items-center gap-3" as="span" weight="medium" size="lg">
                        56493
                        <Badge intent="success" size="xs" className="flex h-fit items-center gap-1.5">
                            <TrendingUp className="size-3.5" />
                            36%
                        </Badge>
                    </Title>
                </div>

                <div className="px-6">
                    <Caption as="span">Revenue</Caption>
                    <Title className="mt-2 flex items-center gap-3" as="span" weight="medium" size="lg">
                        $4300
                        <Badge intent="danger" size="xs" className="flex h-fit items-center gap-1.5">
                            <TrendingDown className="size-3.5" />
                            36%
                        </Badge>
                    </Title>
                </div>
            </div>
            <div className="h-56 sm:h-72 w-full sm:max-w-2xl sm:min-w-[36rem]">
                <ResponsiveContainer width="100%" height="100%">
                    <AreaChart data={data}>
                        <YAxis className="text-caption" fontSize={12} tickLine={false} axisLine={false} />
                        <XAxis className="text-caption" dataKey="name" fontSize={12} tickLine={false} axisLine={false} />
                        <Tooltip cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }} content={<CustomTooltip payload={[]} mixed label={''} />} />

                        <CartesianGrid horizontal={false} stroke="var(--ui-border-color)" strokeDasharray={3} />

                        <Area
                            fill="var(--dv-primary)"
                            stroke="var(--dv-primary)"
                            fillOpacity={0.05}
                            dataKey="Gray"
                            activeDot={{
                                color: 'var(--dv-primary)',
                                r: 3,
                                stroke: 'white'
                            }}
                        />
                        <Area
                            fill="var(--dv-accent)"
                            stroke="var(--dv-accent)"
                            fillOpacity={0.1}
                            dataKey="Primary"
                            activeDot={{
                                color: 'var(--dv-accent)',
                                r: 3,
                                stroke: 'white'
                            }}
                        />
                    </AreaChart>
                </ResponsiveContainer>
            </div>
        </div>
    )
}

Stacked

Visitors and Revenue

New users by First user primary channel group (Default Channel Group)

Visitors5649336%

Revenue$430036%

Savings$13006%

import { CustomTooltip, data } from "@tailus-ui/visualizations";
import { ResponsiveContainer, AreaChart, Area, Tooltip, YAxis, XAxis, CartesianGrid } from 'recharts';
import { Caption, Text, Title } from '@tailus-ui/typography';
import Badge from '@tailus-ui/Badge';
import { TrendingDown, TrendingUp } from 'lucide-react';

export const MyChart = () => {
    return (
        <div>
            <Title as="h2" size="lg" weight="medium" className="mb-1">
                Visitors and Revenue
            </Title>
            <Text className="mb-0 mt-1" size="sm">
                New users by First user primary channel group (Default Channel Group)
            </Text>

            <div className="my-6 grid max-w-2xl grid-cols-3 gap-6 divide-y border-y py-6 sm:divide-x sm:divide-y-0">
                <div>
                    <Caption as="span">Visitors</Caption>
                    <Title className="mt-2 flex items-center gap-3" as="span" weight="medium" size="lg">
                        56493
                        <Badge intent="success" size="xs" className="flex h-fit items-center gap-1.5">
                            <TrendingUp className="size-3.5" />
                            36%
                        </Badge>
                    </Title>
                </div>

                <div className="px-6">
                    <Caption as="span">Revenue</Caption>
                    <Title className="mt-2 flex items-center gap-3" as="span" weight="medium" size="lg">
                        $4300
                        <Badge intent="danger" size="xs" className="flex h-fit items-center gap-1.5">
                            <TrendingDown className="size-3.5" />
                            36%
                        </Badge>
                    </Title>
                </div>

                <div className="pl-6">
                    <Caption as="span">Savings</Caption>
                    <Title className="mt-2 flex items-center gap-3" as="span" weight="medium" size="lg">
                        $1300
                        <Badge intent="success" size="xs" className="flex h-fit items-center gap-1.5">
                            <TrendingUp className="size-3.5" />
                            6%
                        </Badge>
                    </Title>
                </div>
            </div>

            <div className="mt-6 h-56 w-full sm:h-72 sm:max-w-xl">
                <ResponsiveContainer width="100%" height="100%">
                    <AreaChart data={data}>
                        <YAxis className="text-caption" width={40} fontSize={12} tickLine={false} axisLine={false} />
                        <XAxis className="text-caption" dataKey="name" fontSize={12} tickLine={false} axisLine={false} />
                        <Tooltip cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }} content={<CustomTooltip payload={[]} mixed label={''} />} />
                        <CartesianGrid horizontal={false} stroke="var(--ui-border-color)" strokeDasharray={3} />

                        <Area
                            fill="var(--dv-gray)"
                            stroke="var(--dv-gray)"
                            fillOpacity={0.1}
                            dataKey="Neutral"
                            activeDot={{
                                color: 'var(--dv-gray)',
                                r: 3,
                                stroke: 'white'
                            }}
                            stackId="1"
                        />
                        <Area
                            fill="var(--dv-primary)"
                            stroke="var(--dv-primary)"
                            fillOpacity={0.1}
                            dataKey="Gray"
                            activeDot={{
                                color: 'var(--dv-primary)',
                                r: 3,
                                stroke: 'white'
                            }}
                            stackId="1"
                        />
                        <Area
                            fill="var(--dv-accent)"
                            stroke="var(--dv-accent)"
                            fillOpacity={0.1}
                            dataKey="Primary"
                            activeDot={{
                                color: 'var(--dv-accent)',
                                r: 3,
                                stroke: 'white'
                            }}
                            stackId="1"
                        />
                    </AreaChart>
                </ResponsiveContainer>
            </div>
        </div>
    )
}

Linear Gradient

Visitors and Revenue

New users by First user primary channel group (Default Channel Group)

Visitors5649336%

Revenue$430036%

Savings$13006%

import { CustomTooltip, LinearGradient, barData } from "@tailus-ui/visualizations";
import { ResponsiveContainer, AreaChart, Area, Tooltip, YAxis, XAxis } from 'recharts';
import { Caption, Link, Text, Title } from '@tailus-ui/typography';
import Badge from '@tailus-ui/Badge';
import { Lightbulb, TrendingDown, TrendingUp } from 'lucide-react';
import Banner from '@tailus-ui/Banner';

export const MyChart = () => {
    return (
        <div>
            <Title as="h2" size="lg" weight="medium" className="mb-1">
                Visitors and Revenue
            </Title>
            <Text className="mb-0 mt-1" size="sm">
                New users by First user primary channel group (Default Channel Group)
            </Text>

            <div className="my-6 grid max-w-2xl grid-cols-3 gap-6 divide-y border-y py-6 sm:divide-x sm:divide-y-0">
                <div>
                    <Caption as="span">Visitors</Caption>
                    <Title className="mt-2 flex items-center gap-3" as="span" weight="medium" size="lg">
                        56493
                        <Badge intent="success" size="xs" className="flex h-fit items-center gap-1.5">
                            <TrendingUp className="size-3.5" />
                            36%
                        </Badge>
                    </Title>
                </div>

                <div className="px-6">
                    <Caption as="span">Revenue</Caption>
                    <Title className="mt-2 flex items-center gap-3" as="span" weight="medium" size="lg">
                        $4300
                        <Badge intent="danger" size="xs" className="flex h-fit items-center gap-1.5">
                            <TrendingDown className="size-3.5" />
                            36%
                        </Badge>
                    </Title>
                </div>

                <div className="pl-6">
                    <Caption as="span">Savings</Caption>
                    <Title className="mt-2 flex items-center gap-3" as="span" weight="medium" size="lg">
                        $1300
                        <Badge intent="success" size="xs" className="flex h-fit items-center gap-1.5">
                            <TrendingUp className="size-3.5" />
                            6%
                        </Badge>
                    </Title>
                </div>
            </div>
            <div className="h-56 w-full sm:h-72 sm:max-w-xl">
                <ResponsiveContainer width="100%" height="100%">
                    <AreaChart data={barData}>
                        <defs>
                            <LinearGradient id="Primary" intent="primary" />
                            <LinearGradient id="Accent" intent="accent" />
                        </defs>
                        <YAxis className="text-caption" width={40} fontSize={12} tickLine={false} axisLine={false} />
                        <XAxis className="text-caption" dataKey="name" fontSize={12} tickLine={false} axisLine={false} />
                        <Tooltip cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }} content={<CustomTooltip payload={[]} mixed label={''} />} />

                        <CartesianGrid horizontal={false} stroke="var(--ui-border-color)" strokeDasharray={3} />

                        <Area
                            type="natural"
                            fill="url(#Accent)"
                            stroke="var(--dv-accent)"
                            dataKey="Neutral"
                            activeDot={{
                                color: 'var(--dv-accent)',
                                r: 4,
                                stroke: 'var(--ui-bg)',
                                strokeWidth: 2
                            }}
                        />

                        <Area
                            type="natural"
                            fill="url(#Primary)"
                            stroke="var(--dv-primary)"
                            dataKey="Primary"
                            activeDot={{
                                color: 'var(--dv-primary)',
                                r: 4,
                                stroke: 'var(--ui-bg)',
                                strokeWidth: 2
                            }}
                        />
                    </AreaChart>
                </ResponsiveContainer>
            </div>

            <Banner.Root intent="gray" className="mt-6 p-[--toast-padding]">
                <Banner.Content>
                    <Lightbulb className="size-5 text-[--body-text-color]" />
                    <div className="space-y-2">
                        <Text size="sm" className="my-0 text-gray-700 dark:text-gray-300">
                            On August 12 you had 987 Sessions where we anticipated 1,242, which is 20% less than expected.{' '}
                            <Link className="text-gray-900 dark:text-gray-200" href="#" intent="gray" size="sm" variant="underlined">
                                View Anomaly
                            </Link>
                        </Text>
                    </div>
                </Banner.Content>
            </Banner.Root>
        </div>
    )
}

Prototype

Overview

Visualize your main activities data

5649336%

import { CustomTooltip, LinearGradient, barData } from "@tailus-ui/visualizations";
import { ResponsiveContainer, AreaChart, Area, Tooltip, YAxis, XAxis } from 'recharts';
import { Caption, Link, Text, Title } from '@tailus-ui/typography';
import Badge from '@tailus-ui/Badge';
import { Lightbulb, TrendingDown, TrendingUp } from 'lucide-react';
import Banner from '@tailus-ui/Banner';

export const MyChart = () => {
    return (
        <div>
            <Title as="h2" size="lg" weight="medium" className="mb-1">
                Visitors and Revenue
            </Title>
            <Text className="mb-0 mt-1" size="sm">
                New users by First user primary channel group (Default Channel Group)
            </Text>

            <div className="my-6 grid max-w-2xl grid-cols-3 gap-6 divide-y border-y py-6 sm:divide-x sm:divide-y-0">
                <div>
                    <Caption as="span">Visitors</Caption>
                    <Title className="mt-2 flex items-center gap-3" as="span" weight="medium" size="lg">
                        56493
                        <Badge intent="success" size="xs" className="flex h-fit items-center gap-1.5">
                            <TrendingUp className="size-3.5" />
                            36%
                        </Badge>
                    </Title>
                </div>

                <div className="px-6">
                    <Caption as="span">Revenue</Caption>
                    <Title className="mt-2 flex items-center gap-3" as="span" weight="medium" size="lg">
                        $4300
                        <Badge intent="danger" size="xs" className="flex h-fit items-center gap-1.5">
                            <TrendingDown className="size-3.5" />
                            36%
                        </Badge>
                    </Title>
                </div>

                <div className="pl-6">
                    <Caption as="span">Savings</Caption>
                    <Title className="mt-2 flex items-center gap-3" as="span" weight="medium" size="lg">
                        $1300
                        <Badge intent="success" size="xs" className="flex h-fit items-center gap-1.5">
                            <TrendingUp className="size-3.5" />
                            6%
                        </Badge>
                    </Title>
                </div>
            </div>
            <div className="h-56 w-full sm:h-72 sm:max-w-xl">
                <ResponsiveContainer width="100%" height="100%">
                    <AreaChart data={barData}>
                        <defs>
                            <LinearGradient id="Primary" intent="primary" />
                            <LinearGradient id="Accent" intent="accent" />
                        </defs>
                        <YAxis className="text-caption" width={40} fontSize={12} tickLine={false} axisLine={false} />
                        <XAxis className="text-caption" dataKey="name" fontSize={12} tickLine={false} axisLine={false} />
                        <Tooltip cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }} content={<CustomTooltip payload={[]} mixed label={''} />} />

                        <CartesianGrid horizontal={false} stroke="var(--ui-border-color)" strokeDasharray={3} />

                        <Area
                            type="natural"
                            fill="url(#Accent)"
                            stroke="var(--dv-accent)"
                            dataKey="Neutral"
                            activeDot={{
                                color: 'var(--dv-accent)',
                                r: 4,
                                stroke: 'var(--ui-bg)',
                                strokeWidth: 2
                            }}
                        />

                        <Area
                            type="natural"
                            fill="url(#Primary)"
                            stroke="var(--dv-primary)"
                            dataKey="Primary"
                            activeDot={{
                                color: 'var(--dv-primary)',
                                r: 4,
                                stroke: 'var(--ui-bg)',
                                strokeWidth: 2
                            }}
                        />
                    </AreaChart>
                </ResponsiveContainer>
            </div>

            <Banner.Root intent="gray" className="mt-6 p-[--toast-padding]">
                <Banner.Content>
                    <Lightbulb className="size-5 text-[--body-text-color]" />
                    <div className="space-y-2">
                        <Text size="sm" className="my-0 text-gray-700 dark:text-gray-300">
                            On August 12 you had 987 Sessions where we anticipated 1,242, which is 20% less than expected.{' '}
                            <Link className="text-gray-900 dark:text-gray-200" href="#" intent="gray" size="sm" variant="underlined">
                                View Anomaly
                            </Link>
                        </Text>
                    </div>
                </Banner.Content>
            </Banner.Root>
        </div>
    )
}

On this page

Overview
Simple
Two Areas
Stacked
Linear Gradient
Prototype

Contribute

Report a bug New Ideas Start a discussion

Tailus UI Bundle

Get all templates for $537 $97.99