Slope Chart

Component

About

An accessible SVG chart that shows how a value changed between two moments for several items at once, with one line per item sloping from its start value to its end value.

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

Code

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

Usage.tsx

"use client";

import SlopeChart from "@/components/ui/slope-chart";

const CHANNELS = [
  { id: "organic", label: "Organic search", start: 3.1, end: 3.8 },
  { id: "paid", label: "Paid search", start: 4.6, end: 3.9 },
  { id: "referral", label: "Referral", start: 6.2, end: 7.4 },
  { id: "email", label: "Email", start: 5.0, end: 5.1 },
  { id: "social", label: "Social", start: 1.4, end: 1.2 },
  { id: "direct", label: "Direct", start: 4.9, end: 5.6 },
];

export default function SlopeChartDemo() {
  return (
    <div className="flex w-full max-w-xl items-center justify-center p-8">
      <SlopeChart
        items={CHANNELS}
        startLabel="Q3 2025"
        endLabel="Q3 2026"
        tone="direction"
        format={(value) => `${value.toFixed(1)}%`}
        label="Trial-to-paid conversion by acquisition channel, Q3 2025 against Q3 2026"
      />
    </div>
  );
}