SciChart.js JavaScript 2D Charts API > 2D Chart Types > The Lollipop (Impulse or Stem) Chart Type
The Lollipop (Impulse or Stem) Chart Type

Lollipop Charts, otherwise known as Impulse or Stem charts, can be created using the FastImpulseRenderableSeries type.

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

Create an Impulse Series

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

JavaScript Line Chart
Copy Code
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { SciChartSurface } from "scichart";
import { NumberRange } from "scichart/Core/NumberRange";
import { EAutoRange } from "scichart/types/AutoRange";
import { FastImpulseRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastImpulseRenderableSeries";

// Create a SciChartSurface
const { sciChartSurface, wasmContext } = await SciChartSurface.create('chart');
// Add an X, Y Axis
sciChartSurface.xAxes.add(
    new NumericAxis(wasmContext, { autoRange: EAutoRange.Never, visibleRange: new NumberRange(0, 100) })
);
sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, { autoRange: EAutoRange.Never, visibleRange: new NumberRange(-3, 2) })
);
// Append them to a dataSeries
const dataSeries = new XyDataSeries(wasmContext);
const xValues = [];
const yValues = [];
for (let i = 0; i < 100; i++) {
    xValues.push(i);
    yValues.push(Math.sin(i * 0.2) * Math.log(i / 100));
}
dataSeries.appendRange(xValues, yValues);
// Create an add a impulse series
const impulseSeries = new FastImpulseRenderableSeries(wasmContext, {
    fill: "#26c6da",
    size: 10.0,
    dataSeries
});
sciChartSurface.renderableSeries.add(impulseSeries);

In the code above:

  • A Impulse Series instance is created and added to the SciChartSurface.renderableSeries collection.
  • We set the fill property that controls the color of connector and point of each dataset
  • We can update the size of each point by updating size property (default value is 10.0)
  • We assign a FastImpulseRenderableSeries.dataSeries - which stores the Xy data to render.

Setting the PointMarker on an Impulse Series

Every data point of an Impulse Series is marked with a PointMarker. To change the pointmarker type, or size, use the following code:

JavaScript Line Chart
Copy Code
import { FastImpulseRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastImpulseRenderableSeries";
import {TrianglePointMarker} from "scichart/Charting/Visuals/PointMarkers/TrianglePointMarker";

const impulseSeries = new FastImpulseRenderableSeries(wasmContext, {
    fill: "#26c6da",
    strokeThickness: 1,
    dataSeries,
    pointMarker: new TrianglePointMarker(wasmContext, { width: 10, height: 10, fill: "Orange", stroke: "Blue", strokeThickness: 1 }),
    size: 10,
});
Different pointmarkers are supported including Ellipse, Box, Triangle, Cross or custom markers. See the Scatter Chart documentation for more information on supported pointmarkers.

Painting Impulse Series Points with Different Colors

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

import { SciChartSurface } from 'scichart';
import { NumericAxis } from 'scichart/Charting/Visuals/Axis/NumericAxis';
import { FastImpulseRenderableSeries } from 'scichart/Charting/Visuals/RenderableSeries/FastImpulseRenderableSeries';
import { XyDataSeries } from 'scichart/Charting/Model/XyDataSeries';
import { DefaultPaletteProvider, EStrokePaletteMode} from 'scichart/Charting/Model/IPaletteProvider';
import { parseColorToUIntArgb } from 'scichart/utils/parseColor';
import { NumberRange } from 'scichart/Core/NumberRange';
export const drawExampleImpulse = async () => {
    const { sciChartSurface, wasmContext } = await SciChartSurface.create('scichart-div-id');
    // Create XAxis
    sciChartSurface.xAxes.add(
        new NumericAxis(wasmContext, {
            growBy: new NumberRange(0.1, 0.1)
        })
    );
    // Create YAxis
    sciChartSurface.yAxes.add(
        new NumericAxis(wasmContext, {
            growBy: new NumberRange(0.1, 0.1)
        })
    );
    const dataSeries = new XyDataSeries(wasmContext);
    for (let i = 0; i < 25; i++) {
        dataSeries.append(i, Math.sin(i * 0.05));
    }
    // Create a line series with a PaletteProvider. See implementation of LinePaletteProvider below
    sciChartSurface.renderableSeries.add(
        new FastImpulseRenderableSeries(wasmContext, {
            fill: "SteelBlue",
            strokeThickness: 1,
            dataSeries,
            // The LinePaletteProvider (declared below) implements per-point coloring for line series
            paletteProvider: new LineAndPointMarkerPaletteProvider('#55FF55', yValue => yValue > 0.5)
        })
    );
    sciChartSurface.zoomExtents();
};
/**
 * An example PaletteProvider which implements both IStrokePaletteProvider and IPointMarkerPaletteProvider
 * This can be attached to line, mountain, column or impulse series to change the stroke and pointmarker of the series conditionally
 */
class LineAndPointMarkerPaletteProvider extends DefaultPaletteProvider {
    constructor(stroke, rule) {
        super();
        this.strokePaletteMode = EStrokePaletteMode.SOLID;
        this.rule = rule;
        this.stroke = parseColorToUIntArgb(stroke);
    }
    overrideStrokeArgb(xValue, yValue, index, opacity, metadata) {
        // Conditional logic for coloring here. Returning 'undefined' means 'use default renderableSeries.stroke'
        // else, we can return a color of choice.
        //
        // Note that colors returned are Argb format as number. There are helper functions which can convert from Html
        // color codes to Argb format.
        //
        // Performance considerations: overrideStrokeArgb is called per-point on the series when drawing.
        // Caching color values and doing minimal logic in this function will help performance
        return this.rule(yValue) ? this.stroke : undefined;
    }
    overridePointMarkerArgb(xValue, yValue, index) {
        return this.rule(yValue) ? {
            stroke: this.stroke,
            fill: this.stroke
        } : undefined;
    }
}
import { SciChartSurface } from 'scichart';
import { NumericAxis } from 'scichart/Charting/Visuals/Axis/NumericAxis';
import { FastImpulseRenderableSeries } from 'scichart/Charting/Visuals/RenderableSeries/FastImpulseRenderableSeries';
import { XyDataSeries } from 'scichart/Charting/Model/XyDataSeries';
import {
    EStrokePaletteMode,
    IPointMarkerPaletteProvider,
    IStrokePaletteProvider, TPointMarkerArgb
} from 'scichart/Charting/Model/IPaletteProvider';
import { IRenderableSeries } from 'scichart/Charting/Visuals/RenderableSeries/IRenderableSeries';
import { parseColorToUIntArgb } from 'scichart/utils/parseColor';
import { NumberRange } from 'scichart/Core/NumberRange';
import { IPointMetadata } from 'scichart/Charting/Model/IPointMetadata';
export const drawExampleImpulse = async (divElementId: string) => {
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
    // Create XAxis
    sciChartSurface.xAxes.add(
        new NumericAxis(wasmContext, {
            growBy: new NumberRange(0.1, 0.1)
        })
    );
    // Create YAxis
    sciChartSurface.yAxes.add(
        new NumericAxis(wasmContext, {
            growBy: new NumberRange(0.1, 0.1)
        })
    );
    const dataSeries = new XyDataSeries(wasmContext);
    for (let i = 0; i < 25; i++) {
        dataSeries.append(i, Math.sin(i * 0.05));
    }
    // Create a line series with a PaletteProvider. See implementation of LinePaletteProvider below
    sciChartSurface.renderableSeries.add(
        new FastImpulseRenderableSeries(wasmContext, {
            fill: "SteelBlue",
            strokeThickness: 1,
            dataSeries,
            // The LinePaletteProvider (declared below) implements per-point coloring for line series
            paletteProvider: new LineAndPointMarkerPaletteProvider('#55FF55', yValue => yValue > 0.5)
        })
    );
    sciChartSurface.zoomExtents();
};
/**
 * An example PaletteProvider which implements both IStrokePaletteProvider and IPointMarkerPaletteProvider
 * This can be attached to line, mountain, column or impulse series to change the stroke and pointmarker of the series conditionally
 */
class LineAndPointMarkerPaletteProvider implements IStrokePaletteProvider, IPointMarkerPaletteProvider {
    readonly strokePaletteMode: EStrokePaletteMode = EStrokePaletteMode.SOLID;
    private stroke: number;
    private rule: (yValue) => ;
    constructor(stroke: string, rule: (yValue: number) => boolean) {
        this.strokePaletteMode = EStrokePaletteMode.SOLID;
        this.rule = rule;
        this.stroke = parseColorToUIntArgb(stroke);
    }
    onAttached(parentSeries: IRenderableSeries): void {}
    onDetached(): void {}
    // paletteprovider override for the stroke
    overrideStrokeArgb(
        xValue: number,
        yValue: number,
        index: number,
        opacity?: number,
        metadata?: IPointMetadata
    ): number {
        return this.rule(yValue) ? this.stroke : undefined;
    }
    // paletteprovider override for the pointmarker
    overridePointMarkerArgb(xValue: number, yValue: number, index: number): TPointMarkerArgb {
        return this.rule(yValue) ? {
            stroke: this.stroke,
            fill: this.stroke
        } : undefined;
    }
}

The code above results in a chart with the following output. Y-values which are outside the range +0.5, -0.5 are colored green, while all other values are left default.