OhlcHeikinAshiFilter

OhlcHeikinAshiFilter📘 converts an OhlcDataSeries into Heikin-Ashi candles. The filter keeps one output candle per source candle, so it can be swapped with the source series on the same candlestick or OHLC renderable series.

function createLayout(divElementId, title) {
    const root = document.getElementById(divElementId);
    root.style.cssText = "width:100%;height:100%;min-height:560px;display:grid;grid-template-rows:auto minmax(0,1fr);";
    root.innerHTML = `
        <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px;font-family:Arial,sans-serif;color:#888;">
            <strong style="font-size:14px;">${title}</strong>
            <button id="${divElementId}-source">Source OHLC</button>
            <button id="${divElementId}-filter">Heikin-Ashi</button>
            <span id="${divElementId}-count" style="font-size:13px;opacity:0.75;"></span>
        </div>
        <div id="${divElementId}-chart" style="width:100%;height:100%;min-height:0;"></div>
    `;
    return `${divElementId}-chart`;
}

async function drawExample(divElementId) {
    const {
        DiscontinuousDateAxis,
        FastCandlestickRenderableSeries,
        MouseWheelZoomModifier,
        NumberRange,
        NumericAxis,
        OhlcDataSeries,
        RolloverModifier,
        SciChartSurface,
        ZoomExtentsModifier,
        ZoomPanModifier
    } = SciChart; // or import from "scichart"
    const { 
        OhlcHeikinAshiFilter,
        SciTraderLightTheme
    } = SciChartFinancialTools; // if using npm, import from "scichart-financial-tools";

    const chartDivId = createLayout(divElementId, "Heikin-Ashi filter");
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(chartDivId, {
        theme: new SciTraderLightTheme()
    });

    sciChartSurface.xAxes.add(new DiscontinuousDateAxis(wasmContext, { growBy: new NumberRange(0.02, 0.02) }));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.02, 0.02) }));

    const sourceSeries = new OhlcDataSeries(wasmContext, {
        xValues: sourceData.xValues,
        openValues: sourceData.openValues,
        highValues: sourceData.highValues,
        lowValues: sourceData.lowValues,
        closeValues: sourceData.closeValues,
        dataSeriesName: "Source OHLC"
    });

    const heikinAshiFilter = new OhlcHeikinAshiFilter(sourceSeries, {
        dataSeriesName: "Heikin-Ashi"
    });

    const candleSeries = new FastCandlestickRenderableSeries(wasmContext, {
        dataSeries: heikinAshiFilter,
        dataPointWidth: 0.6,
        strokeThickness: 1
    });
    sciChartSurface.renderableSeries.add(candleSeries);
    sciChartSurface.chartModifiers.add(
        new ZoomPanModifier(),
        new ZoomExtentsModifier(),
        new MouseWheelZoomModifier(),
        new RolloverModifier()
    );

    const countLabel = document.getElementById(`${divElementId}-count`);
    const setUseHeikinAshi = useHeikinAshi => {
        candleSeries.dataSeries = useHeikinAshi ? heikinAshiFilter : sourceSeries;
        countLabel.textContent = useHeikinAshi
            ? `${heikinAshiFilter.count()} Heikin-Ashi candles`
            : `${sourceSeries.count()} source candles`;
        sciChartSurface.zoomExtents(300);
    };

    document.getElementById(`${divElementId}-source`).onclick = () => setUseHeikinAshi(false);
    document.getElementById(`${divElementId}-filter`).onclick = () => setUseHeikinAshi(true);
    setUseHeikinAshi(true);

Heikin-Ashi values are recalculated from the current source OHLC candle and the previous Heikin-Ashi candle. Use this filter when you want the chart to emphasize trend direction and reduce candle-to-candle noise without changing the source data.

See Also​

See Also