drawExample.js

const {
	NumericAxis,
    SciChartSurface,
    XyDataSeries,
	HlcDataSeries,
    MouseWheelZoomModifier,
    ZoomExtentsModifier,
    ZoomPanModifier,
    NumberRange,
    FastColumnRenderableSeries,
	FastErrorBarsRenderableSeries,
    DataLabelState,
    EAxisAlignment,
    TDataLabel,
    EDataPointWidthMode,
} = SciChart;

const xValues = [1, 2, 3, 4, 5];

const DATA = [
	{
		stroke: "#FFA500",
		fill: "#FFA50055",
		yValues: [12, 3, 8, 2, 14],
		lowValues: [9, 1, 6, 1, 10],
		highValues: [15, 5, 10, 3, 18],
	}, 
	{
		stroke: "#008000",
		fill: "#00800055",
		yValues: [20, 10, 13, 15, 19],
		lowValues: [15, 5, 10, 12, 17],
		highValues: [25, 15, 16, 18, 21],
	}, 
	{
		stroke: "#88ccFF",
		fill: "#88ccFF55",
		yValues: [9, 16, 14, 6, 16],
		lowValues: [7, 14, 12, 4, 14],
		highValues: [11, 18, 17, 8, 18],
	},
	// { // comment out to see how shifting behaves
	// 	stroke: "#FF0000",
	// 	fill: "#FF000055",
	// 	yValues: [5, 12, 6, 10, 12],
	// 	lowValues: [3, 10, 4, 8, 10],
	// 	highValues: [7, 14, 8, 12, 14],
	// },
]

const WIDTH = 1 / (DATA.length + 1);
// e.g. for 3 columns, you get WIDTH == 0.25, so you'd have:
// [0.125 Spacing, (0.25 Col1, 0.25 Col2, 0.25 col3), 0.125 Spacing] // outer spacing decreases as inner spacing between columns grows

function CalculateShift(initialVal, index, spacing = 0) { // inner spacing - between columns
    const columnCount = DATA.length;
    return initialVal - (WIDTH + spacing) * (columnCount / 2.0 - (index + 0.5));
}

const drawExample = async (rootElement) => {
    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement);

    // Create XAxis
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
		growBy: new NumberRange(0.05, 0.05),
		labelPrecision: 0
	}));

    // Create YAxis
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
		growBy: new NumberRange(0.01, 0.2),
		labelPrecision: 0
	}));

	// Create the Stacked Column / Error bar series
    for(let i = 0; i < DATA.length; i++) {
    	const ds = new HlcDataSeries(wasmContext, { 
			xValues: xValues.map((x) => CalculateShift(x, i, 0.02)),
			yValues: DATA[i].yValues,
			lowValues: DATA[i].lowValues,
			highValues: DATA[i].highValues,
			isSorted: true
		});

		const column = new FastColumnRenderableSeries(wasmContext, {
			dataSeries: ds,
			stroke: DATA[i].stroke,
			fill: DATA[i].fill,
			strokeThickness: 2,
			dataPointWidth: WIDTH,
			dataPointWidthMode: EDataPointWidthMode.Range,
		});

		const errorBar = new FastErrorBarsRenderableSeries(wasmContext, {
			dataSeries: ds,
			stroke: "#FFF",
			strokeThickness: 3,
			dataPointWidth: WIDTH * 0.8,
			dataPointWidthMode: EDataPointWidthMode.Range,
		})

		sciChartSurface.renderableSeries.add(
			column,
			errorBar
		);
	};

    // Add some interactivity modifiers
    sciChartSurface.chartModifiers.add(
        new ZoomExtentsModifier(), 
        new ZoomPanModifier(), 
        new MouseWheelZoomModifier()
    );

    return { wasmContext, sciChartSurface };
};

drawExample("scichart-root");