Skip to main content

​
polynode-charts

A zero-dependency browser charting library purpose-built for prediction market data and real-time crypto price streams. Renders on Canvas 2D with a 60fps animation loop, triple-layer dirty-flag rendering, and native touch/pinch support.
This is the visualization companion to polynode-sdk. The data SDK (polynode-sdk) handles REST API calls, WebSocket streaming, trading, and caching in Node.js. This package (polynode-charts) renders that data as interactive charts in the browser. They are separate npm packages.
# Data layer (Node.js / server)
npm install polynode-sdk

# Visualization layer (browser)
npm install polynode-charts
polynode-charts also includes its own built-in data providers (REST, WebSocket, short-form discovery) so you can use it standalone without polynode-sdk if you only need charts.

​
Features

  • Candlestick, line, area, and volume series types
  • Live streaming mode with smooth lerp animation between ticks
  • Orderbook visualization with depth chart and spread display
  • Short-form market overlays with price-to-beat lines and live odds
  • Multi-outcome support for prediction markets (up to 20+ outcomes)
  • Auto-scaling price axis with probability mode (0-100%)
  • Interactive pan, zoom, scroll, pinch-to-zoom on mobile
  • Crosshair with snap-to-candle and OHLC tooltip

​
Install

npm install polynode-charts

​
Quick Start

import { createChart } from 'polynode-charts'

const chart = createChart('#my-chart', {
  layout: { background: '#0a0e17', textColor: '#556' },
})

const series = chart.addCandleSeries({
  upColor: '#22c55e',
  downColor: '#ef4444',
})

series.setData([
  { time: 1710000000000, open: 0.52, high: 0.55, low: 0.50, close: 0.54 },
  { time: 1710003600000, open: 0.54, high: 0.58, low: 0.53, close: 0.57 },
  // ...
])

​
Architecture

The chart uses a triple-layer canvas stack per pane:
LayerZ-IndexContent
Background1Grid lines, axis labels
Data2Series (candles, lines, areas, volumes)
Overlay3Crosshair, tooltips, interaction capture
Each layer only redraws when its dirty flag is set, keeping GPU load minimal even at 60fps. The animation loop runs continuously for live mode (smooth phantom points, pulsing dots) but skips unchanged layers.

​
Series Types

TypeMethodData ShapeUse Case
CandleaddCandleSeries()OhlcDataMarket price history
LineaddLineSeries()LineDataLive crypto prices, single-outcome tracking
AreaaddAreaSeries()LineDataProbability trends with gradient fill
VolumeaddVolumeSeries()VolumeDataTrading volume bars (auto-paned at 22%)

​
Data Providers

The SDK includes three built-in data providers for polynode endpoints:
  • PolynodeProvider — REST + polling for market candles, search, events, multi-outcome charts
  • PolynodeOBProvider — WebSocket orderbook streaming with zlib decompression
  • ShortFormProvider — Short-form crypto market discovery with live odds rotation
All providers are optional. The chart itself is provider-agnostic and works with any data source.

​
Live Demo

See the full interactive demo at pn-charts.pages.dev.