Violin Chart

Distribution visualization combining box plot and kernel density.

Highlights

•

Adjustable violin width ratio to balance spacing in dense comparisons.

•

Overlay statistic markers (median, mean, quartiles, whiskers) with optional value labels.

•

Add chart-wide value bands to spotlight SLA windows, target ranges, or alert thresholds.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/charts

Examples

⁽⁶⁾

Properties

⁽⁵²⁾

Playground

Loading demo…

import
 
{
 
ViolinChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
SERIES
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<ViolinChart
      
title
=
"Delivery time distribution"
      
height
=
{
360
}
      
series
=
{
SERIES
}
      
samples
=
{
128
}
      
bandwidth
=
{
3.5
}
    
/>
  
)
;
}

Loading demo…

import
 
{
 
ViolinChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 FULFILLMENT_CENTERS
,
 SLA_WINDOW
,
 STATS_MARKERS 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<ViolinChart
      
title
=
"Delivery time spread by fulfillment center"
      
subtitle
=
"Distribution of hours from order capture to doorstep delivery"
      
height
=
{
460
}
      
series
=
{
FULFILLMENT_CENTERS
}
      
samples
=
{
96
}
      
bandwidth
=
{
1.6
}
      
violinWidthRatio
=
{
0.82
}
      
statsMarkers
=
{
STATS_MARKERS
}
      
valueBands
=
{
SLA_WINDOW
}
      
yAxis
=
{
{
 title
:
 
'Hours to deliver'
,
 show
:
 
true
,
 labelFormatter
:
 
(
value
)
 
=>
 
`${value.toFixed(0)}h`
 
}
}
    
/>
  
)
;
}

Loading demo…

import
 
{
 
ViolinChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 EXPERIMENT_SERIES
,
 
STATS
,
 VALUE_BANDS 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<ViolinChart
      
title
=
"Experiment metric deltas vs. control"
      
subtitle
=
"Percent change in weekly activation compared to holdout"
      
height
=
{
460
}
      
series
=
{
EXPERIMENT_SERIES
}
      
samples
=
{
88
}
      
bandwidth
=
{
1.5
}
      
violinWidthRatio
=
{
0.68
}
      
statsMarkers
=
{
STATS
}
      
valueBands
=
{
VALUE_BANDS
}
      
yAxis
=
{
{
        title
:
 
'Percent delta'
,
        labelFormatter
:
 
(
value
)
 
=>
 
`${value.toFixed(1)}%`
,
      
}
}
      
xAxis
=
{
{
 show
:
 
true
,
 title
:
 
'Variant cohorts'
 
}
}
    
/>
  
)
;
}

Loading demo…

import
 
{
 
ViolinChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 ERROR_SERIES
,
 
STATS
,
 VALUE_BANDS 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<ViolinChart
      
title
=
"Prediction error distribution per model version"
      
subtitle
=
"Mean absolute error (percentage points) across validation folds"
      
height
=
{
460
}
      
series
=
{
ERROR_SERIES
}
      
samples
=
{
96
}
      
bandwidth
=
{
0.9
}
      
violinWidthRatio
=
{
0.78
}
      
statsMarkers
=
{
STATS
}
      
valueBands
=
{
VALUE_BANDS
}
      
yAxis
=
{
{
        title
:
 
'MAE (%)'
,
        labelFormatter
:
 
(
value
)
 
=>
 
`${value.toFixed(2)}%`
,
      
}
}
    
/>
  
)
;
}

Loading demo…

import
 
{
 
ViolinChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 MARKET_RANGE
,
 SALARY_SERIES
,
 
STATS
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<ViolinChart
      
title
=
"Total compensation distribution by department"
      
subtitle
=
"Annual salary including bonus (USD thousands)"
      
height
=
{
480
}
      
series
=
{
SALARY_SERIES
}
      
samples
=
{
96
}
      
bandwidth
=
{
2.8
}
      
violinWidthRatio
=
{
0.74
}
      
statsMarkers
=
{
STATS
}
      
valueBands
=
{
MARKET_RANGE
}
      
yAxis
=
{
{
        title
:
 
'Total compensation (k$)'
,
        labelFormatter
:
 
(
value
)
 
=>
 
`$${value.toFixed(0)}k`
,
      
}
}
    
/>
  
)
;
}

Loading demo…

import
 
{
 
ViolinChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 ENGAGEMENT_BANDS
,
 SESSION_SERIES
,
 
STATS
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<ViolinChart
      
title
=
"Session duration distribution by platform"
      
subtitle
=
"Minutes per active session across major surfaces"
      
height
=
{
440
}
      
series
=
{
SESSION_SERIES
}
      
samples
=
{
88
}
      
bandwidth
=
{
1.9
}
      
violinWidthRatio
=
{
0.7
}
      
statsMarkers
=
{
STATS
}
      
valueBands
=
{
ENGAGEMENT_BANDS
}
      
yAxis
=
{
{
        title
:
 
'Minutes per session'
,
        labelFormatter
:
 
(
value
)
 
=>
 
`${value.toFixed(1)} min`
,
      
}
}
    
/>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/ViolinChart

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap