ChartSpire

Appearance

Getting Started ​

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

Installation ​

NPM / pnpm / Yarn

bash
npm install @chartspire/ui
# or
pnpm add @chartspire/ui
# or
yarn add @chartspire/ui

The published @chartspire/ui 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

html
<script src="https://unpkg.com/@chartspire/ui/bundle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@chartspire/ui/style.css">
javascript
// UMD global: chartspireui (see vite lib name in build)
const chart = new chartspireui.ChartSpire({
  container: document.getElementById('chart-container'),
  // ...
})

Published assets ​

Use caseImport / URLBuilt file in package
Bundlers (ESM)import { ChartSpire } from '@chartspire/ui'dist/chartspire-ui.js
Bundlers (stylesheet)import '@chartspire/ui/style.css'dist/chartspire-ui.css
CDN script (UMD)https://unpkg.com/@chartspire/ui/bundle.jsdist/chartspire-ui.umd.js
CDN stylesheethttps://unpkg.com/@chartspire/ui/style.cssdist/chartspire-ui.css
Binance datafeed (optional)import BinanceDataFeed from '@chartspire/ui/datafeeds/binance'dist/datafeeds/binance.js
Default datafeed (optional)import DefaultDataFeed from '@chartspire/ui/datafeeds/default'dist/datafeeds/default.js
Datafeed common utilities (optional)import { RateLimitedWebSocketQueue } from '@chartspire/ui/datafeeds/common'dist/datafeeds/common.js

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

Optional datafeeds and your app bundle ​

Importing @chartspire/ui brings in the core chart library only. Optional datafeeds are separate entry points — they are not added to your production bundle unless you import them.

typescript
// Core only — DefaultDataFeed / BinanceDataFeed code is NOT in this bundle
import { ChartSpire } from '@chartspire/ui'

// Optional — only included if you add this import
import DefaultDataFeed from '@chartspire/ui/datafeeds/default'
What you importIn your built app?
@chartspire/uiYes — core chart UI
@chartspire/ui/datafeeds/defaultOnly if you import it
@chartspire/ui/datafeeds/binanceOnly if you import it
@chartspire/ui/datafeeds/commonOnly if you import it
Your own DataFeed classOnly your implementation

options.dataFeed is required, but it can be a custom feed with no ChartSpire datafeed import at all.

npm install downloads the full published package (core + optional feeds + source files) into node_modules. That affects install size on disk, not what your bundler ships to users.

See Data Access for built-in feeds vs custom implementations.

Stylesheet ​

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).

EnvironmentJavaScriptStylesheet
Bundlers (Vite, Webpack, etc.)import { ChartSpire } from '@chartspire/ui'import '@chartspire/ui/style.css'
CDN<script src="https://unpkg.com/@chartspire/ui/bundle.js"></script><link rel="stylesheet" href="https://unpkg.com/@chartspire/ui/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 ​

typescript
import { ChartSpire, SYMBOL_TYPE } from '@chartspire/ui'
import DefaultDataFeed from '@chartspire/ui/datafeeds/default'
import '@chartspire/ui/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):

typescript
import BinanceDataFeed from '@chartspire/ui/datafeeds/binance'

Required options: container, enabledSymbolTypes, symbol, interval, dataFeed. See Type Reference for Symbol, Interval, and SYMBOL_TYPE, and Widget API — Constructor for the full configuration reference.

React Example ​

tsx
import { useEffect, useRef } from 'react'
import { ChartSpire, SYMBOL_TYPE } from '@chartspire/ui'
import DefaultDataFeed from '@chartspire/ui/datafeeds/default'
import '@chartspire/ui/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 ​

Copyright © 2026 ChartSpire