> ## Documentation Index
> Fetch the complete documentation index at: https://docs.polynode.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

> Create your first chart in under 5 minutes

# Getting Started

## Installation

```bash theme={null}
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.

```html theme={null}
<div id="chart" style="height: 400px;"></div>
```

```typescript theme={null}
import { createChart } from 'polynode-charts'

const chart = createChart('#chart')
```

You can also pass an `HTMLElement` directly:

```typescript theme={null}
const el = document.getElementById('chart')
const chart = createChart(el)
```

## Add a Series

```typescript theme={null}
// 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 },
])
```

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

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

## Chart Options

```typescript theme={null}
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()`:

```typescript theme={null}
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:

```typescript theme={null}
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:

```typescript theme={null}
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

```typescript theme={null}
chart.remove()  // stops animation, detaches listeners, removes DOM
```

## Next Steps

* [API Reference](/charts/api-reference) — full Chart, Series, and Scale APIs
* [Data Providers](/charts/data-providers) — connect to polynode REST, WebSocket, and short-form endpoints
* [Live Streaming](/charts/live-streaming) — real-time crypto prices with price-to-beat overlays