The live chart

What it is, and what it is not

One canvas, three modes: a line, candlesticks, or several series at once. The tip glides toward each new value, the time axis scrolls continuously instead of jumping a bar at a time, the price range eases when it changes, and a new candle grows from its open. It has no runtime dependencies and ships no stylesheet.

It is not a trading screen. There are no drawing tools, no indicators and no datafeed contract. It does have what a compact live view needs: a crosshair with tooltips, reference lines you can drag (working orders, alerts, targets), an order-ticket mode, markers for fills, scrolling back through history and zooming. Where a reader needs to study a market, mount the full chart; where they need to glance at one, or act on one price, mount this.

Vanilla JavaScript

createLiveChart(element, options) mounts into any element that has a size. Keep the handle: update() merges new options in, and destroy() removes the chart, its observers and its animation frame.

import { createLiveChart } from '@warburgai/vp-charts/live';

const el = document.getElementById('btc-card');   // give it a height
const points = [];                                // { time, value }, oldest first

const chart = createLiveChart(el, {
  data: points,
  value: 0,
  color: '#3b82f6',
  theme: 'dark',
  window: 60,               // seconds of history on screen
  showValue: true,
  showChange: 'percent',
});

// On every tick from your own feed:
function onTick(price, unixSeconds) {
  points.push({ time: unixSeconds, value: price });
  chart.update({ data: points, value: price });
}

// When the card goes away:
chart.destroy();

Without a bundler, the global build defines VPLive and nothing else:

<div id="btc-card" style="height: 160px"></div>

<script src="/vp-charts/live/vp-live.global.js"></script>
<script>
  const chart = VPLive.createLiveChart(document.getElementById('btc-card'), {
    data: [],
    value: 0,
    theme: 'light',
  });
</script>

React

The component mounts the engine once and hands it the full prop set on every render; the engine eases between them, so React never re-renders per frame and callbacks may be fresh closures. It fills its parent, so give the parent a height. Unmounting destroys the chart, which is the teardown the install page asks you to write by hand for the full chart.

import { LiveChart } from '@warburgai/vp-charts/live/react';

export function PriceCard({ points, last }: {
  points: { time: number; value: number }[];
  last: number;
}) {
  return (
    <div style={{ height: 180 }}>
      <LiveChart
        data={points}
        value={last}
        theme="dark"
        windows={[
          { label: '1m', secs: 60 },
          { label: '5m', secs: 300 },
        ]}
        showValue
        showChange="percent"
      />
    </div>
  );
}

Feeding it data

It fetches nothing. You pass the points you already have and it draws them; where they come from is your feed, your websocket or your own server. Times are unix SECONDS, fractional allowed. A millisecond timestamp puts every point thousands of years in the future and the plot reads empty.

Nothing the chart reports is an eased number. onHover and the tooltip read your own points, so a value a reader hovers is a value you supplied, never one the animation was passing through.

Options

Every option is optional. update() merges a partial set; the React component takes them as props. Rich options take true (the defaults), false (off) or a config object. The types and every default are in live/index.d.ts.

Interaction

Annotations

Your own elements

Where the built-in drawing is not enough, hand the chart an element and it positions it every frame: renderTooltip, renderMarker, renderReferenceLine (and renderOffAxisReferenceLine for the off-screen state only), renderThresholdBadge, and render on topLabel or bottomLabel. Each function receives the live values (the price, its formatted text, whether it is in range, which edge it is pinned to) and is called again only when they change, so return the same element after updating it.

const tip = document.createElement('div');
tip.className = 'my-tooltip';

createLiveChart(el, {
  data, value,
  scrub: { tooltipPlacement: 'top' },
  renderTooltip: (ctx) => {
    tip.textContent = `${ctx.valueStr} · ${ctx.timeStr}`;
    return tip;
  },
});

renderOverlay(ctx) mounts one full-size element and hands it the price and time mapping: ctx.priceToY, ctx.yToPrice, ctx.timeToX, ctx.xToTime, and ctx.onFrame(cb), called after every frame with that frame's scale, so your own tags follow the axis as it rescales. In React, useChartFrame, usePriceY and useTimeX do the same from a component without re-rendering it. LiveChartTransition cross-fades between charts by key, for switching symbols or timeframes.

The credit

Every chart carries a small VerticalProp logo at the bottom-left of the plot, at half opacity, linking to verticalprop.com. Its accessible name is "Chart by VerticalProp".

It is part of the licence, as the full chart's mark is: there is no option that hides it, in the library or on the embed. It sits inside the plot at 10 by 12 pixels so it does not take space from your layout.

Saving a frame

chart.snapshot() returns the current frame as a PNG data URL, for a share image or a thumbnail. The window buttons, chips and your own elements are HTML over the canvas, so they are not in it. In React, a ref on the component reaches snapshot(), resetZoom(), scale() and the engine; engineRef still works:

const engine = useRef<LiveChartEngine | null>(null);

<LiveChart data={points} value={last} engineRef={engine} />;

const png = engine.current?.snapshot();

LiveChartEngine is exported from @warburgai/vp-charts/live; the React entry imports its types from there, so the class is declared once and a handle from either entry has the same type.

Verifying it

The live/ files are listed in the same release-manifest.json as the rest of the package and covered by the same signature, so the verification step you already run checks them too. There is nothing separate to pin.