SciChart.js JavaScript 2D Charts API > 2D Chart Types > The Candlestick Series type
The Candlestick Series type

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

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

Fast, Realtime JavaScript Candlestick or Stock Charts by SciChart.js

Create a Candlestick Series

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

JavaScript Line Chart
Copy Code
import { SciChartSurface } from "scichart";
import { CategoryAxis } from "scichart/Charting/Visuals/Axis/CategoryAxis";
import { NumberRange } from "scichart/Core/NumberRange";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { OhlcDataSeries } from "scichart/Charting/Model/OhlcDataSeries";
import { FastCandlestickRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastCandlestickRenderableSeries";
import { closeValues, dateValues, highValues, lowValues, openValues } from "./data/data";

// Create a SciChartSurface with CategoryAxis on the XAxis
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
const xAxis = new CategoryAxis(wasmContext);
xAxis.growBy = new NumberRange(0.05, 0.05);
sciChartSurface.xAxes.add(xAxis);
// Create a NumericAxis on the YAxis
const yAxis = new NumericAxis(wasmContext);
yAxis.visibleRange = new NumberRange(1.1, 1.2);
yAxis.growBy = new NumberRange(0.1, 0.1);
yAxis.labelProvider.formatLabel = (dataValue: number) => dataValue.toFixed(3);
sciChartSurface.yAxes.add(yAxis);
// Create a OhlcDataSeries with open, high, low, close values
const dataSeries = new OhlcDataSeries(wasmContext, {
    xValues: dateValues, // XValues is number[] array of unix timestamps
    openValues, // Assuming open, high, low, close values are number[] arrays
    highValues,
    lowValues,
    closeValues,
});

// Create and add the Candlestick series
const candlestickSeries = new FastCandlestickRenderableSeries(wasmContext, {
    strokeThickness: 2,
    dataSeries,
    dataPointWidth: 0.5,
    brushUp: "#33ff33",
    brushDown: "#ff3333",
    strokeUp: "#77ff77",
    strokeDown: "#ff7777",
});
sciChartSurface.renderableSeries.add(candlestickSeries);

In the code above:

  • A Candlestick Series instance is created and added to the SciChartSurface.renderableSeries collection.
  • This requires a special dataseries type: OhlcDataSeries, which accepts X, Open, High, Low, Close values
  • We set the up/down stroke and fill colors via properties brushUpbrushDownstrokeUpstrokeDown properties.
  • We set dataPointWidth - which defines the fraction of width to occupy
  • We use a special axis type called the CategoryAxis which removes gaps in stock market data.

To learn more about the CategoryAxis see the page on Value Axis vs. CategoryAxis

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

Painting Candles with Different Colors

Candlestick series can be colored per-point or per line-segment using the PaletteProvider API. To use this, we must create a class (typescript) or object (javascript) which implements or confirms to the IStrokePaletteProvider and IFillPaletteProvider interfaces. Then, apply this to the FastCandlestickRenderableSeries.paletteProvider property. This allows you to colour data-points based on values, or custom rules with infinite extensiblity.

Paletted Line example
Copy Code
const candlestickSeries = new FastCandlestickRenderableSeries(wasmContext, {
    strokeThickness: 2,
    dataSeries,
    dataPointWidth: 0.5,
    brushUp: "#33ff33",
    brushDown: "#ff3333",
    strokeUp: "#77ff77",
    strokeDown: "#ff7777",
    paletteProvider: new CandlestickPaletteProvider()
});

/**
 * An example PaletteProvider which implements IStrokePaletteProvider and IFillPaletteProvider
 * This can be attached to line, mountain, column or candlestick series to change the stroke or fill
 * of the series conditionally
 */
class CandlestickPaletteProvider implements IStrokePaletteProvider, IFillPaletteProvider, IPaletteProvider {
    /**
     * This property chooses how stroke colors are blended when they change
     */
    readonly strokePaletteMode: EStrokePaletteMode = EStrokePaletteMode.GRADIENT;
    private parentSeries: IRenderableSeries;
    private dataSeries: OhlcDataSeries;
    private readonly highlightColor: number = parseColorToUIntArgb("#FEFEFE");
    onAttached(parentSeries: IRenderableSeries): void {
        this.parentSeries = parentSeries;
        this.dataSeries = undefined;
    }
    onDetached(): void {
        this.parentSeries = undefined;
        this.dataSeries = undefined;
    }
    /**
     * Called by SciChart and may be used to override the color of filled polygon in various chart types.
     * @remarks WARNING: CALLED PER-VERTEX, MAY RESULT IN PERFORMANCE DEGREDATION IF COMPLEX CODE EXECUTED HERE
     * @returns an ARGB color code, e.g. 0xFFFF0000 would be red, or 'undefined' for default colouring
     */
    overrideFillArgb(xValue: number, yValue: number, index: number): number {
        const ohlcDataSeries = this.getDataSeries();
        // Get the open, close values
        const close = ohlcDataSeries.getNativeCloseValues().get(index);
        const open = ohlcDataSeries.getNativeOpenValues().get(index);
        // If more than 1% change, return 'highlightColor' otherwise return undefined for default color
        if (Math.abs(1 - (open / close)) > 0.01) {
            return this.highlightColor;
        }
        return undefined;
    }
    /**
     * Called by SciChart and may be used to override the color of a line segment or
     * stroke outline in various chart types.
     * @returns an ARGB color code, e.g. 0xFFFF0000 would be red, or 'undefined' for default colouring
     */
    overrideStrokeArgb(xValue: number, yValue: number, index: number): number {
        return undefined;
    }
    private getDataSeries(): OhlcDataSeries {
        if (this.dataSeries) {
            return this.dataSeries;
        }
        this.dataSeries = this.parentSeries.dataSeries as OhlcDataSeries;
        return this.dataSeries;
    }
}

The code above results in the following output. 

When the open - close is greater than a 1% range, the candle fill is coloured white.

Using this or similar logic you can add an extra-dimension of data to JavaScript Candlestick charts.

See Also