Skip to main content

The Candlestick Series type

Candlestick Series or JavaScript Stock Charts can be created using the FastCandlestickRenderableSeries type📘.

tip

The JavaScript Candlestick Chart Example can be found in the SciChart.Js Examples Suite > Candlestick Chart on Github, or our live demo at scichart.com/demo.

Above: The JavaScript Candlestick Series Chart example from the SciChart.js Demo

Create a Candlestick Series​

To create a Javascript Candlestick Chart with SciChart.js, use the following code:

// Demonstrates how to create a Candlestick chart with SciChart.js
const {
    SciChartSurface,
    CategoryAxis,
    NumericAxis,
    FastCandlestickRenderableSeries,
    OhlcDataSeries,
    SciChartJsNavyTheme
} = SciChart;
// or, for npm, import { SciChartSurface, ... } from "scichart"

const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme()
});

sciChartSurface.xAxes.add(new CategoryAxis(wasmContext));
sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, { 
        labelPrefix: "$", 
        labelPrecision: 2 
    })
);

// Data format is { dateValues[], openValues[], highValues[], lowValues[], closeValues[] }
const { dateValues, openValues, highValues, lowValues, closeValues, volumeValues } = await getCandles(
    "BTCUSDT",
    "1h",
    100
);

// Create and add the Candlestick series
const candlestickSeries = new FastCandlestickRenderableSeries(wasmContext, {
    dataSeries: new OhlcDataSeries(wasmContext, {
        xValues: dateValues,
        openValues,
        highValues,
        lowValues,
        closeValues
    }),
    strokeThickness: 1,
    dataPointWidth: 0.7,
    brushUp: "#33ff3377",
    brushDown: "#ff333377",
    strokeUp: "#77ff77",
    strokeDown: "#ff7777"
});
sciChartSurface.renderableSeries.add(candlestickSeries);

This results in the following output:

The above example makes a web call to Binance to fetch Bitcoin/USD prices. If you see a blank chart, check the Js console as this web call may be blocked. You can always edit the Codepen to substitute your own data!

In the example above:

A CategoryAxis📘 is necessary if you have Forex or Stock market data which includes weekend or overnight gaps, as this axis type measures by x-index, not by x-value. For CryptoCurrency data the DateTimeNumericAxis📘 can be used as these are 24/7 markets.

You can format the date labels on the XAxis by following the instructions on the Axis Label Formatting page.

Adding Volume Bars to a Candlestick Chart​

In the SciChart.js demo - Candlestick Charts - volume bars are docked to the bottom of the chart. Here's how to do this with SciChart.js.

// Add a secondary axis for the volume bars
sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, { 
        id: "VolumeAxisId", 
        isVisible: false, 
        growBy: new NumberRange(0, 4) 
    })
);

// Fetch data. Format is { dates[], opens[], highs[], lows[], closes[], volumes[] }
const { dateValues, openValues, highValues, lowValues, closeValues, volumeValues } = await getCandles(
    "BTCUSDT",
    "4h",
    100
);

// Add a column series to render the volume bars
sciChartSurface.renderableSeries.add(
    new FastColumnRenderableSeries(wasmContext, {
        dataSeries: new XyDataSeries(wasmContext, { 
            xValues: dateValues, 
            yValues: volumeValues 
        }),
        yAxisId: "VolumeAxisId",
        strokeThickness: 0,
        dataPointWidth: 0.7,
        opacity: 0.47
    })
);

// continue to add the candlestick series to the chart...

Here's how the example looks now:

Painting Candles with Different Colors​

tip

It is possible to define the colour of specific OHLC Bars using the PaletteProvider API.

For more info on how to do this, see the PaletteProvider - Per-point colouring of Candlestick/Ohlc Charts documentation page.

See Also​