Skip to content
Get Pro
Comparison

Bar Chart

Vertical bars on the viz-kit chart: single, grouped or stacked, morphing between layouts bar by bar on staggered springs.

$149 once · every Pro piece

Customize

The signature is the selected-value grammar: one bar runs hot with a dashed leader to its value pill, and the pill springs and rolls as you scrub. Options: squircle unit columns with a ring on the top unit, hatched remaining tracks, per-series patterns, gradient fills, positive and negative bars from a bright zero line, value labels thinned to avoid collisions, sort with FLIP springs, mass-by-value landing, reference lines with pills, a reference band, a trend line, a threshold that runs hot, event markers, the previous period as dashed ghosts, a legend that isolates, toggles and locks, panel or corner tooltips, grid or textured backgrounds, keyboard scrubbing with detents, and loading and empty states.

Install

npx shadcn@latest add @obsyde/bar-chart

Needs your licence key · Get Pro

Usage

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

import { BarChart } from '@/components/obsyde/ember/bar-chart/BarChart';

export function Example() {
  return (
    <BarChart series={2} mode="grouped" />
  );
}

Files

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

  • ember/bar-chart/BarChart.tsxcomponent
  • ember/bar-chart/bar-chart.cssstyles
  • ember/bar-chart/BarChartDemo.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
  • ember/viz-kit/annotations.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
modeMode'grouped' | 'stacked''grouped'
categoriesCategoriesnumber12
seriesSeriesnumber1
modeSwitchMode switchbooleanfalse
sortSwitchSort switchbooleanfalse
sortSort'none' | 'desc' | 'asc''none'
shapeShape'bar' | 'units''bar'
fillFill'solid' | 'gradient''solid'
trackTrack'none' | 'hatch' | 'solid''none'
selectedSelected barnumber-1
signedPositive & negativebooleanfalse
massMass landingbooleanfalse
refLinesReference lines'none' | 'min-max' | 'avg' | 'median' | 'all''none'
bandReference bandbooleanfalse
trendTrend'none' | 'dashed' | 'gradient''none'
thresholdThreshold'none' | 'above' | 'below''none'
annotationsMarkersbooleanfalse
compareComparebooleanfalse
legendLegend'row' | 'list' | 'none''row'
tooltipTooltip'panel' | 'corner' | 'none''panel'
patternPattern'none' | 'series' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''none'
backgroundBackground'grid' | 'dots' | 'hatch' | 'none''grid'
revealReveal'sweep' | 'cool' | 'fade' | 'none''sweep'
statusStatus'ready' | 'loading' | 'empty''ready'
valueLabelsValue labelsbooleanfalse
showAxisAxisbooleantrue
heightHeightnumber260
seedSeednumber5