Skip to main content

Polar Chart Styling

Polar charts in SciChart.js are specialized charts designed for polar data visualization, which are circular in nature. They can be used to create various types of charts, such as radial bar, windrose, line, band, mountain, spider, scatter, heatmaps and more.

tip

There is also the labelStylešŸ“˜ property, which acts the same way as the AxisBase.labelStylešŸ“˜ property, allowing you to set the font, color, and other styles of the labels based on the TLabelStylešŸ“˜ type.

Grid mode for Radial Gridlinesā€‹

The grid mode for radial gridlines can be controlled via the gridlineModešŸ“˜ property. This property determines how the radial gridlines are drawn.

For a Spider/Radar chart look you can set this property to EPolarGridLineMode.PolygonšŸ“˜, which will draw the gridlines as concentric polygons, or you can stick to the default EPolarGridLineMode.CirclesšŸ“˜ which draws radial gridlines as arcs.

Other Styling Propertiesā€‹

Major Gridlinesā€‹

aligned with labels having majorGridLineStylešŸ“˜ and drawMajorGridLinesšŸ“˜ properties.

Minor Gridlinesā€‹

between labels with minorGridLineStylešŸ“˜ and drawMinorGridLinesšŸ“˜ properties.

tip

Both Major and Minor gridlines style objects have the TGridLineStylešŸ“˜ type, which allows you to set the color, thickness, and strokeDashArray of the gridlines.

Also, the drawMajorGridLinesšŸ“˜ and drawMinorGridLinesšŸ“˜ properties are boolean values that control whether the gridlines are drawn or not.

Major Ticksā€‹

small marks, outside the axis, aligned with labels with majorTickLineStylešŸ“˜ and drawMajorTicksšŸ“˜ properties.

Minor Ticksā€‹

small marks, outside the axis, between labels with minorTickLineStylešŸ“˜ and drawMinorTicksšŸ“˜ properties.

tip

Both Major and Minor ticks style objects have the TTickLineStylešŸ“˜ type, which allows you to set the color, tickSize, and strokeThickess of the ticks.

Polar Axis Styling Exampleā€‹

Read the code comments carefully

const {
    SciChartPolarSurface,
    PolarNumericAxis,
    NumberRange,
    SciChartJsNavyTheme,
    EPolarAxisMode,
    EPolarGridlineMode,
    PolarCategoryAxis,
    EPolarLabelMode
} = SciChart;

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

// Add polar axes
const TOTAL_ANGLE = Math.PI * 1.5; // 270 degrees in radians (3 quarters of a circle)

sciChartSurface.xAxes.add(
    new PolarCategoryAxis(wasmContext, {
        polarAxisMode: EPolarAxisMode.Angular,
        visibleRange: new NumberRange(0, 9),

        totalAngle: TOTAL_ANGLE, // in radians
        // totalAngleDegrees: 270, // if you want to work in degrees

        flippedCoordinates: true, // increment clockwise
        startAngle: (Math.PI - TOTAL_ANGLE) / 2, // formula to center incomplete polar surfaces like gauges ("with the missing slice at the bottom")

        autoTicks: false, // take control over tick distance
        majorDelta: 1,    // draw tick every 1 unit

        // minor gridlines turned off look better when radial axis gridlineMode is set to `Polygons`
        drawMinorGridLines: false,

        majorTickLineStyle: { // optionally style major ticks
            color: "#FFFFFF",
            tickSize: 2,
            strokeThickness: 2,
        },

        majorGridLineStyle: { // optionally style major grid lines
            color: "rgba(12,17,53,1)",
            strokeThickness: 1,
            strokeDashArray: [5, 2], // dashed lines
        },

        labels: ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"],
        labelStyle: {
            color: "#FFFFFF",
        },
        polarLabelMode: EPolarLabelMode.Parallel // can also be "Perpendicular", or (the default) "Horizontal" 
    })
);

sciChartSurface.yAxes.add(
    new PolarNumericAxis(wasmContext, {
        polarAxisMode: EPolarAxisMode.Radial,
        visibleRange: new NumberRange(0, 10),
        gridlineMode: EPolarGridlineMode.Polygons, // results in a radar chart look (straight radial lines in between grid lines)

        startAngle: (Math.PI - TOTAL_ANGLE) / 2, // match the radial labels to the start of the angular axis
        labelPrecision: 0,

        majorGridLineStyle: { // optionally style major grid lines
            color: "rgba(12,17,53,1)",
            strokeThickness: 1,
            strokeDashArray: [5, 2], // dashed lines
        },
    })
);

This results in the following output:

See Alsoā€‹