Line Chart
A line chart for data visualization
Installations
Install radix-ui, clsx, and tailwind-merge to use avatar component.
npm install recharts clsx tailwind-merge
Add the following function in lib/utils
import clsx, { type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cx(...args: ClassValue[]) {
return twMerge(clsx(...args));
}
Copy paste the component
import React, { ReactNode } from "react";
import {
CartesianGrid,
Line,
LineChart,
Tooltip,
XAxis,
YAxis,
} from "recharts";
import { CustomTooltip } from "@/library/components/charts/common/customTooltip";
import { cx } from "@/lib/utils";
function LineChartRoot({
width = 300,
height = 100,
data,
children,
}: {
width?: number;
height?: number;
data: {
name: string;
cod: number;
online: number;
amt: number;
}[];
children: ReactNode;
}) {
return (
<LineChart width={width} height={height} data={data}>
{children}
</LineChart>
);
}
function LineChartContent({
primaryStroke = "#155dfc",
secondaryStroke = "#00a63e",
showPrimaryLine = true,
showSecondaryLine = false,
primaryDataKey,
secondaryDataKey,
showTick = true,
}: {
primaryStroke?: string;
secondaryStroke?: string;
showPrimaryLine?: boolean;
showSecondaryLine?: boolean;
primaryDataKey: string;
secondaryDataKey: string;
showTick?: boolean;
}) {
return (
<>
{showPrimaryLine && (
<Line
type="monotone"
dataKey={primaryDataKey}
stroke={primaryStroke}
strokeWidth={2}
/>
)}
{showSecondaryLine && (
<Line
type="monotone"
dataKey={secondaryDataKey}
stroke={secondaryStroke}
strokeWidth={2}
/>
)}
<CartesianGrid
strokeDasharray="6 6"
vertical={false}
className="text-gray-200"
/>
<XAxis
dataKey="name"
axisLine={false}
tickLine={false}
tick={showTick ? { fontSize: 12, fill: "#4a5565" } : false} // dark: "#99a1af"
tickMargin={20}
/>
<YAxis
axisLine={false}
tickLine={false}
tick={showTick ? { fontSize: 12, fill: "#4a5565" } : false} // dark: "#99a1af"
tickMargin={20}
/>
<Tooltip
content={(tooltipProps) => (
<CustomTooltip
{...tooltipProps}
primaryDataKey={primaryDataKey}
secondaryDataKey={secondaryDataKey}
/>
)}
/>
</>
);
}
function Legend({
primaryLegendName,
secondaryLengendName = "",
}: {
primaryLegendName: string;
secondaryLengendName?: string;
}) {
return (
<div
className={cx(
// base
"absolute -top-4 right-0 mt-2 mr-4 flex gap-4 text-sm"
)}
>
<div className="flex items-center gap-2">
<span className="block h-2 w-2 rounded-full bg-blue-500" />
<span className="text-gray-700 dark:text-gray-200">
{primaryLegendName}
</span>
</div>
{secondaryLengendName && (
<div className="flex items-center gap-2">
<span className="block h-2 w-2 rounded-full bg-green-500" />
<span className="text-gray-700 dark:text-gray-200">
{secondaryLengendName}
</span>
</div>
)}
</div>
);
}
export { LineChartRoot, LineChartContent, Legend as LineLegend };
Usage
import {
LineChartContent,
LineChartRoot,
} from "@/library/components/charts/lineChart";
const data = [
{
name: "Jan",
cod: 4000,
online: 2400,
amt: 2400,
},
...
];
export function LineChart() {
return (
<ChartContainer>
<LineChartRoot data={data}>
<LineChartContent
showSecondaryLine={true}
primaryDataKey="online"
secondaryDataKey="cod"
showTooltip={false}
/>
</LineChartRoot>
</ChartContainer>
);
}
Next: Bar Chart
Found a bug? Report here.