Skip to main content

Polar Axis Styling

Polar axes in SciChart.js are specialized axes designed for polar charts, which are circular in nature. They can be used to create various types of polar charts, such as radial bar charts, polar line charts, and more.

There are currently only 2 types of polar axes available: PolarNumericAxisšŸ“˜ and PolarCategoryAxisšŸ“˜, which are used for numeric and categorical data, respectively. Most properties of these two are the same, with some differences in the way they handle data and labels.

Key Polar Axis Conceptsā€‹

Angle Sweep & Startā€‹

how far the axis sweeps, and where it starts from on the circle, via totalAnglešŸ“˜ and startAnglešŸ“˜ properties, having values in the range of 0 to 2 * Math.PI.

tip

There is also a degree mode, with values in between 0 and 360 degrees but used with totalAngleDegreesšŸ“˜ and startAngleDegreesšŸ“˜ instead.

Flipped Coordinatesā€‹

whether the axis increments clockwise or counter-clockwise, via flippedCoordinatesšŸ“˜ property, can be set on any of the axes.

When flippedCoordinates is set to true on the Angular axis, the startAnglešŸ“˜ will be reversed, so -Math.PI/2 will not make the axis start at 12 o'clock (as it usually does), but rather at 6 o'clock.

Polar Labelsā€‹

how the labels are displayed, via polarLabelModešŸ“˜ property.

The default value is polarLabelMode: HorizontalšŸ“˜, which means that the labels will be drawn horizontally (never rotating), while the PerpendicularšŸ“˜ mode will draw the labels perpendicular to the axis, while the ParallelšŸ“˜ mode will draw them parallel to the axis.

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ā€‹