Skip to main content

The Lollipop (Impulse or Stem) Chart Type

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

tip

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

Above: The JavaScript JavaScript Impulse Chart example example from the SciChart.js Demo

Create an Impulse Series​

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

    // Demonstrates how to create an Impulse (or Stem, Lollipop) chart with SciChart.js
    const {
        SciChartSurface,
        NumericAxis,
        FastImpulseRenderableSeries,
        XyDataSeries,
        EllipsePointMarker,
        SciChartJsNavyTheme,
        NumberRange
    } = SciChart;
    // or, for npm, import { SciChartSurface, ... } from "scichart"

    const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
        theme: new SciChartJsNavyTheme()
    });
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0, 0.1) }));

    // Create some data
    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));
    }

    // Create and add a column series
    const impulseSeries = new FastImpulseRenderableSeries(wasmContext, {
        fill: "rgba(176, 196, 222, 0.5)",
        stroke: "rgba(176, 196, 222, 1)",
        strokeThickness: 2,
        size: 10,
        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues }),
        // Optional: define the pointmarker type. Note: size, stroke, fill properties are on the parent series
        pointMarker: new EllipsePointMarker(wasmContext)
    });

    sciChartSurface.renderableSeries.add(impulseSeries);

This results in the following output:

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. Note that the fill, size property on FastImpulseRenderableSeries overrides the width, height, fill, stroke on the TrianglePointMarker.

const impulseSeries = new FastImpulseRenderableSeries(wasmContext, {
    fill: "#26c6da",
    strokeThickness: 1,
    dataSeries,
    pointMarker: new TrianglePointMarker(wasmContext),
    size: 10,
});
tip

Different pointmarkers are supported including Ellipse, Box, Triangle, Cross or custom markers. See the Scatter Chart documentation for more information on supported pointmarkers.

Render a Gap in an Impulse Series​

tip

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

Painting Impulse Series Points with Different Colors​

tip

It is possible to define the colour individual datapoints differently using the PaletteProvider API.

For more info on how to do this, see the PaletteProvider - Per-point colouring of Impulse Charts documentation page.