Basic violin
Response time per service with inner boxes.
Why it matters KDE with Silverman bandwidth, inner box, quartile ticks and themed tooltips with n/median/IQR; density morphs on update
Open the chart without page chrome ↗
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "violin",
toolbar: {
show: false
}
},
series: [
{
name: "Response ms",
data: [
{
x: "Platform",
y: [165.3, 149.2, 151.1, 172.9, 148.9, 144.2, 120.6, 165.8, 134.5, 123.7, 185.8, 134.8, 178, 127.4, 143.6, 143.2, 165.9, 165.7, 134.4, 125.7, 135.2, 137.1, 186.7, 144.7, 163.6, 151.3, 141.4, 140.1, 161.1, 130.5, 146.8, 119.8, 104.5, 137.8, 134.7, 157, 124.3, 193.2, 139.5, 121.7, 135.7, 140.3, 162.1, 148.4, 144.2, 163.1, 149.4, 121.2, 160.1, 157.3, 153.7, 137.6, 177.9, 140.6, 169.3, 144.5, 140.8, 151.2, 148.1, 174.5, 135.8, 146.5, 149, 169.1, 169.6, 196.8, 165.6, 107.2, 138.6, 165.4, 158.9, 139.7, 115.9, 161.7, 144.5, 138.6, 130.1, 133.4, 137.1, 161.7, 118, 117.7, 156.3, 145.5, 155.7, 123, 181.5, 144.9, 162.9, 158.8, 142.9, 142.2, 135, 159.6, 181.3, 134, 148.7, 108.3, 145, 155.1, 166.4, 136.5, 179.5, 178.6, 157.3, 136.7, 185.2, 164.7, 132.9, 173.1, 138.1, 188.4, 146.9, 141.9, 176.9, 112.3, 152.5, 152.9, 159.7, 185.7, 137, 143.3, 187.2, 134.8, 134.4, 127.1, 110.8, 170.6, 171.4, 158.7, 149.1, 125.5, 144.4, 160.8, 145, 163.3, 159.9, 175.5, 175.4, 177.6, 132.6, 164.2, 159.1, 152.7, 144.9, 144.7, 152.9, 182.3, 163.4, 157.1, 136, 161.9, 162.3, 190.3, 152.6, 159, 159.1, 158.4, 159.5, 150.6]
},
{
x: "Payments",
y: [184.4, 215.9, 175.1, 149.4, 165.8, 122.1, 200.2, 212.8, 195.2, 192.1, 239.3, 151.9, 166.7, 176.9, 151.6, 190.1, 155.8, 205, 154.6, 184.9, 182.2, 155.3, 165, 190.2, 169.3, 200.2, 198.4, 187.8, 177.5, 150.2, 141.6, 143.8, 129.8, 152.6, 200.1, 207.8, 203.1, 223.6, 204.3, 174.8, 134.7, 177.3, 189.1, 169.2, 154.4, 171.5, 188.2, 148.7, 174, 166.5, 217.9, 182.5, 157.6, 168.2, 251.5, 176.9, 206.6, 175.2, 199, 244, 183.5, 149.2, 196.3, 157.2, 193.8, 178.5, 191.3, 223.7, 155.9, 154.9, 156.4, 186.8, 230.7, 189, 182.8, 181.3, 159, 142.7, 175.1, 178.2, 174.7, 228.9, 165.7, 180.7, 175.8, 210, 195.8, 192.6, 159, 161.7, 190.4, 185.2, 210.5, 172.2, 152.9, 162.9, 176.9, 184.3, 164.1, 142.3, 181.5, 197.1, 159.2, 214.5, 195.5, 143.8, 202.1, 202.3, 159.1, 169.5, 170.9, 140.1, 162.8, 195.4, 161.4, 157.3, 160.3, 179.1, 200, 134.5, 180.6, 188.2, 209.9, 187.3, 163.8, 172.3, 151.6, 177.7, 234.5, 137.2, 202.8, 203.4, 167, 133.4, 148.5, 200.6, 198.5, 195.3, 172.1, 153.5, 207.2, 138.9, 229.4, 170, 188.4, 147.6, 218.9, 228.1, 180.1, 181.3, 215.9, 199.4, 203.5, 169.8, 151.7, 162.7, 205.3, 158.3, 161, 220]
},
{
x: "Search",
y: [189.9, 214, 210.1, 172.9, 202.2, 188.8, 189, 181.3, 262.8, 178.1, 230.1, 185, 225.9, 184.5, 207.7, 247.5, 269.6, 208.1, 222.3, 224.7, 185.2, 209.4, 198, 230.4, 242.6, 196.1, 177.1, 221.2, 244.9, 148.5, 234.3, 222.6, 218.7, 215.2, 178.3, 225.4, 164.6, 217.8, 251.7, 213.3, 234.9, 236.3, 177.5, 184.4, 236.2, 212.3, 195.1, 234, 199.6, 244.8, 171.6, 223.3, 186.6, 215.1, 165.4, 241.6, 230.6, 173.1, 220.3, 169.9, 170.3, 172.5, 256.7, 239.7, 241.2, 170.6, 217.2, 219.4, 236.5, 215.1, 248, 160.3, 164.2, 220.3, 188.6, 221.3, 247.5, 192.6, 265.6, 185.9, 189.3, 198, 170.2, 223.1, 195.8, 250.6, 198, 226.6, 245.6, 191.2, 209.4, 193.4, 172.3, 174.9, 210.1, 198.9, 180.4, 212.9, 207, 161.2, 163.3, 180.1, 171.7, 228.2, 198.1, 196.5, 181.6, 221, 258.8, 230.6, 249.9, 117.7, 118.3, 159, 203.3, 198.5, 215.4, 163, 209.6, 200, 226.6, 197.3, 202, 171.7, 255, 211.9, 205.6, 153.7, 202.7, 198.2, 198.9, 213.7, 219.1, 214.5, 187.7, 264.7, 189.6, 161.1, 195.3, 235.3, 225.2, 172.4, 222.2, 227.2, 200.2, 247.9, 184.5, 210.8, 227.8, 225.8, 160.6, 237.1, 175.9, 173.4, 161.3, 265.5, 197, 256.9, 232.5, 195.9]
},
{
x: "Mobile",
y: [237.5, 222.9, 230.6, 260.9, 221.6, 203, 225.8, 197.8, 278.5, 202.5, 195.8, 237.9, 333.7, 235.6, 193.6, 280.9, 259, 205.4, 316.3, 236.8, 255.8, 275.4, 209, 264.8, 279.5, 211.5, 244.5, 278.5, 256.5, 238.3, 266.8, 227.9, 227.3, 218.3, 219.9, 295.4, 268.3, 191.3, 290.4, 316.3, 243.1, 229.5, 230.1, 281.8, 233.5, 183.3, 288.3, 222.9, 229.4, 252, 284.7, 224.4, 237.5, 274.1, 207.2, 261.3, 218.9, 257.7, 234.4, 254.9, 257.4, 245.1, 202.4, 187.6, 296.7, 240.3, 253.1, 290.9, 212.8, 291, 301.4, 234.1, 213.7, 262.1, 242.2, 296.5, 241.1, 275.8, 264.2, 229, 246.1, 272, 265.2, 241.5, 257.1, 269.3, 252.2, 208, 237.5, 231.9, 315.5, 266.4, 279, 248.2, 229.3, 275.4, 255.2, 254.1, 280.5, 228.5, 301.7, 249.1, 279, 263.4, 215.5, 245.6, 296.9, 254.6, 251.8, 212.6, 263.2, 240.6, 221.6, 303.5, 207.7, 252.5, 275, 202.8, 284.3, 314, 249.9, 181.3, 283.4, 271.2, 320.2, 217.7, 256, 272.1, 246.8, 271, 284.8, 251.8, 319.7, 279.4, 238.3, 207.7, 252.2, 308.3, 224, 247.8, 190.2, 220.1, 155.8, 250.4, 196.2, 196.1, 299.6, 189.7, 272.3, 252.8, 223.2, 264.9, 262, 249.1, 234.9, 210.6, 223.5, 199, 265.5, 218]
},
{
x: "Data",
y: [321.1, 270.7, 270.6, 216.5, 305.6, 298.2, 272.9, 265.6, 285.8, 233.8, 208.2, 251, 254.6, 185.3, 254.6, 319.8, 301.3, 226.6, 297.7, 243.8, 307.7, 244.3, 322.7, 194.1, 293.9, 318.8, 260.1, 275.2, 306.8, 229.8, 315, 187.5, 298, 301.6, 292.8, 220.5, 317.6, 289.1, 263.8, 263.2, 252.5, 250.7, 217.6, 242.8, 309.7, 246, 277.8, 229, 282.5, 284.7, 310.7, 240.8, 306.2, 259.7, 282.2, 286.2, 205.4, 270.3, 297.3, 314.6, 267.9, 318.3, 301.9, 291.3, 289.3, 229.8, 259.3, 207.8, 238.8, 286.4, 306.3, 271, 332.6, 314.8, 247.3, 350.6, 378.4, 278.2, 281.6, 301.2, 277.8, 175.7, 321.1, 244.2, 202.2, 304.3, 261.6, 318.7, 248.7, 316.2, 371, 278.7, 313.7, 259, 248.8, 256.4, 287.7, 267.4, 260.4, 215.1, 281.3, 245.2, 281.7, 337.3, 305, 270.6, 264.6, 245.6, 264.9, 261.7, 303.9, 241.2, 206.2, 248.1, 289, 300.6, 137.4, 232.6, 263.1, 323.3, 340.6, 220.2, 256.8, 283.2, 264.7, 271.5, 303.7, 267.3, 248.9, 223.6, 263.6, 287.8, 341.6, 244.5, 261.3, 274.7, 242.1, 278.6, 303.7, 188.2, 235.8, 216.3, 267.3, 295.2, 332.9, 338, 263.5, 263, 237.8, 219.1, 298.4, 222.9, 256.2, 151, 257.6, 213.3, 281.3, 240.2, 213.5, 229.5]
}
]
}
],
plotOptions: {
violin: {
box: {
show: true
},
points: {
show: false
}
}
},
title: {
text: "Response time by service (ms)"
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
WestCoastCharts.use(types)
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "violin",
toolbar: {
show: false
}
},
series: [
{
name: "Response ms",
data: [
{
x: "Platform",
y: [165.3, 149.2, 151.1, 172.9, 148.9, 144.2, 120.6, 165.8, 134.5, 123.7, 185.8, 134.8, 178, 127.4, 143.6, 143.2, 165.9, 165.7, 134.4, 125.7, 135.2, 137.1, 186.7, 144.7, 163.6, 151.3, 141.4, 140.1, 161.1, 130.5, 146.8, 119.8, 104.5, 137.8, 134.7, 157, 124.3, 193.2, 139.5, 121.7, 135.7, 140.3, 162.1, 148.4, 144.2, 163.1, 149.4, 121.2, 160.1, 157.3, 153.7, 137.6, 177.9, 140.6, 169.3, 144.5, 140.8, 151.2, 148.1, 174.5, 135.8, 146.5, 149, 169.1, 169.6, 196.8, 165.6, 107.2, 138.6, 165.4, 158.9, 139.7, 115.9, 161.7, 144.5, 138.6, 130.1, 133.4, 137.1, 161.7, 118, 117.7, 156.3, 145.5, 155.7, 123, 181.5, 144.9, 162.9, 158.8, 142.9, 142.2, 135, 159.6, 181.3, 134, 148.7, 108.3, 145, 155.1, 166.4, 136.5, 179.5, 178.6, 157.3, 136.7, 185.2, 164.7, 132.9, 173.1, 138.1, 188.4, 146.9, 141.9, 176.9, 112.3, 152.5, 152.9, 159.7, 185.7, 137, 143.3, 187.2, 134.8, 134.4, 127.1, 110.8, 170.6, 171.4, 158.7, 149.1, 125.5, 144.4, 160.8, 145, 163.3, 159.9, 175.5, 175.4, 177.6, 132.6, 164.2, 159.1, 152.7, 144.9, 144.7, 152.9, 182.3, 163.4, 157.1, 136, 161.9, 162.3, 190.3, 152.6, 159, 159.1, 158.4, 159.5, 150.6]
},
{
x: "Payments",
y: [184.4, 215.9, 175.1, 149.4, 165.8, 122.1, 200.2, 212.8, 195.2, 192.1, 239.3, 151.9, 166.7, 176.9, 151.6, 190.1, 155.8, 205, 154.6, 184.9, 182.2, 155.3, 165, 190.2, 169.3, 200.2, 198.4, 187.8, 177.5, 150.2, 141.6, 143.8, 129.8, 152.6, 200.1, 207.8, 203.1, 223.6, 204.3, 174.8, 134.7, 177.3, 189.1, 169.2, 154.4, 171.5, 188.2, 148.7, 174, 166.5, 217.9, 182.5, 157.6, 168.2, 251.5, 176.9, 206.6, 175.2, 199, 244, 183.5, 149.2, 196.3, 157.2, 193.8, 178.5, 191.3, 223.7, 155.9, 154.9, 156.4, 186.8, 230.7, 189, 182.8, 181.3, 159, 142.7, 175.1, 178.2, 174.7, 228.9, 165.7, 180.7, 175.8, 210, 195.8, 192.6, 159, 161.7, 190.4, 185.2, 210.5, 172.2, 152.9, 162.9, 176.9, 184.3, 164.1, 142.3, 181.5, 197.1, 159.2, 214.5, 195.5, 143.8, 202.1, 202.3, 159.1, 169.5, 170.9, 140.1, 162.8, 195.4, 161.4, 157.3, 160.3, 179.1, 200, 134.5, 180.6, 188.2, 209.9, 187.3, 163.8, 172.3, 151.6, 177.7, 234.5, 137.2, 202.8, 203.4, 167, 133.4, 148.5, 200.6, 198.5, 195.3, 172.1, 153.5, 207.2, 138.9, 229.4, 170, 188.4, 147.6, 218.9, 228.1, 180.1, 181.3, 215.9, 199.4, 203.5, 169.8, 151.7, 162.7, 205.3, 158.3, 161, 220]
},
{
x: "Search",
y: [189.9, 214, 210.1, 172.9, 202.2, 188.8, 189, 181.3, 262.8, 178.1, 230.1, 185, 225.9, 184.5, 207.7, 247.5, 269.6, 208.1, 222.3, 224.7, 185.2, 209.4, 198, 230.4, 242.6, 196.1, 177.1, 221.2, 244.9, 148.5, 234.3, 222.6, 218.7, 215.2, 178.3, 225.4, 164.6, 217.8, 251.7, 213.3, 234.9, 236.3, 177.5, 184.4, 236.2, 212.3, 195.1, 234, 199.6, 244.8, 171.6, 223.3, 186.6, 215.1, 165.4, 241.6, 230.6, 173.1, 220.3, 169.9, 170.3, 172.5, 256.7, 239.7, 241.2, 170.6, 217.2, 219.4, 236.5, 215.1, 248, 160.3, 164.2, 220.3, 188.6, 221.3, 247.5, 192.6, 265.6, 185.9, 189.3, 198, 170.2, 223.1, 195.8, 250.6, 198, 226.6, 245.6, 191.2, 209.4, 193.4, 172.3, 174.9, 210.1, 198.9, 180.4, 212.9, 207, 161.2, 163.3, 180.1, 171.7, 228.2, 198.1, 196.5, 181.6, 221, 258.8, 230.6, 249.9, 117.7, 118.3, 159, 203.3, 198.5, 215.4, 163, 209.6, 200, 226.6, 197.3, 202, 171.7, 255, 211.9, 205.6, 153.7, 202.7, 198.2, 198.9, 213.7, 219.1, 214.5, 187.7, 264.7, 189.6, 161.1, 195.3, 235.3, 225.2, 172.4, 222.2, 227.2, 200.2, 247.9, 184.5, 210.8, 227.8, 225.8, 160.6, 237.1, 175.9, 173.4, 161.3, 265.5, 197, 256.9, 232.5, 195.9]
},
{
x: "Mobile",
y: [237.5, 222.9, 230.6, 260.9, 221.6, 203, 225.8, 197.8, 278.5, 202.5, 195.8, 237.9, 333.7, 235.6, 193.6, 280.9, 259, 205.4, 316.3, 236.8, 255.8, 275.4, 209, 264.8, 279.5, 211.5, 244.5, 278.5, 256.5, 238.3, 266.8, 227.9, 227.3, 218.3, 219.9, 295.4, 268.3, 191.3, 290.4, 316.3, 243.1, 229.5, 230.1, 281.8, 233.5, 183.3, 288.3, 222.9, 229.4, 252, 284.7, 224.4, 237.5, 274.1, 207.2, 261.3, 218.9, 257.7, 234.4, 254.9, 257.4, 245.1, 202.4, 187.6, 296.7, 240.3, 253.1, 290.9, 212.8, 291, 301.4, 234.1, 213.7, 262.1, 242.2, 296.5, 241.1, 275.8, 264.2, 229, 246.1, 272, 265.2, 241.5, 257.1, 269.3, 252.2, 208, 237.5, 231.9, 315.5, 266.4, 279, 248.2, 229.3, 275.4, 255.2, 254.1, 280.5, 228.5, 301.7, 249.1, 279, 263.4, 215.5, 245.6, 296.9, 254.6, 251.8, 212.6, 263.2, 240.6, 221.6, 303.5, 207.7, 252.5, 275, 202.8, 284.3, 314, 249.9, 181.3, 283.4, 271.2, 320.2, 217.7, 256, 272.1, 246.8, 271, 284.8, 251.8, 319.7, 279.4, 238.3, 207.7, 252.2, 308.3, 224, 247.8, 190.2, 220.1, 155.8, 250.4, 196.2, 196.1, 299.6, 189.7, 272.3, 252.8, 223.2, 264.9, 262, 249.1, 234.9, 210.6, 223.5, 199, 265.5, 218]
},
{
x: "Data",
y: [321.1, 270.7, 270.6, 216.5, 305.6, 298.2, 272.9, 265.6, 285.8, 233.8, 208.2, 251, 254.6, 185.3, 254.6, 319.8, 301.3, 226.6, 297.7, 243.8, 307.7, 244.3, 322.7, 194.1, 293.9, 318.8, 260.1, 275.2, 306.8, 229.8, 315, 187.5, 298, 301.6, 292.8, 220.5, 317.6, 289.1, 263.8, 263.2, 252.5, 250.7, 217.6, 242.8, 309.7, 246, 277.8, 229, 282.5, 284.7, 310.7, 240.8, 306.2, 259.7, 282.2, 286.2, 205.4, 270.3, 297.3, 314.6, 267.9, 318.3, 301.9, 291.3, 289.3, 229.8, 259.3, 207.8, 238.8, 286.4, 306.3, 271, 332.6, 314.8, 247.3, 350.6, 378.4, 278.2, 281.6, 301.2, 277.8, 175.7, 321.1, 244.2, 202.2, 304.3, 261.6, 318.7, 248.7, 316.2, 371, 278.7, 313.7, 259, 248.8, 256.4, 287.7, 267.4, 260.4, 215.1, 281.3, 245.2, 281.7, 337.3, 305, 270.6, 264.6, 245.6, 264.9, 261.7, 303.9, 241.2, 206.2, 248.1, 289, 300.6, 137.4, 232.6, 263.1, 323.3, 340.6, 220.2, 256.8, 283.2, 264.7, 271.5, 303.7, 267.3, 248.9, 223.6, 263.6, 287.8, 341.6, 244.5, 261.3, 274.7, 242.1, 278.6, 303.7, 188.2, 235.8, 216.3, 267.3, 295.2, 332.9, 338, 263.5, 263, 237.8, 219.1, 298.4, 222.9, 256.2, 151, 257.6, 213.3, 281.3, 240.2, 213.5, 229.5]
}
]
}
],
plotOptions: {
violin: {
box: {
show: true
},
points: {
show: false
}
}
},
title: {
text: "Response time by service (ms)"
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()Waiting for the chart.
Open Data & agent view to read this chart through chart.describe().
Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.
$ wcc chart export violin-basic-violin.json --out violin-basic-violin.svg --with-tablePublic agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference
Loading /gallery/violin/basic-violin/index.md …