Violin Plot

import Chart from 'chart.js/auto';

// Illustrative data used by the live preview.
const chartData = {
  "observationHeaders": [
    "Channel",
    "Minutes"
  ],
  "observations": [
    {
      "group": "Email",
      "value": 4
    },
    {
      "group": "Email",
      "value": 5
    },
    {
      "group": "Email",
      "value": 6
    },
    {
      "group": "Email",
      "value": 6
    },
    {
      "group": "Email",
      "value": 7
    },
    {
      "group": "Email",
      "value": 8
    },
    {
      "group": "Email",
      "value": 9
    },
    {
      "group": "Email",
      "value": 9
    },
    {
      "group": "Email",
      "value": 10
    },
    {
      "group": "Email",
      "value": 12
    },
    {
      "group": "Email",
      "value": 14
    },
    {
      "group": "Email",
      "value": 18
    },
    {
      "group": "Chat",
      "value": 2
    },
    {
      "group": "Chat",
      "value": 2
    },
    {
      "group": "Chat",
      "value": 3
    },
    {
      "group": "Chat",
      "value": 3
    },
    {
      "group": "Chat",
      "value": 4
    },
    {
      "group": "Chat",
      "value": 4
    },
    {
      "group": "Chat",
      "value": 5
    },
    {
      "group": "Chat",
      "value": 5
    },
    {
      "group": "Chat",
      "value": 6
    },
    {
      "group": "Chat",
      "value": 7
    },
    {
      "group": "Chat",
      "value": 8
    },
    {
      "group": "Chat",
      "value": 10
    }
  ],
  "datasets": []
};

function createConfig(chartData) {
    const observations = chartData.observations;
    const groups = [...new Set(observations.map(item => item.group))];
    const palette = ['#2563eb', '#0f766e', '#b45309', '#7c3aed', '#be185d'];
    const curves = groups.map((group, index) => {
        const values = observations.filter(item => item.group === group).map(item => item.value);
        const n = values.length, mean = values.reduce((sum, value) => sum + value, 0) / n;
        const h = Math.hypot(...values.map(value => value - mean)) / Math.sqrt(n - 1) * n ** -0.2;
        const lower = Math.min(...values) - 3 * h, upper = Math.max(...values) + 3 * h;
        const points = Array.from({ length: 257 }, (_, point) => {
            const x = lower + (upper - lower) * point / 256;
            const y = values.reduce((sum, value) => sum + Math.exp(-0.5 * ((x - value) / h) ** 2), 0) / (n * h * Math.sqrt(2 * Math.PI));
            return { x, y };
        });
        const sorted = [...values].sort((a, b) => a - b);
        const median = (sorted[Math.floor((n - 1) / 2)] + sorted[Math.floor(n / 2)]) / 2;
        const peak = Math.max(...points.map(point => point.y));
        const halfMedian = Math.min(0.4, 0.4 * values.reduce((sum, value) => sum + Math.exp(-0.5 * ((median - value) / h) ** 2), 0) / (n * h * Math.sqrt(2 * Math.PI)) / peak);
        const polygon = [...points.map(point => ({ x: index - 0.4 * point.y / peak, y: point.x })), ...[...points].reverse().map(point => ({ x: index + 0.4 * point.y / peak, y: point.x }))];
        polygon.push(polygon[0]);
        return { group, n, h, median, halfMedian, peak, points, polygon, index, color: palette[index % palette.length] };
    });
    return {
        type: 'line', data: { datasets: curves.flatMap(curve => [
                { label: curve.group, data: curve.polygon, borderColor: curve.color, backgroundColor: curve.color + '55', fill: 'shape', borderWidth: 1.5, pointRadius: 0, tension: 0, order: 1 },
                { label: 'Median', data: [{ x: curve.index - curve.halfMedian, y: curve.median }, { x: curve.index + curve.halfMedian, y: curve.median }], borderColor: '#0f172a', backgroundColor: '#0f172a', fill: false, borderWidth: 3, pointRadius: 0, tension: 0, order: 0 },
            ]) },
        options: { responsive: true, maintainAspectRatio: false, interaction: { mode: 'nearest', intersect: false },
            scales: {
                x: { type: 'linear', min: -0.5, max: groups.length - 0.5, afterBuildTicks: scale => { scale.ticks = groups.map((_, value) => ({ value })); }, ticks: { maxRotation: 0, callback: value => curves[Number(value)] ? `${curves[Number(value)].group} (n=${curves[Number(value)].n})` : '' }, title: { display: true, text: chartData.observationHeaders[0] }, grid: { display: false } },
                y: { title: { display: true, text: chartData.observationHeaders[1] } },
            },
            plugins: { legend: { display: false }, title: { display: true, text: 'Equal Maximum Width; Dark Mark: Median' }, tooltip: { callbacks: { title: items => items[0] ? curves[Math.floor(items[0].datasetIndex / 2)].group : '', label: item => { const curve = curves[Math.floor(item.datasetIndex / 2)]; return [`Observations: ${curve.n}`, `Median: ${curve.median}`, `Scott Bandwidth: ${curve.h.toPrecision(4)}`]; } } } }, },
    };
}

const chart = new Chart(document.getElementById('myChart'), createConfig(chartData));

Preview and code follow the same library selection.

npm install chart.js@4.5.1

<div style="height:320px"><canvas id="myChart"></canvas></div>