Charts - Nightingale Examples

Rose chart where both angle and outer radius encode data values via `sliceRadiusValue`.

#Usage

import { ChartAnnotation, ChartDataLabels, ChartPie, ChartSvg, ChartTooltip } from '@primeui/vue-chart';
<ChartSvg>
    <ChartPie :data="data" category-field="month" value-field="count" slice-radius-value="count" :start-angle="-90" />
    <ChartDataLabels />
    <ChartAnnotation :render="renderCenter" />
    <ChartTooltip />
</ChartSvg>

Use a Nightingale chart when cyclical categories need radial magnitude. Make the angle categories obvious, because radius and angle encode separate ideas.

#US Tornado Climatology

sliceRadiusValue maps each month's count to radial depth, making the spring spike stand out against quiet winter months. The color array assigns seasonal hues so active and dormant periods read as distinct bands. ChartDataLabels places month labels on angled leader lines; hover to see the tooltip report the monthly total and annual share.

Loading Demo...

#NOAA Monthly Precipitation 2024

startAngle=-90 anchors January at 12 o'clock; sliceRadiusValue maps each month's value to radial depth so the longest petal is always the wettest month. The color array assigns seasonal hues to distinguish the four quarters at a glance. renderContent marks the peak month inline and ChartAnnotation displays the annual average in the center; hover to see each month's deviation from that figure.

Loading Demo...