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

Column Series can be created using the FastColumnRenderableSeries type.

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

Fast, Realtime JavaScript Column Charts by SciChart.js

Create a Column Series

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

JavaScript Line Chart
Copy Code
// Create a SciChartSurface
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
// Add an X, Y Axis
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
const yValues: number[] = [0.1, 0.2, 0.4, 0.8, 1.1, 1.5, 2.4, 4.6, 8.1, 11.7, 14.4,
    16.0, 13.7, 10.1, 6.4, 3.5, 2.5, 1.4, 0.4, 0.1];
// Append them to a dataSeries
const dataSeries = new XyDataSeries(wasmContext);
for(let i = 0; i < yValues.length; i++){
    dataSeries.append(i, yValues[i]);
}
// Create an add a column series
const columnSeries = new FastColumnRenderableSeries(wasmContext, {
    fill: "rgba(176, 196, 222, 0.5)",
    stroke: "rgba(176, 196, 222, 1)",
    strokeThickness: 2,
    dataPointWidth: 0.7,
    dataSeries
});
sciChartSurface.renderableSeries.add(columnSeries);

In the code above:

Render a Gap in a Column Series

It is possible to have null points or gaps in a Column Series by passing a data point with a NaN value as the Y value. Please refer to the Common RenderableSeries Features article for more details.

Changing the above code as follows:

JavaScript Discontinuous Line Chart
Copy Code
const yValues: number[] = [0.1, 0.2, 0.4, 0.8, 1.1, 1.5, 2.4, 4.6, 8.1, 11.7, 14.4,
    16.0, 13.7, 10.1, 6.4, 3.5, 2.5, 1.4, 0.4, 0.1];
// Append them to a dataSeries
const dataSeries = new XyDataSeries(wasmContext);
for(let i = 0; i < yValues.length; i++){
    dataSeries.append(i, i % 5 === 0 ? NaN : yValues[i]);
}
// Create an add a column series
const columnSeries = new FastColumnRenderableSeries(wasmContext, {
    fill: "rgba(176, 196, 222, 0.5)",
    stroke: "rgba(176, 196, 222, 1)",
    strokeThickness: 2,
    dataPointWidth: 0.7,
    dataSeries
});

Results in this:

Add Point Markers onto a Column Series

Every data point of a Column Series can be marked with a PointMarker. To add Point Markers to the Column Series and using DataPointWidth to achieve a Stem chart or Impulse series, use the following code:

Adding PointMarkers to a Line Chart
Copy Code
// Create an add a column series
const columnSeries = new FastColumnRenderableSeries(wasmContext, {
    fill: "rgba(176, 196, 222, 0.5)",
    stroke: "rgba(176, 196, 222, 1)",
    strokeThickness: 2,
    dataPointWidth: 0,
    pointMarker: new EllipsePointMarker(wasmContext, {
        width: 5,
        height: 5,
        fill: "rgba(176, 196, 222, 0.5)",
        stroke: "rgba(176, 196, 222, 1)"}),
    dataSeries
});
sciChartSurface.renderableSeries.add(columnSeries);

This results in the following:

To learn more about the types of Point Marker in SciChart.js, see the Point Markers API documentation.

There is also a dedicated Scatter Series type and a Bubble Series type with some more options.

Painting Columns with Different Colors

Column 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 FastColumnRenderableSeries.paletteProvider property. This allows you to colour data-points based on values, or custom rules with infinite extensiblity.

Paletted Line example
Copy Code
// Create an add a column series
const columnSeries = new FastColumnRenderableSeries(wasmContext, {
    fill: "rgba(176, 196, 222, 0.5)",
    stroke: "rgba(176, 196, 222, 1)",
    strokeThickness: 2,
    dataPointWidth: 0.7,
    paletteProvider: new ColumnPaletteProvider(),
    dataSeries
});

/**
 * 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 ColumnPaletteProvider implements IStrokePaletteProvider, IFillPaletteProvider {
    /**
     * This property chooses how stroke colors are blended when they change
     */
    readonly strokePaletteMode: EStrokePaletteMode = EStrokePaletteMode.GRADIENT;
    onAttached(parentSeries: IRenderableSeries): void { }
    onDetached(): void { }
    /**
     * 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
     * @param renderSeries
     * @param xValue the current XValue
     * @param yValue the current YValue
     * @param index the current index to the data
     * @returns an ARGB color code, e.g. 0xFFFF0000 would be red, or 'undefined' for default colouring
     */
    overrideFillArgb(xValue: number, yValue: number, index: number): number {
        return yValue > 10.0 ? parseColorToUIntArgb("Red") : 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
     * @param renderSeries
     * @param xValue the current XValue
     * @param yValue the current YValue
     * @param index the current index to the data
     * @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 yValue > 10.0 ? parseColorToUIntArgb("Red") : undefined;
    }
}

The code above results in a JavaScript Column Chart with the following output. YValues > 10 are colored red, and YValues < 10 are the default series stroke and fill colors.

See Also