Series and appearance

Series typesCopy Anchor Link

chart.updateConfig({
  series: {
    type: 'candlestick',
    upColor: '#bcf582',
    downColor: '#ee7992',
    bodyVisible: true,
    borderVisible: false,
    wickVisible: true,
    colorByPreviousClose: false,
  },
});

Wick and border colors inherit the body colors when their configured strings are empty. colorByPreviousClose compares a candle's close to the preceding close; the first candle falls back to its own open.

For a separate volume pane alongside price candles, add the built-in vol indicator instead of changing the main series to histogram. For volume bars along the bottom of the price pane, as TradingView draws them, turn on the volume overlay:

chart.updateConfig({ volume: { overlay: true, opacity: 0.5, height: 0.2 } });

Hollow candlesCopy Anchor Link

hollow-candlestick colors each bar by the previous close (up when the close is at or above it; the first bar compares with its own open) and fills it by its own direction: a falling bar (close < open) is filled, a rising bar is drawn as a 1px outline. Wicks stop at a hollow body's outline and take the wick colors, which default to the body color. bodyVisible, borderVisible, and wickVisible apply as for candlesticks.

Heikin AshiCopy Anchor Link

heikin-ashi draws Heikin Ashi bars: close is the average of open, high, low, and close; open is the midpoint of the previous Heikin Ashi bar's open and close; high and low widen to include both. Time and volume carry over from your candle.

The transformed bars are computed once per data change, with a constant-time update while the last bar streams, never per frame. They are what the chart shows; your data stays as it is:

• The main series, autoscale, the last-price and countdown badges, the status line's OHLC, markers, and the volume overlay's colors use the Heikin Ashi bars.
• Drawing magnets snap to Heikin Ashi open, high, low, and close.
• subscribeCrosshairMove reports both: candle is your bar and displayCandle is the Heikin Ashi bar.
• Indicators keep computing from your real candles, not the Heikin Ashi values.

heikinAshi(candles), heikinAshiBar(candle, previous?), and updateHeikinAshi are exported for your own use.

Colors and themesCopy Anchor Link

Colors accept hex, RGB/RGBA, and color(display-p3 ...) strings. The core's built-in presets are partial configs that also set series colors matched to their background (bright wide-gamut candles on dark, higher-contrast candles on light):

import { CHART_THEMES } from '@bloxwap/chart';

chart.updateConfig(CHART_THEMES.dark);
chart.updateConfig({
  theme: { fontFamily: 'system-ui, sans-serif', monoFamily: 'monospace' },
  grid: { horizontal: true, vertical: false },
});

When using the toolbar, call toolbar.setTheme('dark') to synchronize its UI and the chart. A separate settings handle has settings.setTheme('dark') for its UI.

For a brand look, pass a preset such as createChart({ preset: 'bloxwapDark' }). Presets layer under theme and config, and presetChartTheme keeps their colors when the toolbar switches themes. See theming and presets.

Scale modesCopy Anchor Link

chart.updateConfig({
  priceAxis: { mode: 'percent', position: 'left', precision: 2 },
});

• regular uses the original prices.
• percent shows percentage change from the first visible close.
• indexed rebases that reference close to 100.
• logarithmic uses logarithmic spacing. Ranges that include zero or negative values use a signed log transform.

Percent and indexed references follow the visible range while autoscaling. With Auto disabled, the current price range and its reference stay fixed.

FormattingCopy Anchor Link

chart.updateConfig({
  priceAxis: { precision: null },
  formatters: {
    price: (price) => price.toFixed(2),
    time: (seconds) => new Date(seconds * 1000).toISOString().slice(0, 16),
  },
});

Explicit price-axis precision overrides the normal price formatter for numeric labels. Set it back to null to use default/custom formatting. See the configuration reference for all groups.