Getting Started

Create your first chart in under 5 minutes

Getting Started

Installation

npm install polynode-charts

The package has zero runtime dependencies. It ships as ESM and CJS with full TypeScript declarations.

Create a Chart

Every chart needs a container element with a defined height.

<div id="chart" style="height: 400px;"></div>

import { createChart } from 'polynode-charts'

const chart = createChart('#chart')

You can also pass an HTMLElement directly:

const el = document.getElementById('chart')
const chart = createChart(el)

Add a Series

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

candles.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 },
])

// Line chart
const line = chart.addLineSeries({
  color: '#f7931a',
  lineWidth: 2,
  smooth: true,
})

line.setData([
  { time: 1710000000000, value: 72500 },
  { time: 1710000001000, value: 72510 },
])

Chart Options

const chart = createChart('#chart', {
  layout: {
    background: '#0a0e17',
    textColor: '#556',
    fontFamily: '"SF Mono", monospace',
    fontSize: 10,
  },
  grid: {
    horzLines: { color: 'rgba(100, 120, 150, 0.06)' },
    vertLines: { visible: false },
  },
  rightPriceScale: {
    mode: 'probability',  // clamps axis to 0-100%
  },
})

Live Streaming

For real-time data, use update() instead of setData():

const series = chart.addLineSeries({
  color: '#14f195',
  showDot: true,
  dotColor: '#14f195',
})

// Enable live mode — smooth phantom point between ticks
series.setLive(true)

// Auto-scroll to latest data
chart.timeScale().goLive()

// Push updates as they arrive
ws.onmessage = (e) => {
  const { price } = JSON.parse(e.data)
  series.update({ time: Date.now(), value: price })
}

In live mode, the chart adds a phantom leading point that lerps smoothly to the latest value, giving fluid motion even with infrequent ticks. A pulsing dot marks the current price.

Max Data Length

For streaming use cases, cap the data buffer to prevent memory growth:

series.setMaxLength(600)  // keep last 600 points (~10 min at 1/sec)

Older points are dropped from the front as new ones arrive.

Volume Pane

Adding a volume series automatically creates a second pane at 22% height:

const volume = chart.addVolumeSeries({
  upColor: 'rgba(34, 197, 94, 0.4)',
  downColor: 'rgba(239, 68, 68, 0.4)',
})

volume.setData([
  { time: 1710000000000, value: 15000, color: '#22c55e' },
  { time: 1710003600000, value: 23000, color: '#ef4444' },
])

Cleanup

chart.remove()  // stops animation, detaches listeners, removes DOM

Next Steps

• API Reference — full Chart, Series, and Scale APIs
• Data Providers — connect to polynode REST, WebSocket, and short-form endpoints
• Live Streaming — real-time crypto prices with price-to-beat overlays