Skip to main content

Creating a Polar Chart

SciChart provides a powerful API for creating various types of charts, including Polar Charts.

Use build2DPolarChartšŸ“˜ to create a Polar Chart:

const {
    build2DPolarChart,
    EThemeProviderType,
    EAxisType,
    EPolarAxisMode,
    EChart2DModifierType,
    ESeriesType,
} = SciChart;
const { sciChartSurface, wasmContext } = await build2DPolarChart(divElementId, {
    surface: {
        theme: { type: EThemeProviderType.Navy }
    },
    xAxes: [{
        type: EAxisType.PolarNumericAxis,
        options: {
            polarAxisMode: EPolarAxisMode.Angular,
        }
    }],
    yAxes: [{
        type: EAxisType.PolarNumericAxis,
        options: {
            polarAxisMode: EPolarAxisMode.Radial,
            labelPrecision: 0,
        }
    }],
    series: [
        {
            type: ESeriesType.PolarColumnSeries,
            xyData: {
                xValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
                yValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
            },
            options: {
                stroke: "rgba(255, 0, 0, 1)",
                fill: "rgba(255, 0, 0, 0.3)",
                dataPointWidth: 0.8
            }
        }
    ],
    modifiers: [
        { type: EChart2DModifierType.PolarMouseWheelZoom },
        { type: EChart2DModifierType.PolarZoomExtents },
        { type: EChart2DModifierType.PolarCursor }
    ]
});
note

The options that the polar chart builder accepts are the same as the 2D surface, and can be seen here ISciChart2DDefinitionšŸ“˜, but you must choose options with Polar in their name.

See Alsoā€‹