Skip to main content

The Polar Stacked Mountain Chart Type

The Polar Stacked Mountain Chart Type is created using a PolarStackedMountainCollection📘 to manage multiple series of PolarStackedMountainRenderableSeries📘, which represent the individual stacked mountains in the chart.

tip

The JavaScript Polar Stacked Mountain Chart can be found in the SciChart.Js Examples Suite > Polar Stacked Mountain Chart on Github, or our live demo at scichart.com/demo.

Above: The JavaScript Polar Stacked Mountain Series Chart example from the SciChart.js Demo

Create a Basic Polar Stacked Mountain Series​

To create a Javascript Polar Stacked Mountain Series📘 with SciChart.js, use the following code:

// Demonstrates how to create a basic polar mountain chart using SciChart.js
const { 
    SciChartPolarSurface, 
    PolarNumericAxis, 
    SciChartJsNavyTheme,
    PolarStackedMountainCollection,
    PolarStackedMountainRenderableSeries,
    EPolarAxisMode,
    NumberRange,
    XyDataSeries, 
} = SciChart;
// or, for npm, import { SciChartSurface, ... } from "scichart"

const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme(),
});

const angularXAxis = new PolarNumericAxis(wasmContext, {
    polarAxisMode: EPolarAxisMode.Angular, // Angular == "goes around the center, drawn by arcs"
    visibleRange: new NumberRange(0, 6),
    flippedCoordinates: true, // go clockwise
});
sciChartSurface.xAxes.add(angularXAxis);

const radialYAxis = new PolarNumericAxis(wasmContext, {
    polarAxisMode: EPolarAxisMode.Radial, // Radial == "goes from center out, drawn by straight lines"
    visibleRange: new NumberRange(0, 10),
    drawLabels: false, // hide radial labels
});
sciChartSurface.yAxes.add(radialYAxis);

// Create the collection the stacked mountains will be added to
const polarCollection = new PolarStackedMountainCollection(wasmContext);

const xValues = [0, 1, 2, 3, 4, 5]; // x values for the mountains
const yValues1 = Array.from({ length: 6 }, (_, i) => Math.random() * 6 + 2);
const yValues2 = Array.from({ length: 6 }, (_, i) => Math.random() * 1 + 1);

const polarMountain1 = new PolarStackedMountainRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, {
        xValues: [...xValues, xValues[0]], // +1 to close the loop
        yValues: [...yValues1, yValues1[0]]  // connect first and last points
    }),
    fill: "#FF3344AA",
    stroke: "white",
    strokeThickness: 3,
});

const polarMountain2 = new PolarStackedMountainRenderableSeries(wasmContext, {
    dataSeries: new XyDataSeries(wasmContext, {
        xValues: [...xValues, xValues[0]], // +1 to close the loop
        yValues: [...yValues2, yValues2[0]] // connect first and last points
    }),
    fill: "#5588FFAA",
    stroke: "white",
    strokeThickness: 3,
});

// Add the mountains to the collection
polarCollection.add(polarMountain1, polarMountain2);

// Add the mountains to the collection
sciChartSurface.renderableSeries.add(polarCollection);

Above:

We created 2 PolarStackedMountainRenderableSeries📘 and added them to a PolarStackedMountainCollection📘. Each PolarStackedMountainRenderableSeries📘 represents a single mountain in the chart, and they are stacked on top of each other. The StackedMountainCollection itself is added to sciChartSurface.renderableSeries📘 collection, not the individual mountain series.

This results in the following output:

See Also​