A multi-series line chart with a scrubbable crosshair, legend toggles to show/hide series, and lines that smoothly morph when the data range changes.
"use client";
import LineChart from "@/components/ui/line-chart";
const data = [
{
key: "mon",
label: "Monday",
axisLabel: "Mon",
values: { visits: 420, signups: 32 },
},
{
key: "tue",
label: "Tuesday",
axisLabel: "Tue",
values: { visits: 532, signups: 41 },
},
{
key: "wed",
label: "Wednesday",
axisLabel: "Wed",
values: { visits: 489, signups: 38 },
},
{
key: "thu",
label: "Thursday",
axisLabel: "Thu",
values: { visits: 612, signups: 55 },
},
{
key: "fri",
label: "Friday",
axisLabel: "Fri",
values: { visits: 701, signups: 63 },
},
{
key: "sat",
label: "Saturday",
axisLabel: "Sat",
values: { visits: 548, signups: 44 },
},
{
key: "sun",
label: "Sunday",
axisLabel: "Sun",
values: { visits: 597, signups: 50 },
},
];
const series = [
{ key: "visits", label: "Visits" },
{ key: "signups", label: "Signups", dashed: true },
];
export default function LineChartDemo() {
return (
<div className="w-full max-w-xl p-6">
<LineChart
data={data}
series={series}
label="Weekly visits and signups"
/>
</div>
);
}