Skip to content
Get Pro
Trends

Bump Chart

Rank over time as smooth S-curves between rank positions, with each series named at its right end.

$149 once · every Pro piece

Customize

Point at a line and it brightens while the others step back, and the header rolls to its rank, value and the places it gained or lost; click to pin it, and the pinned line alone runs in the accent. New data springs every node to its new rank on its own spring, so you watch the overtakes happen. Up and Down move between ranks, Left and Right between steps, Enter pins. Options: rank numbers in badges, straight segments, names at both ends, the top three drawn brighter, a ranked tooltip, dotted background, and loading and empty states.

Install

npx shadcn@latest add @obsyde/bump-chart

Needs your licence key · Get Pro

Usage

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

import { BumpChart } from '@/components/obsyde/ember/bump-chart/BumpChart';

export function Example() {
  return (
    <BumpChart series={6} />
  );
}

Files

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

  • ember/bump-chart/BumpChart.tsxcomponent
  • ember/bump-chart/bump-chart.cssstyles
  • ember/bump-chart/BumpChartDemo.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'
seriesSeriesnumber6
stepsStepsnumber8
focusedPinned seriesnumber-1
markersMarkers'dot' | 'rank' | 'none''dot'
curveCurve'bump' | 'linear''bump'
namesNames'end' | 'both''end'
highlightTopHighlight topnumber0
tooltipTooltip'none' | 'panel''none'
crosshairCrosshair'solid' | 'dashed' | 'gradient' | 'none''solid'
backgroundBackground'grid' | 'dots' | 'none''grid'
revealReveal'sweep' | 'cool' | 'rise' | 'fade' | 'none''sweep'
statusStatus'ready' | 'loading' | 'empty''ready'
heightHeightnumber300
seedSeednumber21