BoxGlyph

One box-and-whisker: IQR box, median line, whiskers with caps, optional mean diamond and outlier dots. Pure SVG, memoised.

Import

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

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

Usage

<BoxGlyph
  stats={stats}
  map={vertical}
  center={WIDTH / 2}
  size={64}
  horizontal={false}
  variant="box"
  showMean
  showOutliers
  dimmed={false}
  active={false}
/>

Props

Prop	Type	Default	Description
stats *	BoxStats
map *	(value: number) => number		Value to pixel along the value axis.
center *	number		Pixel of the box axis on the cross axis.
size *	number		Box thickness in pixels.
horizontal *	boolean
color *	string
variant	"box" | "inner"	"box"	“box”: soft fill and colored outline. “inner”: slim dark box for violins and rainclouds.
showMean	boolean	true
showOutliers	boolean	true
activeOutlier	number | null		Highlighted outlier value (keyboard or pointer).
dimmed	boolean
active	boolean

* marks a required prop.

Storybook stories

• Default
• Horizontal
• Inner Variant
• Without Mean And Outliers
• Active
• Dimmed

Source

packages/ui/src/charts/core/distribution/marks.tsx