Skip to content
Get Pro
Trends

Ridgeline

Density curves stacked like a range of hills: each ridge is a stage-black fill with a bone top line, so nearer ridges hide the ones behind.

$149 once · every Pro piece

Customize

Point at a ridge and it heats, an accent top line over a faint wash, while the others’ lines step back; the fills never fade, so nothing behind bleeds through. A shared crosshair reads every ridge at the same x into the right gutter with rolling numbers, and the header rolls to the hovered ridge’s value and share. Left and Right move along x, Up and Down between ridges. Ridges rise one after another on mount, front first. Options: smooth densities or binned steps, one shared amplitude or each ridge filling its row, sorting by mean or peak, median ticks, bone gradient or textured fills, column grid or dots, and loading and empty states.

Install

npx shadcn@latest add @obsyde/ridgeline

Needs your licence key · Get Pro

Usage

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

import { Ridgeline } from '@/components/obsyde/ember/ridgeline/Ridgeline';

export function Example() {
  return (
    <Ridgeline />
  );
}

Files

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

  • ember/ridgeline/Ridgeline.tsxcomponent
  • ember/ridgeline/ridgeline.cssstyles
  • ember/ridgeline/RidgelineDemo.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
  • ember/viz-kit/Axis.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
ridgesRidgesnumber7
overlapOverlapnumber2.2
modeMode'density' | 'histogram''density'
scaleScale'shared' | 'own''shared'
sortSort'none' | 'mean' | 'peak''none'
mediansMediansbooleanfalse
hoverToneHover tone'bone' | 'accent''bone'
fillFill'stage' | 'gradient' | 'pattern''stage'
crosshairCrosshair'solid' | 'dashed' | 'gradient' | 'none''solid'
patternPattern'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''none'
backgroundBackground'none' | 'grid' | 'dots''none'
revealReveal'rise' | 'sweep' | 'fade' | 'none''rise'
statusStatus'ready' | 'loading' | 'empty''ready'
heightHeightnumber320
seedSeednumber12