JavaScript Polar Area Chart | Polar Mountain Chart

Creates a JavaScript Polar Mountain Chart, also known as a Polar Area Chart using SciChart.js, with both regular & interpolated mountain modes, via PolarMountainRenderableSeries

Fullscreen

Edit

Docs

import {
    PolarMouseWheelZoomModifier,
    PolarZoomExtentsModifier,
    PolarPanModifier,
    XyDataSeries,
    PolarNumericAxis,
    SciChartPolarSurface,
    EPolarAxisMode,
    NumberRange,
    EAxisAlignment,
    GradientParams,
    Point,
    EPolarLabelMode,
    WaveAnimation,
    PolarMountainRenderableSeries,
    PolarLegendModifier,
} from "scichart";
import { appTheme } from "./appTheme";

const xValues = [0, 1, 2, 3, 4, 5, 6, 7, 8];
const MountainsDatasets = [
    {
        yValues: [2.6, 5.6, 3, 5, 4.8, 1.8, 5, 4.5, 3.5],
        fillColor: appTheme.VividOrange,
        interpolateLine: true,
    },
    {
        yValues: [4.2, 2.5, 3.9, 2.5, 4, 5.5, 2.5, 4, 3],
        fillColor: appTheme.VividTeal,
        interpolateLine: false,
    },
    {
        yValues: [1.3, 3.3, 2.5, 4.5, 5.5, 3, 4.5, 4.9, 2.4],
        fillColor: appTheme.VividPink,
        interpolateLine: false,
    },
];

export const drawExample = async (rootElement: string | HTMLDivElement) => {
    const { sciChartSurface, wasmContext } = await SciChartPolarSurface.create(rootElement, {
        theme: appTheme.SciChartJsTheme,
    });

    const radialYAxis = new PolarNumericAxis(wasmContext, {
        polarAxisMode: EPolarAxisMode.Radial,
        axisAlignment: EAxisAlignment.Right,
        visibleRange: new NumberRange(0, 6),
        drawMinorTickLines: false,
        drawMajorTickLines: false,
        useNativeText: true,
        drawMinorGridLines: false,
        startAngle: Math.PI / 2,
        zoomExtentsToInitialRange: true,
        labelPrecision: 0,
    });
    sciChartSurface.yAxes.add(radialYAxis);

    const polarXAxis = new PolarNumericAxis(wasmContext, {
        polarAxisMode: EPolarAxisMode.Angular,
        axisAlignment: EAxisAlignment.Top,
        polarLabelMode: EPolarLabelMode.Parallel,
        visibleRange: new NumberRange(0, 9),
        flippedCoordinates: true, // go clockwise
        useNativeText: true,
        startAngle: Math.PI / 2, // start at 12 o'clock
        zoomExtentsToInitialRange: true,
        labelPrecision: 0,
    });
    sciChartSurface.xAxes.add(polarXAxis);

    MountainsDatasets.forEach(({ yValues, fillColor, interpolateLine }) => {
        const polarMountain = new PolarMountainRenderableSeries(wasmContext, {
            dataSeries: new XyDataSeries(wasmContext, {
                xValues: [...xValues, xValues[xValues.length - 1] + 1], // add 1 more xValue to close the loop
                yValues: [...yValues, yValues[0]], // close the loop by drawing to the first yValue
                dataSeriesName: interpolateLine ? "Interpolated" : "Straight",
            }),
            fillLinearGradient: new GradientParams(new Point(0, 0), new Point(0, 1), [
                { color: fillColor + "AA", offset: 0 },
                { color: fillColor + "33", offset: 0.3 },
            ]),
            interpolateLine: interpolateLine,
            stroke: fillColor, // this also gives off the color for the legend marker
            strokeThickness: 2,
            animation: new WaveAnimation({ duration: 800, zeroLine: 0 }),
        });
        sciChartSurface.renderableSeries.add(polarMountain);
    });

    sciChartSurface.chartModifiers.add(
        new PolarPanModifier(),
        new PolarZoomExtentsModifier(),
        new PolarMouseWheelZoomModifier(),
        new PolarLegendModifier({
            showCheckboxes: true,
        })
    );

    return { sciChartSurface, wasmContext };
};

Polar Mountain / Area Chart - JavaScript

Overview

This example demonstrates how to create a Polar Mountain / Area Chart using SciChart.js in vanilla JavaScript. The implementation showcases three mountain series in polar coordinates with gradient fills and optional line interpolation, using the PolarMountainRenderableSeries for radial data visualization.

Technical Implementation

The chart is initialized asynchronously using SciChartPolarSurface.create() with a custom theme. It features a radial Y-axis configured with PolarNumericAxis in EPolarAxisMode.Radial mode and an angular X-axis in EPolarAxisMode.Angular mode. Each mountain series uses an XyDataSeries with closed-loop data points and applies a gradient fill via GradientParams.

Features and Capabilities

The example highlights polar chart capabilities including: clockwise coordinate system, parallel axis labels, and interactive modifiers like PolarZoomExtentsModifier and PolarLegendModifier. The interpolateLine property demonstrates both straight and curved line rendering options.

Integration and Best Practices

The implementation follows best practices for asynchronous initialization and resource cleanup. Developers can extend this example by adding real-time updates or customizing the polar axes as described in the Polar Charts documentation.