Getting Started

This guide walks you through installing ChartSpire and creating your first chart.

Installation

NPM / pnpm / Yarn

npm install chartspire
# or
pnpm add chartspire
# or
yarn add chartspire

CDN

<script src="https://unpkg.com/chartspire/dist/chartspire-ui.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/chartspire/dist/chartspire-ui.css">

Minimal Example

import { ChartSpire, BinanceDataFeed, SYMBOL_TYPE } from 'chartspire'
import 'chartspire/dist/chartspire-ui.css'

const chart = new ChartSpire({
  container: document.getElementById('chart-container'),
  enabledSymbolTypes: [SYMBOL_TYPE.CRYPTO],
  symbol: { symbol: 'BTCUSDT', type: SYMBOL_TYPE.CRYPTO },
  interval: { multiplier: 1, timespan: 'day', text: '1D' },
  theme: 'Dark Theme',
  dataFeed: new BinanceDataFeed()
})

Required options: container, enabledSymbolTypes, symbol, interval, dataFeed. See API for the full configuration reference.

React Example

import { useEffect, useRef } from 'react'
import { ChartSpire, BinanceDataFeed, SYMBOL_TYPE } from 'chartspire'
import 'chartspire/dist/chartspire-ui.css'

function TradingChart() {
  const chartRef = useRef<ChartSpire | null>(null)
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!containerRef.current || chartRef.current) return

    chartRef.current = new ChartSpire({
      container: containerRef.current,
      enabledSymbolTypes: [SYMBOL_TYPE.CRYPTO],
      symbol: { symbol: 'BTCUSDT', type: SYMBOL_TYPE.CRYPTO },
      interval: { multiplier: 1, timespan: 'day', text: '1D' },
      theme: 'Dark Theme',
      dataFeed: new BinanceDataFeed()
    })

    return () => {
      chartRef.current?.destroy()
      chartRef.current = null
    }
  }, [])

  return <div ref={containerRef} style={{ width: '100%', height: '600px' }} />
}

Next Steps

• Chart Types — Candlestick, renko, Heikin-Ashi, line, area
• Indicators — Built-in technical indicators and overlays
• Multi-Chart — Multiple charts with symbol sync
• Data Access — Custom data feeds and DefaultDataFeed
• API — Full constructor and runtime reference