Category Bar

An example of a Category Bar Chart built with 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>
    )
}

With Labels

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

const data = [];

export const MyChart = () => {
    return (
        <div className="h-16 sm:max-w-xl w-full -ml-7 -mb-6">
            <ResponsiveContainer width="100%" height="100%">
                <BarChart
                    layout="vertical"
                    data={categoryBarData}
                >
                    <YAxis
                        className="hidden text-[--caption-text-color]"
                        fontSize={12}
                        axisLine={false}
                        type="category"
                        scale="band"
                        dataKey="name"
                    />
                    <XAxis
                        className="hidden text-[--caption-text-color]"
                        fontSize={12}
                        tickLine={false}
                        axisLine={false}
                        type="number"
                    />

                    <Bar
                        className={area({ gradient: true, intent: "primary" })}
                        radius={[16, 0, 0, 16]}
                        fill="currentColor"
                        dataKey="Primary"
                        stackId="category"
                        style={{ transform: "translateX(-5px)" }}
                        label={{position:"center", fill:"white", fillOpacity:0.75, fontSize:9}}
                    />
                    <Bar
                        className={area({ gradient: true, intent: "secondary" })}
                        fill="currentColor"
                        dataKey="Secondary"
                        stackId="category"
                        style={{ transform: "translateX(-4px)" }}
                        label={{position:"center", fill:"white", fillOpacity:0.75, fontSize:9}}
                    />
                    <Bar
                        className={area({ gradient: true, intent: "accent" })}
                        fill="currentColor"
                        dataKey="Accent"
                        stackId="category"
                        style={{ transform: "translateX(-3px)" }}
                        label={{position:"center", fill:"white", fillOpacity:0.75, fontSize:9}}
                    />
                    <Bar
                        className={area({ gradient: true, intent: "gray" })}
                        fill="currentColor"
                        dataKey="Gray"
                        stackId="category"
                        style={{ transform: "translateX(-2px)" }}
                        label={{position:"center", fill:"white", fillOpacity:0.75, fontSize:9}}
                    />
                    <Bar
                        className={area({ gradient: true, intent: "neutral" })}
                        radius={[0, 16, 16, 0]}
                        fill="currentColor"
                        dataKey="Neutral"
                        stackId="category"
                        style={{ transform: "translateX(-1px)" }}
                        label={{position:"center", fontSize:9}}
                    />
                </BarChart>
            </ResponsiveContainer>
        </div>
    )
}