Skip to main content

The Polar Uniform Heatmap Chart Type

The PolarUniformHeatmapRenderableSeriesπŸ“˜ displays "heat" values as colored cells in a polar (circular) coordinate systemβ€”perfect for visualizing intensity, density, or other matrix-like data in a circular form. Each cell is mapped from a two-dimensional array of z-values, with color gradients representing the data's magnitude.

tip

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

Above: The JavaScript Polar Uniform Heatmap Series Chart example from the SciChart.js Demo

Properties​

Key options for IPolarUniformHeatmapRenderableSeriesOptionsπŸ“˜ include:

Examples​

Basic Polar Heatmap​

const {
    PolarMouseWheelZoomModifier,
    SciChartJsNavyTheme,
    PolarZoomExtentsModifier,
    PolarPanModifier,
    EAxisAlignment,
    PolarNumericAxis,
    EPolarLabelMode,
    SciChartPolarSurface,
    EPolarAxisMode, 
    NumberRange, 
    HeatmapColorMap,
    UniformHeatmapDataSeries,
    PolarUniformHeatmapRenderableSeries,
} = SciChart;
// or, for npm, import { SciChartSurface, ... } from "scichart"

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

const HEATMAP_WIDTH = 48;
const HEATMAP_HEIGHT = 10;

const angularXAxis = new PolarNumericAxis(wasmContext, {
    polarAxisMode: EPolarAxisMode.Angular, 
    axisAlignment: EAxisAlignment.Left,
    visibleRange: new NumberRange(0, HEATMAP_WIDTH),

    autoTicks: false,
    majorDelta: 1,

    polarLabelMode: EPolarLabelMode.Perpendicular,
    flippedCoordinates: true, // go clockwise
    totalAngle: Math.PI * 2,
});
sciChartSurface.xAxes.add(angularXAxis);

const radialYAxis = new PolarNumericAxis(wasmContext, {
    polarAxisMode: EPolarAxisMode.Radial,
    axisAlignment: EAxisAlignment.Bottom,
    visibleRange: new NumberRange(0, HEATMAP_HEIGHT),

    drawLabels: false, // hide radial labels
    innerRadius: 0.1,
});
sciChartSurface.yAxes.add(radialYAxis);

// Add a heatmap series to the chart
const heatmapSeries = new PolarUniformHeatmapRenderableSeries(wasmContext, {
    dataSeries: new UniformHeatmapDataSeries(wasmContext, {
        zValues: Array.from({ length: HEATMAP_HEIGHT }, () => {
            return Array.from({ length: HEATMAP_WIDTH }, () => {
                return Math.random() * 100;
            });
        }),
        xStart: 0,
        yStart: 0,
        xStep: 1,
        yStep: 1,
    }),
    colorMap: new HeatmapColorMap({
        minimum: 0,
        maximum: 100,
        gradientStops: [
            { offset: 0, color: "lightblue" },
            { offset: 1, color: "indigo" },
        ]
    }),
});
sciChartSurface.renderableSeries.add(heatmapSeries);

In the code above:

Polar Heatmap with Legend​

const COLOR_MAP = new HeatmapColorMap({
    minimum: 0,
    maximum: 100,
    gradientStops: [
        { offset: 0, color: "#000000" },
        { offset: 1, color: "#3333AAAA" },
    ]
});

// Add a heatmap series to the chart
const heatmapSeries = new PolarUniformHeatmapRenderableSeries(wasmContext, {
    dataSeries: new UniformHeatmapDataSeries(wasmContext, {
        zValues: Array.from({ length: HEATMAP_HEIGHT }, () => {
            return Array.from({ length: HEATMAP_WIDTH }, () => {
                return Math.random() * 100;
            });
        }),
        xStart: 0,
        yStart: 0,
        xStep: 1,
        yStep: 1,
    }),
    colorMap: COLOR_MAP,
});
sciChartSurface.renderableSeries.add(heatmapSeries);

// also pass "scichart-legend-root" as `legendElementId` in drawExample()
const { heatmapLegend } = await HeatmapLegend.create(legendElementId, { 
    theme: {
        ...new SciChartJsNavyTheme(),
        sciChartBackground: "transparent",
        loadingAnimationBackground: "indigo"
    },
    yAxisOptions: {
        isInnerAxis: true,
        labelStyle: {
            fontSize: 14,
            color: "white",
        },
        axisBorder: {
            borderRight: 2,
            color: "white",
        },
        majorTickLineStyle: {
            color: "white",
            tickSize: 8,
            strokeThickness: 2,
        },
        minorTickLineStyle: {
            color: "white",
            tickSize: 4,
            strokeThickness: 1,
        },
    },
    colorMap: COLOR_MAP
});

You also need an additional HTML element for the legend:

<section>
    <div id="scichart-root"></div>
    <div id="scichart-legend-root"></div>
</section>

With these CSS properties:

body { margin: 0; }
section { width: 100%; height: 100vh; display: flex; }

#scichart-root { width: 100%; height: 100%; }

#scichart-legend-root { height: 100%; width: 65px; }

In the code above:

  • The HeatmapLegendπŸ“˜ component creates an interactive vertical legend, visually linking the z-value color range.
  • A custom color map with multiple gradient stops is defined for meaningful value zones.
  • Data is generated using a generateHeatmapData utility function (see demo source for details).
  • Both the heatmap and the legend share the same HeatmapColorMapπŸ“˜ instance to keep color mapping consistent.
  • Axes are positioned and styled for optimal polar data presentation.

Medical Imaging (Ultrasound Heatmap)​

Above: The JavaScript Polar Ultrasound Heatmap Example example from the SciChart.js Demo

tip

For the full code walkthrough and live demo, see the Polar Ultrasound Heatmap Example

Tips & Best Practices​

Use Cases​

Polar heatmaps are widely used in:

  • Physics and engineering for field visualization
  • Medical imaging (e.g. ultrasound, see Polar Ultrasound Demo)
  • Environmental mapping
  • Radar and sonar data

PolarUniformHeatmapRenderableSeriesπŸ“˜ enables powerful, visually compelling circular heatmaps in JavaScript. With SciChart.js, you can combine rich color gradients, advanced axis control, interaction, and even medical imaging overlays in a performant, interactive chart component.