Skip to content
Get Pro
Utilities

Chart States

Loading, empty and ready on one chart instance, crossfading without a remount.

$149 once · every Pro piece

Customize

Loading is a shimmering placeholder grid with a pulse travelling along a placeholder curve and a quiet shimmering label, or a diagonal sheen, grey pills or a cell field; empty is a faint baseline, a muted message, a hint and an action. Then the reveal modes on a line and bars: a sweep on one steep ease-in-out curve, a cooling entry that draws in the accent and cools to grey behind the leading edge so only the live point keeps its heat, a fade, or nothing; bars land on springs whose mass grows with value. Finally a data change: the shape morphs in 500ms while the previous one lingers as a 1px ash trace and cools away.

Install

npx shadcn@latest add @obsyde/chart-states

Needs your licence key · Get Pro

Usage

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

import { ChartStatesDemo } from '@/components/obsyde/ember/chart-states/ChartStatesDemo';

export function Example() {
  return (
    <ChartStatesDemo view="cycle" status="loading" auto />
  );
}

Files

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

  • ember/chart-states/ChartStatesDemo.tsxcomponent
  • ember/chart-states/chart-states.cssstyles
  • 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/Axis.tsxshared
  • ember/viz-kit/annotations.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
viewView'cycle' | 'reveal' | 'ghost''cycle'
statusStatus'loading' | 'ready' | 'empty''loading'
variantLoading'pulse' | 'sweep' | 'bars' | 'cells''pulse'
revealReveal'sweep' | 'cool' | 'rise' | 'fade' | 'none''sweep'
autoAuto cyclebooleantrue
seedSeednumber5