Skip to content
Get Pro
Trends

Slope Chart

Two or three periods joined by straight lines, one per category.

$149 once · every Pro piece

Customize

Direction lives in luminance, not hue: risers are bone, fallers sink to grey, and the biggest mover is the one line in the accent with a soft bloom. Labels sit on both sides with the value and the change, pushed apart so none collide, with a short leader where one had to move. Point at a line or a label and it holds while the rest step back to a fifth; a panel beside it reads each period and the change. Arrow up and down walk the categories from the keyboard; left and right step through the periods.

Install

npx shadcn@latest add @obsyde/slope-chart

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { SlopeChart } from '@/components/obsyde/ember/slope-chart/SlopeChart';

export function Example() {
  return (
    <SlopeChart
      periods="2"
      mover="relative"
      labels="both"
      tooltip="panel"
      dots="halo"
    />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/slope-chart/SlopeChart.tsxcomponent
  • ember/slope-chart/slope-chart.cssstyles
  • ember/slope-chart/SlopeChartDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/States.tsxshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/Grid.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
periodsPeriods'2' | '3''2'
moverAccent mover'relative' | 'absolute' | 'none''relative'
labelsLabels'both' | 'end''both'
tooltipTooltip'panel' | 'none''panel'
crosshairCrosshair'none' | 'solid' | 'dashed' | 'gradient''none'
dotsDots'halo' | 'ring' | 'none''halo'
backgroundBackground'none' | 'grid' | 'dots' | 'hatch''none'
revealReveal'sweep' | 'cool' | 'rise' | 'fade' | 'none''sweep'
statusStatus'ready' | 'loading' | 'empty''ready'
heightHeightnumber340
pointsCategoriesnumber8
seedSeednumber4