Price Chart Types: Candlestick, Heikin-Ashi, Renko and Point & Figure

A SciTrader chart can draw prices in seven ways. Five are candle types: styles of the price series itself, which you can switch at any time. Two, Renko and Point & Figure, plot price moves rather than time, so they are studies, each with a pane of its own.

Price chart	How to get it	Plots
Candlestick	`ECandleType.Candlestick` (the default)	Time: one candle per interval
OHLC bars	`ECandleType.OhlcBars`	Time: one bar per interval
Line	`ECandleType.Line`	Time: the close of each interval
Mountain	`ECandleType.Mountain`	Time: the close, filled to the axis
Heikin-Ashi	`ECandleType.HeikinAshi`	Time: smoothed candles
Renko	`new RenkoStudy()`	Price: a brick for each move of a set size
Point & Figure	`new PointAndFigureStudy()`	Price: columns of X (rising) and O (falling) boxes

Candle Types: Candlestick, OHLC Bars, Line, Mountain and Heikin-Ashi

The price series is drawn by the chart's price study, OHLCStudy, usually the first study in studies. It can draw in any of the five candle types (ECandleType). Heikin-Ashi candles average each candle with the one before, which smooths out noise so trends are easier to see.

Setting the Starting Candle Type

Pass candleType to the OHLCStudy in the chart's studies. Leave it out for candlesticks:

import {
    CandleInterval, CoinbaseExchange, ECandleType, OHLCStudy, SciFinanceChartPanel, VolumeStudy,
} from "scichart-scitrader";

const financeChartPanel = await SciFinanceChartPanel.create(document.getElementById("chart"), {
    exchangeName: CoinbaseExchange.name,
    symbol: "ETH-USD",
    interval: CandleInterval.ONE_DAY,
    period: "1Y",
    studies: [
        new OHLCStudy({ candleType: ECandleType.HeikinAshi }), // the price series, as Heikin-Ashi candles
        new VolumeStudy(),
    ],
});

In React, pass the same studies in the config of SciFinanceChartView.

Changing the Candle Type at Runtime

Call setCandleType on the chart, financeChartPanel.financeApi. You don't need a reference to the OHLCStudy: the chart passes the new type on to its price study.

const chart = financeChartPanel.financeApi;

chart.setCandleType(ECandleType.OhlcBars); // redraw the price series as OHLC bars
chart.getCandleType(); // ECandleType.OhlcBars

// Fires after each setCandleType call, so a picker can follow changes made elsewhere
chart.candleTypeChanged.subscribe((type) => console.log("Candle type is now", type));

setCandleType swaps the price series in place: the data, zoom and other studies are untouched, and nothing reloads. A chart without an OHLCStudy ignores it.

candleTypeChanged fires only for setCandleType. The candle type is also a setting in the price study's Settings Form, and a change made there redraws the chart without raising it; getCandleType() still returns the new type.

CANDLE_TYPE_MENU_ITEMS lists the types with their labels, and the ready-made Candle Type Selector is a picker for them.

The candle type is saved with the chart.

Renko and Point & Figure Charts

Renko and Point & Figure charts ignore time. A new brick or column appears only when price moves far enough, however long that takes, which filters out small moves. So they are studies, not candle types: each draws in a pane of its own, below the price pane, with a category (index) axis.

import { PointAndFigureStudy, RenkoStudy } from "scichart-scitrader";

await financeChartPanel.financeApi.attachStudy(new RenkoStudy({ reversalAmount: 2 }));
await financeChartPanel.financeApi.attachStudy(new PointAndFigureStudy({ boxSize: 5, reversalAmount: 3 }));

Study	Option	Default	What it does
`RenkoStudy`	`brickSize`	Sized from the price range	The price move each brick stands for
`RenkoStudy`	`reversalAmount`	2	Bricks of opposite move needed to reverse direction
`PointAndFigureStudy`	`boxSize`	Sized from the price range	The price move each X or O box stands for
`PointAndFigureStudy`	`reversalAmount`	3	Boxes of opposite move needed to start a new column

Add them like any other study, when the chart is created or at runtime; see Add Technical Indicators to a Financial Chart.

TypeScript Example: Heikin-Ashi, Renko and Point & Figure Charts

An ETH-USD daily chart from Coinbase, drawn with Heikin-Ashi candles and a Renko pane below. The selector changes the candle type, and the buttons swap the Renko pane for a Point & Figure pane, or remove it.

The code for this example is found below.

import "scichart-scitrader/scitrader.css";
import {
    CandleInterval,
    CandleTypeSelector,
    CoinbaseExchange,
    defaultExchangeProvider,
    ECandleType,
    idbPriceStore,
    IStudy,
    OHLCStudy,
    PointAndFigureStudy,
    RenkoStudy,
    SciFinanceChartPanel,
} from "scichart-scitrader";

// This example expects this HTML:
// <div style="display: flex; flex-direction: column; height: 100%">
//     <div id="toolbar"></div>
//     <div id="chart" style="flex: 1; min-height: 0"></div>
// </div>

// Register a data source, once, at app startup
defaultExchangeProvider.registerExchange(CoinbaseExchange, idbPriceStore);

async function createChart() {
    const toolbar = document.getElementById("toolbar");
    Object.assign(toolbar.style, toolbarStyle);

    const financeChartPanel = await SciFinanceChartPanel.create(document.getElementById("chart"), {
        exchangeName: CoinbaseExchange.name, // name="Coinbase" matches the built-in CoinbaseExchange
        symbol: "ETH-USD",
        interval: CandleInterval.ONE_DAY,
        period: "1Y",
        // candleType on OHLCStudy sets the price series' starting style
        studies: [new OHLCStudy({ candleType: ECandleType.HeikinAshi }), new RenkoStudy()],
    });
    const chart = financeChartPanel.financeApi;

    // Candlesticks, OHLC bars, line, mountain or Heikin-Ashi: setCandleType redraws the price series
    // in place, without reloading data or moving the zoom
    const selector = CandleTypeSelector.create(toolbar, {
        value: ECandleType.HeikinAshi,
        onChange: (type) => chart.setCandleType(type),
    });

    // Renko and Point & Figure aren't candle types but studies: they plot price moves, not time,
    // so each draws in a pane of its own, on a category (index) axis.
    // Leave brickSize / boxSize unset to size them from the price range
    const showPane = (create?: () => IStudy) => {
        chart.studies.filter((s) => s instanceof RenkoStudy || s instanceof PointAndFigureStudy).forEach((s) => chart.detachStudy(s));
        if (create) chart.attachStudy(create());
    };
    toolbar.append(
        button("Renko", () => showPane(() => new RenkoStudy({ reversalAmount: 2 }))),
        button("Point & Figure", () => showPane(() => new PointAndFigureStudy({ reversalAmount: 3 }))),
        button("Neither", () => showPane())
    );

    // When the page goes away: selector.destroy(); financeChartPanel.cleanup();
    return { financeChartPanel, selector };
}

function button(text: string, onClick: () => void) {
    const b = document.createElement("button");
    b.textContent = text;
    b.onclick = onClick;
    Object.assign(b.style, buttonStyle);
    return b;
}

// The toolbar uses SciTrader's UI colours: its --st-ui-* CSS variables, with the stylesheet's defaults
const toolbarStyle: Partial<CSSStyleDeclaration> = {
    display: "flex",
    flexWrap: "wrap",
    alignItems: "center",
    gap: "8px",
    padding: "8px",
    background: "var(--st-ui-background, #2b2839)",
    borderBottom: "1px solid var(--st-ui-divider, rgba(255,255,255,0.1))",
};
const buttonStyle: Partial<CSSStyleDeclaration> = {
    padding: "4px 10px",
    border: "1px solid var(--st-ui-divider, rgba(255,255,255,0.1))",
    borderRadius: "6px",
    background: "var(--st-ui-surface, #373447)",
    color: "var(--st-ui-text, #ffffff)",
    font: "inherit",
    fontSize: "13px",
    cursor: "pointer",
};

createChart();

React Example: Heikin-Ashi, Renko and Point & Figure Charts

The same chart in React, with the React CandleTypeSelector from scichart-scitrader-react.

The code for this example is found below.

React

import "scichart-scitrader/scitrader.css";
import * as React from "react";
import {
    CandleInterval,
    CoinbaseExchange,
    defaultExchangeProvider,
    ECandleType,
    idbPriceStore,
    ISciFinanceChartPanelApi,
    ISciFinanceChartPanelConfig,
    IStudy,
    OHLCStudy,
    PointAndFigureStudy,
    RenkoStudy,
} from "scichart-scitrader";
import { CandleTypeSelector, SciFinanceChartView } from "scichart-scitrader-react";

// Register a data source, once, at app startup
defaultExchangeProvider.registerExchange(CoinbaseExchange, idbPriceStore);

export function PriceChartTypes() {
    const chartRef = React.useRef<ISciFinanceChartPanelApi>(null);
    // The selector is a controlled component: its value lives in React state
    const [candleType, setCandleType] = React.useState(ECandleType.HeikinAshi);

    // Create the config once per mounted chart: studies are live objects bound to one chart
    const config = React.useMemo<ISciFinanceChartPanelConfig>(
        () => ({
            exchangeName: CoinbaseExchange.name, // name="Coinbase" matches the built-in CoinbaseExchange
            symbol: "ETH-USD",
            interval: CandleInterval.ONE_DAY,
            period: "1Y",
            // candleType on OHLCStudy sets the price series' starting style
            studies: [new OHLCStudy({ candleType: ECandleType.HeikinAshi }), new RenkoStudy()],
        }),
        []
    );

    // Renko and Point & Figure aren't candle types but studies: they plot price moves, not time,
    // so each draws in a pane of its own, on a category (index) axis.
    // Leave brickSize / boxSize unset to size them from the price range
    const showPane = (create?: () => IStudy) => {
        const chart = chartRef.current;
        if (!chart?.isInitialized) return; // financeApi throws until the chart has initialised
        const finance = chart.financeApi;
        finance.studies.filter((s) => s instanceof RenkoStudy || s instanceof PointAndFigureStudy).forEach((s) => finance.detachStudy(s));
        if (create) finance.attachStudy(create());
    };

    // Fills its parent, so give the parent a height
    return (
        <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
            <div style={toolbarStyle}>
                {/* Candlesticks, OHLC bars, line, mountain or Heikin-Ashi: setCandleType redraws the
                    price series in place, without reloading data or moving the zoom */}
                <CandleTypeSelector
                    value={candleType}
                    onChange={(type) => {
                        setCandleType(type);
                        if (chartRef.current?.isInitialized) chartRef.current.financeApi.setCandleType(type);
                    }}
                />
                <button style={buttonStyle} onClick={() => showPane(() => new RenkoStudy({ reversalAmount: 2 }))}>
                    Renko
                </button>
                <button style={buttonStyle} onClick={() => showPane(() => new PointAndFigureStudy({ reversalAmount: 3 }))}>
                    Point &amp; Figure
                </button>
                <button style={buttonStyle} onClick={() => showPane()}>
                    Neither
                </button>
            </div>
            <div style={{ flex: 1, minHeight: 0 }}>
                <SciFinanceChartView ref={chartRef} config={config} />
            </div>
        </div>
    );
}

// The toolbar uses SciTrader's UI colours: its --st-ui-* CSS variables, with the stylesheet's defaults
const toolbarStyle: React.CSSProperties = {
    display: "flex",
    flexWrap: "wrap",
    alignItems: "center",
    gap: 8,
    padding: 8,
    background: "var(--st-ui-background, #2b2839)",
    borderBottom: "1px solid var(--st-ui-divider, rgba(255,255,255,0.1))",
};
const buttonStyle: React.CSSProperties = {
    padding: "4px 10px",
    border: "1px solid var(--st-ui-divider, rgba(255,255,255,0.1))",
    borderRadius: 6,
    background: "var(--st-ui-surface, #373447)",
    color: "var(--st-ui-text, #ffffff)",
    font: "inherit",
    fontSize: 13,
    cursor: "pointer",
};

SciFinanceChart Candle Type API

Member	What it does
`setCandleType(type)`	Changes the price series' candle type in place
`getCandleType()`	The current candle type
`candleTypeChanged`	Fires after the candle type changes, with the new type

SciFinanceChart.setCandleType, getCandleType and candleTypeChanged, and the ECandleType enum, with their TSDoc

/**
 * Change the price series rendering style (candlestick, OHLC bars, line,
 * mountain or Heikin-Ashi). Delegates to the default-pane
 * OHLC study, which swaps its renderable series in place (preserving data /
 * zoom / pan). No-op if there is no price study. Raises {@link candleTypeChanged}.
 */
setCandleType(type: ECandleType): void;

/** The current price rendering style. Defaults to candlestick when no price study exists. */
getCandleType(): ECandleType;

/**
 * Fires when the price series rendering style changes via {@link setCandleType}.
 * Carries the new {@link ECandleType} so UI controls can reflect external changes.
 */
candleTypeChanged: EventHandler<ECandleType>;

/**
 * The rendering style for the main price series of a finance chart.
 *
 * Candlestick / OhlcBars / Line / Mountain bind directly to the raw
 * {@link OhlcDataSeries}; HeikinAshi is derived via a `scichart-financial-tools`
 * filter (see {@link createPriceSeries}). All are **time-domain** — one mark per
 * time slot, on the price pane's shared time axis.
 *
 * Renko and Point & Figure are NOT candle types — they remap X off the time
 * domain (price-driven bricks / columns) and ship as their own studies
 * (`RenkoStudy` / `PointAndFigureStudy`) on dedicated `CategoryAxis` panes.
 *
 * String values (not numeric) so the choice round-trips cleanly through the
 * study descriptor / `toJSON` serialization and the `?candleType=` URL param.
 */
enum ECandleType {
    Candlestick = "Candlestick",
    OhlcBars = "OhlcBars",
    Line = "Line",
    Mountain = "Mountain",
    HeikinAshi = "HeikinAshi"
}

Where to read next

Candle Type Selector: a ready-made candle type picker.
Technical Indicators and Studies: every indicator you can add to the chart.
Add Technical Indicators to a Financial Chart: add Renko, Point & Figure and indicators at runtime.

Candle Types: Candlestick, OHLC Bars, Line, Mountain and Heikin-Ashi​

Setting the Starting Candle Type​

Changing the Candle Type at Runtime​

Renko and Point & Figure Charts​

TypeScript Example: Heikin-Ashi, Renko and Point & Figure Charts​

React Example: Heikin-Ashi, Renko and Point & Figure Charts​

SciFinanceChart Candle Type API​

Where to read next​