Polar Scatter Chart

The Polar Scatter Chart plots points on a circular grid, where each point's angle encodes one variable and its distance from the centre another — with an optional third variable driving marker size. It's ideal for directional data (wind, radar returns, cyclical measurements) where a cartesian scatter would misrepresent the wrap-around nature of the angle.

NOTE

For the full API, see the Charts API Reference.

Example

Customize

Title

Show titleTitle text

Legend

Show legendPositionTopBottomLeftRight

Colours

Morning#7cacf8Evening#6dd5b1

Animation

Animate

Usage

import {
    createPolarScatterChart,
} from '@ripl/charts';

const chart = createPolarScatterChart('#container', {
    data: [
        { angle: 45,
            speed: 62,
            gust: 80 },
        { angle: 120,
            speed: 34,
            gust: 40 },
        { angle: 250,
            speed: 88,
            gust: 95 },
    ],
    series: [
        { id: 'wind',
            label: 'Wind',
            angle: 'angle',
            radius: 'speed',
            sizeBy: 'gust' },
    ],
    maxRadiusValue: 100,
});

Data Format

Each item provides an angle (in degrees, 0° at the top and increasing clockwise), a radial value, and optionally a size value:

const data = [
    { angle: 45,
        speed: 62,
        gust: 80 },
    { angle: 120,
        speed: 34,
        gust: 40 },
];

Every series reads all rows through its own accessors. For multiple series, keep one row per observation and point each series at its own fields:

const data = [
    { morningAngle: 60,
        morningSpeed: 32,
        eveningAngle: 250,
        eveningSpeed: 78 },
];

const series = [
    { id: 'morning',
        label: 'Morning',
        angle: 'morningAngle',
        radius: 'morningSpeed' },
    { id: 'evening',
        label: 'Evening',
        angle: 'eveningAngle',
        radius: 'eveningSpeed' },
];

Options

• data — The data array
• series — Array of series with id, label, angle (degrees accessor), radius (value accessor), optional color, sizeBy, minRadius, maxRadius
• maxRadiusValue — Value mapped to the outer ring (defaults to the data maximum)
• levels — Number of concentric value rings (default 4)
• angleTicks — Number of angular spokes/labels (default 8)
• legend — boolean | ChartLegendOptions — Series legend (shown by default for multiple series)
• format — Value formatter for tooltips and ring labels
• padding — Chart padding
• title — string | ChartTitleOptions — Chart title
• animation — boolean | ChartAnimationOptions — Enable/configure animations