React ChartsNightingale Series

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 Copy Link

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 Copy Link

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 Copy Link

Inner Radius Copy Link

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 Copy Link

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 Copy Link

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 Copy Link

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,
            },
        },
    ],
}

API Reference Copy Link