SciChart.js JavaScript 2D Charts API > 2D Chart Types > The OHLC Series Type
The OHLC Series Type

Ohlc Series or JavaScript Stock Charts can be created using the FastOhlcRenderableSeries type.

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

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

Create an Ohlc Series

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

JavaScript Ohlc Chart
Copy Code
// Create a SciChartSurface
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
// Add an XAxis of type CategoryAxis - which collapses gaps in stock market data
const xAxis = new CategoryAxis(wasmContext);
xAxis.growBy = new NumberRange(0.05, 0.05);
sciChartSurface.xAxes.add(xAxis);
// Add a YAxis and set text formatting
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 an OhlcDataSeries. This accepts xValues as unix timestamps, and open, high, low, close values
const dataSeries = new OhlcDataSeries(wasmContext, {
    xValues: dateValues,
    openValues,
    highValues,
    lowValues,
    closeValues,
});
// Create the Ohlc series and add to the chart
const ohlcSeries = new FastOhlcRenderableSeries(wasmContext, {
    strokeThickness: 2,
    dataSeries,
    dataPointWidth: 0.5,
    strokeUp: "#77ff77",
    strokeDown: "#ff7777",
});
sciChartSurface.renderableSeries.add(ohlcSeries);
// Optional: Add some interactivity modifiers
sciChartSurface.chartModifiers.add(new ZoomPanModifier());
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());

In the code above:

  • A Ohlc 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 color via properties strokeUp, strokeDown.
  • 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 Ohlc bars with Different Colors

Ohlc 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 interface. Then, apply this to the FastOhlcRenderableSeries.paletteProvider property. This allows you to colour data-points based on values, or custom rules with infinite extensiblity.

Paletted Line example
Copy Code
import {FastOhlcRenderableSeries} from "scichart/Charting/Visuals/RenderableSeries/FastOhlcRenderableSeries";
import {EStrokePaletteMode, IStrokePaletteProvider} from "scichart/Charting/Model/IPaletteProvider";
import {IRenderableSeries} from "scichart/Charting/Visuals/RenderableSeries/IRenderableSeries";
import {parseColorToUIntArgb} from "scichart/utils/parseColor";

// Create the Ohlc series and add to the chart
const ohlcSeries = new FastOhlcRenderableSeries(wasmContext, {
    strokeThickness: 2,
    dataSeries,
    dataPointWidth: 0.5,
    strokeUp: "#77ff77",
    strokeDown: "#ff7777",
    paletteProvider: new OhlcPaletteProvider()
});
**
 * An example PaletteProvider which implements IStrokePaletteProvider
 * This can be attached to line, mountain, column or candlestick series to change the stroke or fill
 * of the series conditionally
 */
class OhlcPaletteProvider implements IStrokePaletteProvider {
    /**
     * This property chooses how stroke colors are blended when they change
     */
    readonly strokePaletteMode: EStrokePaletteMode = EStrokePaletteMode.SOLID;
    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 a line segment or
     * stroke outline 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
     */
    overrideStrokeArgb(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;
    }
    private getDataSeries(): OhlcDataSeries {
        if (this.dataSeries) {
            return this.dataSeries;
        }
        this.dataSeries = this.parentSeries.dataSeries as OhlcDataSeries;
        return this.dataSeries;
    }
}

The code above results in a JavaScript Ohlc Chart with the following output. When the open - close is greater than a 1% range, the Ohlc bar is coloured white.

See Also