Skip to content
Get Pro
Trends

Horizon Chart

Many series in very little height. Each row folds its area into two to four bands laid over each other, so a large value reads as a brighter, denser stack rather than a taller one.

$149 once · every Pro piece

Customize

Values below the baseline fold the same way in a hatched, cooler ramp, mirrored up from the row's floor or hanging from its ceiling. One crosshair runs through every row, and the readouts on the right roll to the scrubbed day; the row furthest from its baseline at that moment is the one value in the accent. A Less → More legend isolates one fold level across all rows, and pointing at a row lets the others step back.

Install

npx shadcn@latest add @obsyde/horizon-chart

Needs your licence key · Get Pro

Usage

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

import { HorizonChart } from '@/components/obsyde/ember/horizon-chart/HorizonChart';

export function Example() {
  return (
    <HorizonChart
      rows={6}
      bands={3}
      mode="mirror"
      scale="shared"
      palette="mono"
    />
  );
}

Files

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

  • ember/horizon-chart/HorizonChart.tsxcomponent
  • ember/horizon-chart/horizon-chart.cssstyles
  • ember/horizon-chart/HorizonChartDemo.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/Legend.tsxshared
  • 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'
rowsRowsnumber6
bandsFoldsnumber3
modeNegatives'mirror' | 'offset''mirror'
scaleBand size'shared' | 'row''shared'
palettePalette'mono' | 'heat''mono'
rowHeightRow heightnumber32
readoutsReadoutsbooleantrue
legendLegend'levels' | 'none''levels'
tooltipTooltip'none' | 'panel' | 'corner''none'
crosshairCrosshair'solid' | 'dashed' | 'gradient' | 'none''solid'
patternNegative pattern'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''diagonal-up'
curveCurve'monotone' | 'linear' | 'catmull' | 'step''monotone'
revealReveal'sweep' | 'cool' | 'rise' | 'fade' | 'none''sweep'
statusStatus'ready' | 'loading' | 'empty''ready'
pointsPointsnumber90
seedSeednumber11