RaincloudChart

Raincloud plot (horizontal): a half violin “cloud” for the shape, a slim box for the summary and the jittered raw observations falling below as “rain”, so nothing about the distribution is hidden.

Import

import { RaincloudChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/raincloud-chart.

Usage

<RaincloudChart
  title="Tiempo de espera por barbero"
  categories={barbers}
  series={[{ id: "espera", name: "Espera", data: waitMinutes }]}
  valueFormat={minutes}
  valueAxis={{ title: "minutos de espera", min: 0 }}
  rain
  pointRadius={2.5}
  showMean
  grid
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
title *	string
categories *	readonly string[]		One row per category, e.g. barbers or time slots.
series *	readonly DistributionSeries[]		data[i] holds the raw samples of categories[i]. Several series stack inside a row.
valueFormat	ValueFormat
valueAxis	DistributionAxisOptions
bandwidth	number		Kernel bandwidth in data units; Silverman’s rule per cloud by default.
rain	boolean	true	Draw the raw observations under the box.
pointRadius	number	2.5	Radius of each raw point in pixels.
showMean	boolean	true
seed	number	7	Seed of the vertical jitter, so the rain is stable between renders.
height	number | "fill"		Height of the drawing; grows with the number of rows by default.
aspectRatio	number		Width / height ratio; sizes the drawing from the container width when height is not “fill”.
legend	boolean | "top" | "bottom"
grid	boolean	true
tooltip	boolean	true
loading	boolean
animate	boolean	true
labels	Partial<DistributionLabels>
className	string

* marks a required prop.

Storybook stories

• Default
• Without Rain
• Weekday Vs Saturday
• Average Ticket
• Narrow
• Loading
• Empty

Source

packages/ui/src/charts/raincloud-chart/raincloud-chart.tsx