65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import BasicBar from "./basic-bar";
|
|
import FloatingBar from "./floating-bar";
|
|
import HorizontalBar from "./horizontal-bar";
|
|
import StackedBar from "./stacked-bar";
|
|
import StackedBarWithGroups from "./stackedbar-with-groups";
|
|
import VerticalBar from "./vertical-bar";
|
|
|
|
const ChartsChartJsBarPage = () => {
|
|
return (
|
|
<div className="grid xl:grid-cols-2 grid-cols-1 gap-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Bar Chart Border Radius</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<BasicBar />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Floating Bars</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<FloatingBar />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Horizontal Bar Chart</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<HorizontalBar />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Stacked Bar Chart</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<StackedBar />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Stacked Bar Chart with Groups</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<StackedBarWithGroups />
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Vertical Bar Chart</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<VerticalBar />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChartsChartJsBarPage;
|