Orderbook stream

function OrderbookChart() {
  const { data, value } = useLiveTicks();
  const [book, setBook] = useState<OrderbookData>({ bids: [], asks: [] });

  useEffect(() => {
    // rebuild depth each tick / book update
    setBook(makeOrderbook(value));
  }, [value]);

  return (
    <div style={{ height: 280 }}>
      <LiveChart
        data={data}
        value={value}
        orderbook={book}
        theme="dark"
        color="#22c55e"
        momentum
      />
    </div>
  );
}

Kalshi-style orderbook stream. Bid and ask sizes float upward behind the price line.

makeOrderbook is your feed adapter — map exchange depth into [price, size][] for bids and asks.

Stream speed follows momentum and churn automatically; you only push fresh orderbook objects.

Full behavior: Orderbook guide.