WaterfallChart

Waterfall/bar breakdown chart.

import { WaterfallChart } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

#More Examples

Overlapping

<WaterfallChart
  items={[
      {
        id: 'req1',
        label: 'Image 1',
        start: 0,
        end: 200,
        color: 'var(--sk-accent)'
      },
      {
        id: 'req2',
        label: 'Image 2',
        start: 50,
        end: 180,
        color: 'var(--sk-success)'
      },
      {
        id: 'req3',
        label: 'Font',
        start: 100,
        end: 300,
        color: 'var(--sk-warning)'
      },
      {
        id: 'req4',
        label: 'Script',
        start: 200,
        end: 450,
        color: 'var(--sk-error)'
      }
    ]}
/>

Empty

<WaterfallChart items={[]} />

#Props

Prop	Type	Default	Description
`items` *	`WaterfallItem[]`	—	Array of timeline items to render.
`height`	`number`	`24`	Row height in pixels.
`labelWidth`	`number`	`120`	Width of the label column in pixels.
`tickCount`	`number`	`5`	Number of tick marks on the time axis header.
`class`	`string`	—	Additional CSS classes.
`style`	`import('solid-js').JSX.CSSProperties`	—	Inline styles.

* required prop.

#Design Tokens

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.

--sk-bg-tertiary
--sk-border
--sk-font-size-xs
--sk-radius-sm
--sk-space-sm
--sk-text-muted
--sk-text-secondary