Interactive playground
Explore the complete chart on live Hyperliquid data, with the header, drawing tools, and settings.
This is the same playground served by npm run demo, using the local @bloxwap/chart build. Open it in fullscreen or a separate tab for more room.
Try the controls
- Drag the canvas to pan and scroll to zoom. Scroll toward the left edge and older history pages in.
- Pick a timeframe from 1m to 1M in the header. The paging datafeed reloads the chart for it.
- Open the header's chart-type menu to try six series types, including Heikin Ashi and hollow candles, or Indicators to search and add any of the 20 built-in indicators.
- Switch the price scale between Auto, %, and Log in the header or at the foot of the price axis, and save a PNG with the snapshot button.
- Choose a drawing tool in the rail and place its points on the chart. Use Undo and Redo to experiment with your drawings.
- Right-click the chart, an indicator, or a drawing for its context menu. Settings… opens the chart settings, the study's settings, or the drawing's style bar.
- Open the gear at the bottom of the control rail to change candles, scales, labels, and canvas appearance.
- Pick a light, dark, or system theme from the theme menu, or collapse the drawing rail for more canvas space.
On screens under 600px wide, the control rail's buttons move into the header and the drawing rail starts collapsed. Use the toolbar toggle to show it.
Data
The chart shows the BTC perpetual from Hyperliquid, with live prices from its websocket. A dashed blue mark line follows the live price. A dotted last line starts on the latest close and moves to the previous bar's close each time a new bar opens, read back with chart.getData() as in the migration guide. If Hyperliquid can't be reached, the playground switches to a simulated random walk served through the same datafeed.
The settings card's Playback and data section pauses prices with Live feed, toggles the navigation arrows, and switches datasets. Gaps (1h) turns on the continuous time axis, so missing buckets show as gaps. Volume, markers, and example drawings are included to get you started.
Click inside the chart to use its keyboard shortcuts, including undo/redo. The embedded playground keeps those shortcuts separate from documentation search and page navigation.
Build the same integration
Follow the TradingView migration guide and the toolbar and settings guide, or inspect the complete demo on GitHub.