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

The published chartspire package includes the canvas chart engine inside chartspire-ui.js. You do not need a separate @chartspire/chartspire-chart install for runtime (that package is used at build time only).

CDN

<script src="https://unpkg.com/chartspire/bundle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/chartspire/style.css">

// UMD global: chartspireui (see vite lib name in build)
const chart = new chartspireui.ChartSpire({
  container: document.getElementById('chart-container'),
  // ...
})

Published assets

Use case	Import / URL	Built file in package
Bundlers (ESM)	import { ChartSpire } from 'chartspire'	dist/chartspire-ui.js
Bundlers (stylesheet)	import 'chartspire/style.css'	dist/chartspire-ui.css
CDN script (UMD)	https://unpkg.com/chartspire/bundle.js	dist/chartspire-ui.umd.js
CDN stylesheet	https://unpkg.com/chartspire/style.css	dist/chartspire-ui.css
Binance datafeed (optional)	import BinanceDataFeed from 'chartspire/datafeeds/binance'	dist/datafeeds/binance.js

Only the public paths in the left column are supported in application code. Do not import from dist/ directly.

Stylesheet (required)

ChartSpire ships as JavaScript + CSS. The JS bundle does not inject UI styles at runtime — you must load the stylesheet once in your app (or via a <link> tag on CDN).

Environment	JavaScript	Stylesheet
Bundlers (Vite, Webpack, etc.)	import { ChartSpire } from 'chartspire'	import 'chartspire/style.css'
CDN	<script src="https://unpkg.com/chartspire/bundle.js"></script>	<link rel="stylesheet" href="https://unpkg.com/chartspire/style.css">

Load the CSS once at your app entry (for example main.tsx or index.html), not inside every chart component. Without it, toolbars, modals, watchlist, and other UI will appear unstyled.

Minimal Example

import { ChartSpire, DefaultDataFeed, SYMBOL_TYPE } from 'chartspire'
import 'chartspire/style.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 DefaultDataFeed({
    http: {
      baseUrl: 'https://api.example.com',
      endpoints: {
        search: '/v1/market-data/symbols',
        historical: '/v1/market-data/candles',
        price: '/v1/market-data/price'
      }
    },
    websocket: {
      enabled: true,
      url: 'wss://stream.example.com/v1/market-data'
    }
  })
})

For the built-in Binance WebSocket feed (optional, separate bundle):

import BinanceDataFeed from 'chartspire/datafeeds/binance'

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

React Example

import { useEffect, useRef } from 'react'
import { ChartSpire, DefaultDataFeed, SYMBOL_TYPE } from 'chartspire'
import 'chartspire/style.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 DefaultDataFeed({
        http: {
          baseUrl: 'https://api.example.com',
          endpoints: {
            search: '/v1/market-data/symbols',
            historical: '/v1/market-data/candles',
            price: '/v1/market-data/price'
          }
        },
        websocket: {
          enabled: true,
          url: 'wss://stream.example.com/v1/market-data'
        }
      })
    })

    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
• Connect Your Backend — End-to-end guide for your own market data API
• Data Access — Custom data feeds and DefaultDataFeed
• API — Full constructor and runtime reference