Components
Loading preview...
Here is Bar Chart component
@SubframeApp
npx shadcn@latest add https://21st.dev/r/SubframeApp/bar-chartimport Component from "@/components/ui/bar-chart";
import * as SubframeCore from "@subframe/core";
const categories = ["Biology", "Business", "Psychology"] as const;
const data = [
{ Year: "2015", Psychology: 120, Business: 110, Biology: 100 },
{ Year: "2016", Psychology: 130, Business: 95, Biology: 105 },
{ Year: "2017", Psychology: 115, Business: 105, Biology: 110 },
{ Year: "2018", Psychology: 125, Business: 120, Biology: 90 },
{ Year: "2019", Psychology: 110, Business: 130, Biology: 85 },
{ Year: "2020", Psychology: 135, Business: 100, Biology: 95 },
{ Year: "2021", Psychology: 105, Business: 115, Biology: 120 },
{ Year: "2022", Psychology: 140, Business: 125, Biology: 130 },
];
export default function BarChartWithTooltip() {
return (
<Component
categories={categories as unknown as string[]}
data={data}
index="Year"
tooltip={
<SubframeCore.ChartTooltip
content={({ payload, label }) => (
<div className="rounded-md p-2 shadow-sm ring-1 bg-white text-gray-900 ring-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:ring-gray-700">
{label ? <div className="mb-1 font-medium">{label}</div> : null}
{(payload ?? []).map(({ name, value }, i) => (
<div key={i} className="flex items-center gap-1">
<span>{name ?? ""}</span>
<span>·</span>
<span>{value}</span>
</div>
))}
</div>
)}
cursor={{ fill: "#D1D5DB", opacity: "0.15" }}
/>
}
/>
);
}