React ChartsNightingale Series

Enterprise

A Nightingale Series, also called Rose or Wind Series, represents data as radial segments, with one segment per category value. It can simplify the comparison of datasets across multiple categories, providing a concise depiction of data trends.

Simple Nightingale

To create a Nightingale Series, use the nightingale series type.

series: [
    { type: 'nightingale', angleKey: 'quarter', radiusKey: 'software', radiusName: 'Software' },
    { type: 'nightingale', angleKey: 'quarter', radiusKey: 'hardware', radiusName: 'Hardware' },
    { type: 'nightingale', angleKey: 'quarter', radiusKey: 'services', radiusName: 'Services' },
],

In this configuration:

angleKey is set to 'quarter', which is the shared category for the Angle Axis.
radiusKey specifies the numerical datasets, 'software', 'hardware', and 'services', for the Radius Axis.
radiusName labels each series, such as 'Software', 'Hardware', and 'Services'.

Grouped Nightingale

Grouping sectors is used when you want to compare multiple data series side by side within the same category.

To group sectors in a Nightingale Series, enable the grouped series property.

series: [
    { type: 'nightingale', angleKey: 'quarter', radiusKey: 'software', radiusName: 'Software', grouped: true },
    { type: 'nightingale', angleKey: 'quarter', radiusKey: 'hardware', radiusName: 'Hardware', grouped: true },
    { type: 'nightingale', angleKey: 'quarter', radiusKey: 'services', radiusName: 'Services', grouped: true },
],

Customisation

Inner Radius

The inner radius can be used to create a 'donut' effect.

To create this 'donut' effect, use the innerRadiusRatio option on the Radius Number Axis.

axes: [
    { type: 'angle-category' },
    { type: 'radius-number', innerRadiusRatio: 0.2 },
],

Any value between 0 and 1 will set the inner radius as a proportion of the overall radius.

Category Padding

The following options are used to control the padding between different elements on the Angle Axis:

paddingInner: Gap between column groups, ranges from 0 (no gap) to 1 (maximum spacing).
groupPaddingInner: Spacing within a group, ranges from 0 (columns touching) to 1 (widest gap).

axes: [
    { type: 'angle-category', groupPaddingInner: 0.2, paddingInner: 0.3 },
    { type: 'radius-number' },
],

Axis Label Orientation

To change Angle Axis Label orientation, use the label.orientation property with these options:

fixed: Labels have fixed orientation (default).
parallel: Labels align parallel to the axis.
perpendicular: Labels align perpendicular to the axis.

The following configuration changes the orientation of the Axis Labels to parallel :

axes: [
    {
        type: 'angle-category',
        label: {
            orientation: 'parallel',
        },
    },
    { type: 'radius-number' },
],

Radius Axis Position

Customise the Radius Axis Line position via positionAngle and Axis Label rotation using label.rotation:

axes: [
    { type: 'angle-category' },
    {
        type: 'radius-number',
        positionAngle: 90,
        label: {
            rotation: -90,
        },
    },
],

Getting started

Core features

Specialised Charts

Series

Gauges