React chart example
Rose chart
Compare categories or recurring periods around a circle, with outward bar length showing magnitude.
What is a rose chart?
A rose chart arranges bars around a circle, with categories occupying angular positions and values extending outwards. In this example, the distance from the centre encodes the value. Unlike a pie chart, each category does not receive an angle proportional to its share.
When to use it
Use a rose chart when the categories have a meaningful cyclic order, such as weekdays, months or directions. It can make a repeating pattern recognisable. For accurate ranking or small differences, ordinary bars are usually easier to compare because they share a straight baseline.
Design tips
Preserve the cycle’s natural order. Sorting weekdays by value would remove the calendar pattern the circular arrangement is meant to show.
Use a zero centre and visible radial scale. State what determines the length, because charts described as “rose” or “coxcomb” may use different area or radius conventions.
Keep the number of channels manageable. Many narrow petals and long labels can make a compact circular chart harder to scan.
Build this chart in React
Compare with
Use for separate circular tracks rather than bars around one cycle.
Use when accurate ranking matters more than a circular pattern.
Graphy Chart SDK
Add Graphy’s rose charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.