Skip to content
Get Pro
Trends

Small Multiples

A grid of tiny charts that share one crosshair.

$149 once · every Pro piece

Customize

Scrub any tile with a pointer, a finger or the arrow keys and every tile scrubs to the same row: a hairline and a dot ride each curve and each value rolls in its corner, while the day rolls in the header. Only the tile leading at that row runs hot, so the eye finds the leader without a legend. The y scale is shared, so shapes compare by size, or each tile’s own, and switching tweens every domain. Tiles can be areas, lines or bars, sorted by latest value, change or peak, with an average hairline, a shared band of normal, hatched fills, and loading and empty states.

Install

npx shadcn@latest add @obsyde/small-multiples

Needs your licence key · Get Pro

Usage

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

import { SmallMultiples } from '@/components/obsyde/ember/small-multiples/SmallMultiples';

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

Files

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

  • ember/small-multiples/SmallMultiples.tsxcomponent
  • ember/small-multiples/small-multiples.cssstyles
  • ember/small-multiples/SmallMultiplesDemo.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/series.tsxshared
  • ember/viz-kit/Grid.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared
  • ember/viz-kit/annotations.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
countTilesnumber6
typeType'area' | 'line' | 'bars''area'
sharedScaleShared scalebooleantrue
scaleSwitchScale switchbooleanfalse
sortSort'none' | 'latest' | 'change' | 'peak''none'
hotHot tile'leader' | 'none''leader'
fillFill'gradient' | 'solid' | 'pattern''gradient'
averageAverage linebooleanfalse
bandBand of normalbooleanfalse
tileHeightTile heightnumber72
columnsColumns (0 = auto)number0
crosshairCrosshair'solid' | 'dashed' | 'gradient' | 'none''solid'
patternPattern'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''none'
backgroundBackground'none' | 'grid' | 'dots''none'
curveCurve'monotone' | 'linear' | 'catmull' | 'step''monotone'
revealReveal'sweep' | 'cool' | 'rise' | 'fade' | 'none''sweep'
statusStatus'ready' | 'loading' | 'empty''ready'
pointsPointsnumber30
seedSeednumber4