2

Slope Chart

PreviousNext

Line chart showing change between two or more time points.

Increase
Decrease
No change
Q1 2024Q4 2024Marketing72 +60%Sales55 -19%Engineering58 +81%Support78 +42%Operations65 -21%
"use client"

import { SlopeChart } from "@/components/ui/charts"

const data = [
  { category: "Marketing", start: 45, end: 72 },
  { category: "Sales", start: 68, end: 55 },
  { category: "Engineering", start: 32, end: 58 },
  { category: "Support", start: 55, end: 78 },
  { category: "Operations", start: 82, end: 65 },
]

export function SlopeChartDemo() {
  return <SlopeChart data={data} labels={["Q1 2024", "Q4 2024"]} />
}

About

The Slope Chart connects data points with lines to emphasize change over time or between conditions. Lines are automatically colored green for increases and red for decreases, making it easy to spot trends at a glance. Supports multiple time periods and ranking visualizations.

Installation

pnpm dlx shadcn@latest add https://ui.simplifying.ai/r/slope-chart.json

Usage

import { SlopeChart } from "@/components/ui/charts"
 
const data = [
  { category: "Marketing", start: 45, end: 72 },
  { category: "Sales", start: 68, end: 55 },
  { category: "Engineering", start: 32, end: 58 },
]
 
export function Example() {
  return <SlopeChart data={data} labels={["Q1 2024", "Q4 2024"]} />
}

Examples

Default (Lines)

The default slope chart displays smooth curved lines connecting two data points.

Increase
Decrease
No change
Q1 2024Q4 2024Marketing72 +60%Sales55 -19%Engineering58 +81%Support78 +42%Operations65 -21%
"use client"

import { SlopeChart } from "@/components/ui/charts"

const data = [
  { category: "Marketing", start: 45, end: 72 },
  { category: "Sales", start: 68, end: 55 },
  { category: "Engineering", start: 32, end: 58 },
  { category: "Support", start: 55, end: 78 },
  { category: "Operations", start: 82, end: 65 },
]

export function SlopeChartDemo() {
  return <SlopeChart data={data} labels={["Q1 2024", "Q4 2024"]} />
}

Multi-Period

Track changes across multiple time periods with the multi-period data format.

Increase
Decrease
No change
20202021202220232024Revenue$220M +83%Costs$125M +56%Profit$95M +138%Users$175M +250%
"use client"

import { SlopeChart } from "@/components/ui/charts"

const data = [
  { category: "Revenue", values: [120, 145, 168, 195, 220] },
  { category: "Costs", values: [80, 95, 105, 115, 125] },
  { category: "Profit", values: [40, 50, 63, 80, 95] },
  { category: "Users", values: [50, 72, 95, 130, 175] },
]

export function SlopeChartMulti() {
  return (
    <SlopeChart
      data={data}
      labels={["2020", "2021", "2022", "2023", "2024"]}
      valueFormatter={(v) => `$${v}M`}
    />
  )
}

Bump Chart (Rankings)

Visualize ranking changes over time. Lines show position changes rather than values.

Increase
Decrease
Q1Q2Q3Q4Apple+2Google-2Microsoft+2Amazon-2Meta=
"use client"

import { SlopeChart } from "@/components/ui/charts"

const data = [
  { category: "Apple", values: [85, 92, 88, 95] },
  { category: "Google", values: [92, 85, 90, 88] },
  { category: "Microsoft", values: [78, 82, 85, 92] },
  { category: "Amazon", values: [88, 78, 82, 80] },
  { category: "Meta", values: [72, 75, 78, 75] },
]

export function SlopeChartBumps() {
  return (
    <SlopeChart
      data={data}
      variant="bumps"
      labels={["Q1", "Q2", "Q3", "Q4"]}
      showRankChange
    />
  )
}

Parallel Coordinates

Straight lines connecting points, ideal for comparing absolute values.

Increase
Decrease
No change
Before LaunchAfter LaunchProduct A1850 units +54%Product B1100 units +12%Product C1350 units -10%Product D1200 units +60%
"use client"

import { SlopeChart } from "@/components/ui/charts"

const data = [
  { category: "Product A", start: 1200, end: 1850 },
  { category: "Product B", start: 980, end: 1100 },
  { category: "Product C", start: 1500, end: 1350 },
  { category: "Product D", start: 750, end: 1200 },
]

export function SlopeChartParallel() {
  return (
    <SlopeChart
      data={data}
      variant="parallel"
      labels={["Before Launch", "After Launch"]}
      valueFormatter={(v) => `${v} units`}
    />
  )
}

API Reference

PropTypeDefaultDescription
dataSlopeDataPoint[] | MultiPeriodSlopeDataPoint[]requiredArray of data points
variant"lines" | "bumps" | "parallel""lines"Visual style
labelsstring[]["Start", "End"]Labels for each period
showGridbooleantrueShow grid lines
showValuesbooleantrueShow end values
showRankChangebooleanfalseShow rank change (bumps variant)
increaseColorstring"#22c55e"Color for increasing lines
decreaseColorstring"#ef4444"Color for decreasing lines
neutralColorstring"#94a3b8"Color for unchanged lines
valueFormatterfunctiontoLocaleStringFormat values

Data Formats

Simple (Two Points)

interface SlopeDataPoint {
  category: string // Category or item name
  start: number // Starting value
  end: number // Ending value
  color?: string // Optional: override auto color
}

Multi-Period

interface MultiPeriodSlopeDataPoint {
  category: string // Category or item name
  values: number[] // Values at each time period
  color?: string // Optional: override auto color
}

Variants

Lines (Default)

Smooth curved connections between points. Best for showing trends where the direction of change matters more than exact positions.

Bumps

Shows ranking changes over time. Values are converted to ranks at each period, and lines show position changes. Perfect for competitive rankings, market share positions, or survey results.

Parallel

Straight line connections without curves. Ideal for comparing before/after scenarios or when precise value representation is important.

Notes

  • Lines are automatically colored: green for increases, red for decreases, gray for no change
  • Hover over any line to see detailed values and percentage change
  • Category labels appear on the left, end values with percentage change on the right
  • Legend at top shows color meaning
  • Supports 2+ time periods
  • Works well for before/after comparisons, period-over-period analysis, and ranking visualizations