Bar Chart

Some examples of how to use the BarChart component

Simple

import { ResponsiveContainer, BarChart, Bar, YAxis, XAxis, CartesianGrid } from 'recharts';
import { area, cartesianGrid } from "@tailus/themer";

const data = [];

export const MyChart = () => {
    return (
        <div className="h-56 sm:h-72 w-full sm:max-w-2xl sm:min-w-[36rem]">
            <ResponsiveContainer width="100%" height="100%">
                <BarChart data={data}>
                    <YAxis
                        className="text-[--caption-text-color]"
                        fontSize={12}
                        tickLine={false}
                        axisLine={false}
                    />
                    <XAxis
                        className="text-[--caption-text-color]"
                        dataKey="name"
                        fontSize={12}
                        tickLine={false}
                        axisLine={false}
                    />
                    <CartesianGrid
                        className={cartesianGrid()}
                        vertical={false}
                        stroke="currentColor"
                        strokeDasharray={3}
                    />

                    <Bar
                        className={area({ gradient: true, intent: "secondary" })}
                        radius={[4, 4, 0, 0]}
                        fill="currentColor"
                        dataKey="Primary"
                    />
                </BarChart>
            </ResponsiveContainer>
        </div>
    )
}

Two Per Group

import { ResponsiveContainer, BarChart, Bar, YAxis, XAxis, CartesianGrid } from 'recharts';
import { area, cartesianGrid } from "@tailus/themer";

const data = [];

export const MyChart = () => {
    return (
        <div className="h-56 sm:h-72 w-full sm:max-w-2xl sm:min-w-[36rem]">
            <ResponsiveContainer width="100%" height="100%">
                <BarChart data={data}>
                    <YAxis
                        className="text-[--caption-text-color]"
                        fontSize={12}
                        tickLine={false}
                        axisLine={false}
                    />
                    <XAxis
                        className="text-[--caption-text-color]"
                        dataKey="name"
                        fontSize={12}
                        tickLine={false}
                        axisLine={false}
                    />

                    <CartesianGrid
                        className={cartesianGrid()}
                        vertical={false}
                        stroke="currentColor"
                        strokeDasharray={3}
                    />

                    <Bar
                        className={area({ gradient: true, intent: "primary" })}
                        radius={[4, 4, 0, 0]}
                        fill="currentColor"
                        dataKey="Primary"
                    />
                    <Bar
                        className={area({ gradient: true, intent: "accent" })}
                        radius={[4, 4, 0, 0]}
                        fill="currentColor"
                        dataKey="Accent"
                    />
                </BarChart>
            </ResponsiveContainer>
        </div>
    )
}

Stacked

import { ResponsiveContainer, BarChart, Bar, YAxis, XAxis, CartesianGrid } from 'recharts';
import { area, cartesianGrid } from "@tailus/themer";

const data = [];

export const MyChart = () => {
    return (
        <div className="h-56 sm:h-72 w-full sm:max-w-2xl sm:min-w-[36rem]">
            <ResponsiveContainer width="100%" height="100%">
                <BarChart data={data}>
                    <YAxis
                        className="text-[--caption-text-color]"
                        fontSize={12}
                        tickLine={false}
                        axisLine={false}
                    />
                    <XAxis
                        className="text-[--caption-text-color]"
                        dataKey="name"
                        fontSize={12}
                        tickLine={false}
                        axisLine={false}
                    />
                    
                    <CartesianGrid
                        className={cartesianGrid()}
                        vertical={false}
                        stroke="currentColor"
                        strokeDasharray={3}
                    />

                    <Bar
                        className={area({ gradient: true, intent: "primary" })}
                        fill="currentColor"
                        stackId="a"
                        barSize={20}
                        dataKey="Primary"
                    />
                    <Bar
                        className={area({ gradient: true, intent: "accent" })}
                        radius={[4, 4, 0, 0]}
                        fill="currentColor"
                        stackId="a"
                        dataKey="Accent"
                        barSize={20}
                    />
                </BarChart>
            </ResponsiveContainer>
        </div>
    )
}

List

import { ResponsiveContainer, BarChart, Bar, YAxis, XAxis, CartesianGrid } from 'recharts';
import { area, cartesianGrid } from "@tailus/themer";

const data = [];

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={data}
                >
                    <YAxis
                        className="text-[--caption-text-color]"
                        fontSize={12}
                        axisLine={false}
                        type="category"
                        scale="band"
                        dataKey="name"
                    />
                    <XAxis
                        className="text-[--caption-text-color]"
                        fontSize={12}
                        tickLine={false}
                        axisLine={false}
                        type="number"
                    />
                    
                    <CartesianGrid
                        className={cartesianGrid()}
                        horizontal={false}
                        stroke="currentColor"
                        strokeDasharray={3}
                    />

                    <Bar
                        className={area({ gradient: true, intent: "secondary" })}
                        radius={[0, 4, 4, 0]}
                        fill="currentColor"
                        dataKey="Primary"
                        barSize={20}
                    />
                </BarChart>
            </ResponsiveContainer>
        </div>
    )
}

Traffic Comparison

Website Traffic

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

* 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?

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>
    )
}