An animated chart that shows how items swap rank across time periods, with curved connecting paths, interactive rank dots, hover tooltips, and a highlightable legend.
"use client";
import {
BumpChart,
BumpChartLegend,
BumpChartPlot,
type BumpChartSeries,
} from "@/components/ui/bump-chart";
const periods = ["Apr", "May", "Jun", "Jul", "Aug", "Sep"];
const series: BumpChartSeries[] = [
{ id: "studio", name: "Studio", ranks: [4, 3, 2, 3, 2, 1] },
{ id: "canvas", name: "Canvas", ranks: [1, 1, 3, 2, 1, 2] },
{ id: "layers", name: "Layers", ranks: [3, 2, 1, 1, 3, 3] },
{ id: "orbit", name: "Orbit", ranks: [2, 4, 5, 4, 5, 4] },
{ id: "frame", name: "Frame", ranks: [5, 5, 4, 5, 4, 5] },
];
export default function BumpChartDemo() {
return (
<div className="w-full max-w-2xl p-6">
<BumpChart
series={series}
periods={periods}
label="Product rankings, April to September"
>
<BumpChartPlot />
<BumpChartLegend />
</BumpChart>
</div>
);
}