Grouped bar comparison

Component

About

An accessible grouped bar chart comparing previous vs current period performance with interactive segment selection, dynamic metric readouts, and an expandable data table. It is useful in business intelligence dashboards, campaign marketing reports, and quarterly performance reviews to clearly contrast growth metrics across acquisition channels.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Grouped bar comparison to your project and fits it to your theme.

Code

How Grouped bar comparison is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import * as React from "react";
import Component, { type Props, type State } from "@/components/ui/grouped-bar-comparison";

const settings = { title: "Two quarters. One clear view." };
export const loopDuration = 6;
const smooth = (x: number) => {
  const n = Math.max(0, Math.min(1, x));
  return n * n * (3 - 2 * n);
};

export function showcase(time: number): State {
  const t = ((time % loopDuration) + loopDuration) % loopDuration;
  const active = Math.floor((t / loopDuration) * 4) % 4;
  const selected = t < 2 ? "both" : t < 4 ? "current" : "previous";
  return { active, selected };
}

export default function Demo(props: any = {}) {
  const { showcaseTime, ...incoming } = props;
  const merged = { ...settings, ...incoming };
  return (
    <Component
      {...merged}
      state={showcaseTime === undefined ? incoming.state : showcase(showcaseTime)}
      seeking={showcaseTime !== undefined || incoming.seeking}
    />
  );
}