ViolinChart

Live preview

Loading example…

Violin plot: a Gaussian kernel density mirrored around each category axis, with an optional inner box or quartile lines. Two series can share one split violin per category to compare them side by side.

Import

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

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

Usage

<ViolinChart
  title="Duración por tipo de servicio"
  categories={services}
  series={[{ id: "duracion", name: "Duración", data: durations }]}
  valueFormat={minutes}
  valueAxis={{ title: "min" }}
  orientation="vertical"
  inner="box"
  split={false}
  scale="width"
  height={340}
  grid
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`title` *	`string`
`categories` *	`readonly string[]`
`series` *	`readonly DistributionSeries[]`		`data[i]` holds the raw samples of `categories[i]`.
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`
`valueFormat`	`ValueFormat`
`valueAxis`	`DistributionAxisOptions`
`inner`	`"none" \| "box" \| "quartiles"`	`"box"`	What is drawn inside each violin: a slim box, quartile lines or nothing.
`split`	`boolean`	`false`	Two series share one violin per category: the first on the left (top when horizontal), the second on the right. Ignored unless exactly two series are visible.
`bandwidth`	`number`		Kernel bandwidth in data units; Silverman’s rule per violin by default.
`scale`	`"area" \| "width"`	`"width"`	“width”: every violin uses its full width (shapes compare, sizes do not). “area”: one density scale for all, so a wider violin means a denser peak.
`showPoints`	`boolean`	`false`	Every raw observation as a dot inside the violin, spread by its density.
`jitter`	`number`	`0.8`	Share (0-1) of the local violin width the dots spread over.
`pointColor`	`"value" \| "series"`	`"series"`	“value” grades each dot from pale to full colour across the value range.
`seed`	`number`	`11`	Seed of the jitter, so the dots are stable between renders.
`height`	`number \| "fill"`	`340`
`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

Source

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