mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-09 06:55:07 +00:00
05145e66d3
* feat(www): add login blocks * chore(www): restructure for blocks * chore: build registry * chore: clean up chunks * fix(www): chart categories * feat(www): big registry refactor * feat(www): update blocks * feat: complex blocks * fix: update schema * feat: sync new-york and default * fix: lint * feat: move charts * fix(www): code * fix: src path * chore: rebuild registry * fix: screenshot * fix: set new-york as default
85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { Bar, BarChart, XAxis } from "recharts"
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/registry/default/ui/card"
|
|
import {
|
|
ChartConfig,
|
|
ChartContainer,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
} from "@/registry/default/ui/chart"
|
|
|
|
export const description = "A stacked bar chart with a legend"
|
|
|
|
const chartData = [
|
|
{ date: "2024-07-15", running: 450, swimming: 300 },
|
|
{ date: "2024-07-16", running: 380, swimming: 420 },
|
|
{ date: "2024-07-17", running: 520, swimming: 120 },
|
|
{ date: "2024-07-18", running: 140, swimming: 550 },
|
|
{ date: "2024-07-19", running: 600, swimming: 350 },
|
|
{ date: "2024-07-20", running: 480, swimming: 400 },
|
|
]
|
|
|
|
const chartConfig = {
|
|
running: {
|
|
label: "Running",
|
|
color: "hsl(var(--chart-1))",
|
|
},
|
|
swimming: {
|
|
label: "Swimming",
|
|
color: "hsl(var(--chart-2))",
|
|
},
|
|
} satisfies ChartConfig
|
|
|
|
export default function Component() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Tooltip - No Indicator</CardTitle>
|
|
<CardDescription>Tooltip with no indicator.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ChartContainer config={chartConfig}>
|
|
<BarChart accessibilityLayer data={chartData}>
|
|
<XAxis
|
|
dataKey="date"
|
|
tickLine={false}
|
|
tickMargin={10}
|
|
axisLine={false}
|
|
tickFormatter={(value) => {
|
|
return new Date(value).toLocaleDateString("en-US", {
|
|
weekday: "short",
|
|
})
|
|
}}
|
|
/>
|
|
<Bar
|
|
dataKey="running"
|
|
stackId="a"
|
|
fill="var(--color-running)"
|
|
radius={[0, 0, 4, 4]}
|
|
/>
|
|
<Bar
|
|
dataKey="swimming"
|
|
stackId="a"
|
|
fill="var(--color-swimming)"
|
|
radius={[4, 4, 0, 0]}
|
|
/>
|
|
<ChartTooltip
|
|
content={<ChartTooltipContent hideIndicator />}
|
|
cursor={false}
|
|
defaultIndex={1}
|
|
/>
|
|
</BarChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|