Bar Chart

import { ResponsiveContainer, BarChart, Bar, Tooltip, YAxis, XAxis, CartesianGrid } from 'recharts';
import { CustomTooltip, LinearGradient, barData } from "@tailus-ui/visualizations";
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-8 h-56 sm:h-72 w-full sm:max-w-2xl sm:min-w-[36rem]">
                <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={barData}>
                        <YAxis className="text-caption" fontSize={12} tickLine={false} axisLine={false} />
                        <XAxis className="text-caption" dataKey="name" fontSize={12} tickLine={false} axisLine={false} />
                        <CartesianGrid vertical={false} stroke="var(--ui-border-color)" strokeDasharray={3} />
                        <Tooltip cursor={{ fill: 'var(--ui-border-color)' }} content={<CustomTooltip payload={[]} mixed label={''} />} />

                        <Bar radius={[4, 4, 0, 0]} fill="var(--dv-primary)" dataKey="Primary" />
                    </BarChart>
                </ResponsiveContainer>
            </div>
        </div>
    )
}

import { ResponsiveContainer, BarChart, Bar, Tooltip, YAxis, XAxis, CartesianGrid } from 'recharts';
import { CustomTooltip, LinearGradient, barData } from "@tailus-ui/visualizations";
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%">
                    <BarChart data={barData}>
                        <YAxis className="text-caption" width={36} fontSize={12} tickLine={false} axisLine={false} />
                        <XAxis className="text-caption" dataKey="name" fontSize={12} tickLine={false} axisLine={false} />
                        
                        <CartesianGrid vertical={false} stroke="var(--ui-border-color)" strokeDasharray={3} />
                        <Tooltip cursor={{ fill: 'var(--ui-border-color)' }} content={<CustomTooltip payload={[]} mixed label={''} />} />

                        <Bar radius={[4, 4, 0, 0]} fill="var(--dv-primary)" dataKey="Primary" />
                        <Bar radius={[4, 4, 0, 0]} fill="var(--dv-accent)" dataKey="Accent" />
                    </BarChart>
                </ResponsiveContainer>
            </div>
        </div>
    )
}

import { ResponsiveContainer, BarChart, Bar, Tooltip, YAxis, XAxis, CartesianGrid } from 'recharts';
import { CustomTooltip, Stripes, data } from "@tailus-ui/visualizations";
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 className="w-full">
            <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%">
                    <BarChart data={data}>
                        <YAxis className="text-caption" width={40} fontSize={12} unit="$" tickLine={false} axisLine={false} />
                        <XAxis className="text-caption" dataKey="name" fontSize={12} tickLine={false} axisLine={false} />

                        <CartesianGrid vertical={false} stroke="var(--ui-border-color)" strokeDasharray={3} />
                        <Tooltip cursor={{ fill: 'var(--ui-border-color)' }} content={<CustomTooltip payload={[]} mixed label={''} />} />

                        <Bar fill="var(--dv-primary)" stackId="a" barSize={20} dataKey="Primary" />
                        <Bar fill="var(--dv-accent)" stackId="a" dataKey="Accent" barSize={20} />
                        <Bar radius={[4, 4, 0, 0]} fill="url(#strbar)" stackId="a" dataKey="Neutral" barSize={20} />

                        <defs>
                            <Stripes id="strbar" intent="primary" />
                        </defs>
                    </BarChart>
                </ResponsiveContainer>
            </div>
        </div>
    )
}

import { ResponsiveContainer, BarChart, Bar, Tooltip, YAxis, XAxis, CartesianGrid } from 'recharts';
import { CustomTooltip, LinearGradient, barData } from "@tailus-ui/visualizations";

export const MyChart = () => {
    return (
        <div className="h-96 sm:max-w-xl w-full sm:-ml-6 -ml-4">
            <ResponsiveContainer width="100%" height="100%">
                <BarChart layout="vertical" data={barData}>
                    <YAxis className="text-caption" fontSize={12} tickLine={false} axisLine={false} type="category" dataKey="name" />
                    <XAxis className="text-caption" fontSize={12} tickLine={false} axisLine={false} type="number" />

                    <CartesianGrid horizontal={false} stroke="var(--ui-border-color)" strokeDasharray={3} />
                    <Tooltip cursor={{ fill: 'var(--ui-border-color)' }} content={<CustomTooltip payload={[]} mixed label={''} />} />

                    <Bar radius={4} fill="var(--dv-primary)" dataKey="Primary" barSize={20} />
                </BarChart>
            </ResponsiveContainer>
        </div>
    )
}

import { ResponsiveContainer, BarChart, Bar, YAxis, XAxis } from 'recharts';
import { area } from "@tailus/themer";
import { Caption, Text, Title } from '@tailus-ui/typography';

const data = [];

export const MyChart = () => {
    return (
        <div className="space-y-6 sm:max-w-lg w-full">
            <div>
                <Title as='h4' size="base" weight="medium">Website Traffic</Title>
                <Text size="sm" className='mt-1 mb-0'>New users by First user primary channel group (Default Channel Group)</Text>
            </div>

            <div className="h-56">
                <ResponsiveContainer width="100%" height="100%">
                    <BarChart
                        layout="vertical"
                        data={barData}
                    >
                        <XAxis hide type="number"/>
                        <YAxis hide type="category" dataKey="name"/>
                        <Bar
                            className={area({ gradient: true, intent: "primary" })}
                            radius={4}
                            fill="currentColor"
                            dataKey="data"
                        >
                            <LabelList className="text-white" fontSize={12} position="insideLeft" fill="currentColor" stroke="none" dataKey="name" />
                            <LabelList className="text-[--body-text-color]" fontSize={12} position="right" fill="currentColor" stroke="none" dataKey="data" />
                        </Bar>
                    </BarChart>
                </ResponsiveContainer>
            </div>

            <Caption size="xs">
                * Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, neque, laudantium numquam esse totam quis iusto in nobis aspernatur ducimus fugit iure adipisci laboriosam, fugiat magni nemo consequatur atque vel?
            </Caption>
        </div>
    )
}