Skip to content
Get Pro
Radial

Rose Chart

A polar area chart in the Nightingale manner: one wedge per category, stacked by series, its radius on a square-root scale so the area tells the truth, cut apart by a constant-width gap.

$149 once · every Pro piece

Customize

Grey steps at rest, or a hatch per series. Wedges grow from the centre in a clockwise cascade. Point at a wedge and it grows outward on a spring while the others step back and a raised panel lists its layers; point at a layer and that series isolates in every wedge. Click a wedge, or press Enter on it, to select it: it alone burns in the accent. The legend isolates both ways and click hides a series, the wedges restacking on springs.

Install

npx shadcn@latest add @obsyde/rose-chart

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { RoseChart } from '@/components/obsyde/ember/rose-chart/RoseChart';

export function Example() {
  return (
    <RoseChart categories="months" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/rose-chart/RoseChart.tsxcomponent
  • ember/rose-chart/rose-chart.cssstyles
  • ember/rose-chart/RoseChartDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/state-messages.tsxshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/radial.tsxshared
  • ember/viz-kit/radial.cssshared
  • ember/viz-kit/Legend.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
categoriesCategories'months' | 'weekdays' | 'hours''months'
seriesSeriesnumber3
padGapnumber2
holeHolenumber0.08
ringsValue ringsbooleantrue
selectedSelected wedgenumber6
legendLegend'row' | 'none''row'
tooltipTooltip'panel' | 'corner' | 'none''panel'
patternPattern'none' | 'series' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''none'
statusStatus'ready' | 'loading' | 'empty''ready'
sizeSizenumber460
seedSeednumber4