Delta Bars

Component 2

About

Want this built into your product? AI agents write the code, an engineer directs them: https://vibecoding.tech/services?utm_source=21st&utm_medium=component Book a call and say promo code 21ST to get a free 3-day development trial. Diverging daily delta ribbon for a pair of rivals — bars rise above the zero midline when A leads, drop below when B leads. Answers: "Who is ahead today, and by how much?"

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Delta Bars to your project and fits it to your theme.

Code

How Delta Bars is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { DeltaBars, type DeltaSeries } from '@/components/ui/delta-bars'

/**
 * Demo: daily request volume for two rival models over 30 days.
 * Deterministic synthetic waves: Atlas trends up and takes the lead
 * mid-month; one reporting gap (null on both) shows the missing-day hole.
 */

const N = 30

function wave(i: number, base: number, trend: number, amp: number, phase: number): number {
  return Math.round(
    base + i * trend + amp * Math.sin(i / 3.1 + phase) + amp * 0.5 * Math.sin(i / 1.6 + phase * 2)
  )
}

const ATLAS: DeltaSeries = {
  label: 'Atlas',
  values: Array.from({ length: N }, (_, i) => (i === 17 ? null : wave(i, 480_000, 9_500, 90_000, 0.4))),
}

const NOVA: DeltaSeries = {
  label: 'Nova',
  values: Array.from({ length: N }, (_, i) => (i === 17 ? null : wave(i, 590_000, 1_500, 80_000, 2.3))),
}

const X_LABELS = [
  { frac: 0.02, text: 'Jun 1' },
  { frac: 0.34, text: 'Jun 11' },
  { frac: 0.67, text: 'Jun 21' },
  { frac: 0.98, text: 'Jun 30' },
]

export default function DeltaBarsDemo() {
  return (
    <div className="mx-auto max-w-4xl p-6">
      <DeltaBars a={ATLAS} b={NOVA} xLabels={X_LABELS} />
    </div>
  )
}