Diverging Bars

Bars grow away from a highlighted midline, up and down or left and right.

$149 once · every Pro piece

Customize

Mode

mirror

signed

Orientation

vertical

horizontal

Hours done

Range meter

Legend

row

none

panel

none

Pattern

Background

grid

dots

none

Status

ready

empty

Value labels

Height

Seed

Mirrored, it sets two periods back to back, today above and yesterday below: the current hour is the one hot pair, and hours still to come show yesterday as a hatched ghost so the shape of the day ahead is already there. Signed, it shows gains and losses either side of zero. The midline is a 2px gap with a hairline in it, so the halves never touch. Point at a period or step with the arrow keys: the rest step back, the header totals roll to that period and a panel reads both values and the change. An optional range meter underneath slides a caret through the day's low to high.

Install

npx shadcn@latest add @obsyde/diverging-bars

Needs your licence key · Get Pro

Usage

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

import { DivergingBars } from '@/components/obsyde/ember/diverging-bars/DivergingBars';

export function Example() {
  return (
    <DivergingBars mode="mirror" />
  );
}

Files

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

ember/diverging-bars/DivergingBars.tsxcomponent
ember/diverging-bars/diverging-bars.cssstyles
ember/diverging-bars/DivergingBarsDemo.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/marks.tsxshared
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

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`mode`Mode	`'mirror' \| 'signed'`	`'mirror'`
`orientation`Orientation	`'vertical' \| 'horizontal'`	`'vertical'`
`hoursDone`Hours done	`number`	`24`
`rangeMeter`Range meter	`boolean`	`false`
`legend`Legend	`'row' \| 'none'`	`'row'`
`tooltip`Tooltip	`'panel' \| 'none'`	`'panel'`
`pattern`Pattern	`'none' \| 'diagonal-up' \| 'diagonal-down' \| 'dots' \| 'vertical' \| 'crosshatch'`	`'none'`
`background`Background	`'grid' \| 'dots' \| 'none'`	`'grid'`
`status`Status	`'ready' \| 'loading' \| 'empty'`	`'ready'`
`valueLabels`Value labels	`boolean`	`false`
`height`Height	`number`	`260`
`seed`Seed	`number`	`6`