Composed Chart

Dashboards

About

A combo chart that mixes bars and a line series in one view, useful for comparing a volume metric like revenue against a trend metric like profit over time.

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

Code

How Composed Chart is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import EvilComposedChart from "@/components/ui/composed-chart";

const data = [
  { month: "Jan", revenue: 4200, profit: 1200 },
  { month: "Feb", revenue: 3800, profit: 980 },
  { month: "Mar", revenue: 5100, profit: 1750 },
  { month: "Apr", revenue: 4700, profit: 1600 },
  { month: "May", revenue: 6200, profit: 2100 },
  { month: "Jun", revenue: 5800, profit: 1950 },
];

const barConfig = {
  revenue: {
    label: "Revenue",
    colors: { light: ["#6366f1"], dark: ["#818cf8"] },
  },
};

const lineConfig = {
  profit: {
    label: "Profit",
    colors: { light: ["#f97316"], dark: ["#fb923c"] },
  },
};

export default function ComposedChartDemo() {
  return (
    <div className="w-full max-w-2xl p-6">
      <EvilComposedChart
        data={data}
        xDataKey="month"
        barConfig={barConfig}
        lineConfig={lineConfig}
        showLabels
      />
    </div>
  );
}