Skip to content

Chart Types

Built-in ways to display price: candlesticks, OHLC bars, area, Heikin-Ashi, and Renko. Switch via the top bar or setCustomStyles.

Usage

  1. Click the chart type selector in the top bar (candle icon + Charts label).
  2. Pick a type from the dropdown.
  3. The chart updates immediately.

For Renko, right-click the chart and choose Brick Size Settings to change brick size.

Chart type is saved with layouts.

Configuration

OptionTypeDefaultDescription
candleTypeEnabledbooleantrueShow/hide the top-bar chart type selector
typescript
new ChartSpire({
  candleTypeEnabled: true,
  // ...
})

See Widget API — Constructor for all options.

Available Chart Types

candle.typeDescription
candle_solidFilled candlesticks (default)
candle_strokeHollow candlesticks
candle_up_strokeHollow up, filled down
candle_down_strokeFilled up, hollow down
ohlcOHLC bars
areaArea chart (close price line with fill)
heikin_ashiHeikin-Ashi candles
renkoRenko bricks (price-based, not time-based)

Changing Chart Type via API

Use Widget API setCustomStyles:

typescript
import type { CandleType } from '@chartspire/ui'

chartspire.setCustomStyles({
  global: {
    candle: { type: 'area' as CandleType },
  },
})

Set on init via the constructor customStyles option:

typescript
new ChartSpire({
  customStyles: {
    global: {
      candle: { type: 'candle_solid' },
    },
  },
  // ...
})

For colors, price marks, area line, and Renko brick size, see Custom Styles — Candles.

Renko

Renko builds bricks when price moves by a minimum amount (candle.renko.brick.size), not on a time schedule.

typescript
chartspire.setCustomStyles({
  global: {
    candle: {
      type: 'renko',
      renko: {
        brick: { size: 10 },
      },
    },
  },
})

Behavior:

  • Switching to or from Renko reloads historical data and converts it to bricks.
  • Live updates use a Renko-specific subscription path.
  • Replay is disabled while Renko is active.