Radial Histogram

A day around a dial, drawn as a radial instrument: a tight tick ring just outside the hole, hour labels well outside the values, faint value rings, and bins that glow outward (dim at the root, full strength at the tip) as arc bars or columns of dots at even density.

$149 once · every Pro piece

Customize

Bins

Marks

bars

dots

Now (hour, −1 off)

Compare yesterday

Scrubber

Outward ramp

Value rings

Hole

Size

Status

ready

empty

Seed

Give it a “now” and later bins become the future: yesterday's values as hatched ghosts, with the scrubber resting on now and its dot breathing in the accent. Move around the centre and the scrubber springs to the pointer's angle (gradient, solid or dashed); the bin under it heats while the others step back, and the centre rolls to it on per-digit mass and rewrites itself as a sentence (“+18 vs yesterday”, “forecast 18:00”). Bins cascade outward clockwise on entry; arrow keys step bins; loading and empty states.

Install

npx shadcn@latest add @obsyde/radial-histogram

Needs your licence key · Get Pro

Usage

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

import { RadialHistogram } from '@/components/obsyde/ember/radial-histogram/RadialHistogram';

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

Files

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

ember/radial-histogram/RadialHistogram.tsxcomponent
ember/radial-histogram/radial-histogram.cssstyles
ember/radial-histogram/RadialHistogramDemo.tsxdemo
ember/viz-kit/viz-kit.cssshared
ember/viz-kit/size.tsshared
ember/viz-kit/shape.tsshared
ember/viz-kit/scale.tsshared
ember/viz-kit/roll.tsshared
ember/shared/rolling-number.cssshared
ember/shared/spring.tsshared
ember/shared/accent.tsshared
ember/viz-kit/patterns.tsxshared
ember/viz-kit/motion.tsshared
ember/viz-kit/focus.tsshared
ember/shared/ember.cssshared
ember/viz-kit/touch.tsshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`bins`Bins	`'24' \| '48'`	`'24'`
`mark`Marks	`'bars' \| 'dots'`	`'bars'`
`nowHour`Now (hour, −1 off)	`number`	`-1`
`compare`Compare yesterday	`boolean`	`false`
`scrubber`Scrubber	`'gradient' \| 'solid' \| 'dashed' \| 'none'`	`'gradient'`
`ramp`Outward ramp	`boolean`	`true`
`rings`Value rings	`boolean`	`true`
`inner`Hole	`number`	`0.36`
`size`Size	`number`	`360`
`status`Status	`'ready' \| 'loading' \| 'empty'`	`'ready'`
`seed`Seed	`number`	`8`