New Features
Violin chart type
A new, tree-shakeable chart.type: 'violin' that renders a kernel-density curve for each category, with an optional overlay of the individual observations ("jitter") that produced it.
chart: {
type: 'violin',
},
plotOptions: {
violin: {
bandwidthScale: 1, // multiplies the density-derived half-width
normalize: 'individual', // 'individual' → each violin scaled to its own peak
// 'group' → all violins share one scale (widths track density across categories)
points: {
show: true,
shape: 'circle', // 'circle' | 'square'
size: 2.5, // radius (px)
jitter: 0.5, // 0..1 fraction of the half-width to scatter within
constrainToViolin: true,// clamp jitter to the density width at each value
maxPoints: 3000, // cap per violin; excess is stride-thinned
opacity: 0.9,
fillColor: 'series-dark',// 'series-dark' | 'series' | any literal colour
strokeColor: '#fff',
strokeWidth: 1,
// optional colorScale: { colors: [...], min, max, steps } to colour each dot by value
},
},
},- Available as a tree-shakeable entry:
import ApexCharts from 'apexcharts/violin', or via the full bundle. - Supports horizontal orientation and bimodal (multi-modal) densities.
- The jitter overlay reveals gradually as the violin path animates in (no instant pop-in).
Box-plot jitter overlay
Box plots can now overlay the raw observations behind each box, via plotOptions.boxPlot.points. It's off by default and inert unless a data point supplies a points: number[] array, so existing box-plot charts are unchanged.
plotOptions: {
boxPlot: {
points: {
show: true,
shape: 'circle', // 'circle' | 'square'
size: 2.5,
jitter: 0.5, // 0..1 fraction of the box half-width to scatter within
maxPoints: 3000, // cap per box; excess is stride-thinned
opacity: 0.9,
fillColor: 'series-dark',
strokeColor: '#fff',
strokeWidth: 1,
},
},
},