How do I create a violin chart in JavaScript?

Install with `npm install katucharts.js`, then call KatuCharts.chart(container, { chart: { type: 'violin' }, series: [...] }).

Why does my violin chart render as a line chart?

The chart type was not registered. KatuCharts logs "KatuCharts: unknown series type " ", falling back to line" and draws a line chart rather than throwing. Import the module the type belongs to — for example `import 'katucharts.js/bio';` — before creating the chart.

Why do I get "Cannot read properties of null (reading 'appendChild')"?

The container element does not exist when the chart is created. Create the chart after the element is in the DOM: in React that means inside useEffect, not during render.

Why is the chart rendering with zero height?

The container has no height. A div with no content collapses to zero. Give it a height in CSS, or pass `chart: { height: 400 }` in the options.

Statistical

Violin

type: 'violin'

Distribution visualization showing data density as a symmetric KDE (kernel density estimate) curve mirrored on both sides.

Edit the JSON on the right and press Run (or ⌘/Ctrl + Enter) — data, titles, categories and colors all update live.

Live

Violin

Edit · JSON

{
  "chart": {
    "type": "violin"
  },
  "title": {
    "text": "Distribution"
  },
  "xAxis": {
    "categories": [
      "Control",
      "Low Dose",
      "High Dose"
    ]
  },
  "series": [
    {
      "name": "Samples",
      "data": [
        {
          "x": 0,
          "values": [
            35.00258268788697,
            48.40747007951836,
            44.349756314744944,
            36.35454352139919,
            60.813188344066205,
            47.25653148000737,
            50.52472334403984,
            49.025356559106484,
            49.167813918709584,
            43.44865565043749,
            41.555685560736514,
            56.407402778423766,
            39.21856420507521,
            46.408796465405075,
            52.642339558938836,
            59.8010637981827,
            46.47929673686558,
            37.540401436891784,
            41.52716473818492,
            57.05793837742688,
            52.77037156538141,
            51.634995072740125,
            49.36229213547175,
            42.044043249491644,
            44.235073858159666,
            58.88649660058925,
            35.348413936186965,
            40.79325754734991,
            52.27978775490055,
            56.39289616271192,
            35.40587404780637,
            46.52535308760158,
            61.60948790759732,
            50.66328951685065,
            37.907021900552344,
            53.31729461747901,
            63.77072740231708,
            44.61546035447667,
            62.0423372248582,
            35.561761325748414,
            56.52283224419023,
            59.241594447979324,
            63.47793225522892,
            43.6074255347321,
            40.00112965703116,
            58.98634137025694,
            63.439456972702835,
            56.95335242613531,
            64.99428903217827,
            59.0157638620732
          ]
        },
        {
          "x": 1,
          "values": [
            59.943276691197674,
            54.65148244113799,
            65.46556310864683,
            47.719257286488315,
            75.5574431703961,
            71.94737613475637,
            57.5507363849792,
            73.22657456083836,
            47.038673528506116,
            66.98622808604149,
            75.53552047026858,
            63.492555259254345,
            67.37634799757632,
            62.28087057665071,
            72.59189696385701,
            60.01230603643908,
            74.82768738253758,
            76.94185531040827,
            59.762202478723786,
            71.33719481745473,
            62.23334127406901,
            53.766908836333926,
            48.43699408177007,
            48.55975584086008,
            71.81663991680055,
            50.26712222142808,
            57.5233847541021,
            63.52771461897317,
            58.29970651240992,
            61.16750042156083,
            50.17970907146084,
            58.37057393916936,
            52.236341408673994,
            64.19024938735203,
            63.52155347310151,
            74.74932790337999,
            49.95408970951483,
            76.38595948683653,
            76.82110006718068,
            70.22883050258163,
            63.954309876965645,
            58.086204253217396,
            72.8350318491785,
            66.38032173493907,
            62.0674822275224,
            56.17391482663705,
            62.986654275084526,
            54.698511008823765,
            75.87469984020544,
            64.08022313386223
          ]
        },
        {
          "x": 2,
          "values": [
            86.31031193613104,
            63.41273159292781,
            63.78008258135997,
            87.84814229686572,
            79.72759243261777,
            67.64608756606103,
            83.7938899088594,
            69.90773893604776,
            85.3684475760613,
            73.49843927705516,
            74.269050780003,
            65.93657478963637,
            62.012669908825934,
            82.94336884742917,
            85.20026614163095,
            66.8730721193115,
            81.72328243844517,
            69.20799988900124,
            84.85428934158226,
            72.04099641092215,
            59.02681108194106,
            59.61408875101627,
            59.989868301888805,
            75.71677688296585,
            67.86917595646267,
            83.24046564310832,
            68.50610878831344,
            78.17056557179481,
            88.69564991043475,
            73.78804705179114,
            81.70691850474749,
            64.17936635779158,
            78.6105696536699,
            73.84425053451606,
            66.31885221537095,
            66.9493612404441,
            73.91454071357337,
            77.68589108687443,
            72.77158563935346,
            68.03996761333194,
            73.73584130381778,
            74.28491272151928,
            62.52822572787127,
            77.89001550515184,
            83.49068203521024,
            73.89300888953079,
            75.8005245707934,
            65.41656461769395,
            82.20171415172676,
            70.20980126895924
          ]
        }
      ]
    }
  ]
}

Data format

{ x: number, values: number[] }

Data shape

The JSON you pass inside the chart — drop it straight into your series.

data: [
  { x: 0, values: [12, 14, 18, 16, 19, 22] },
  { x: 1, values: [22, 26, 24, 28, 30, 32] }
]

Example

import KatuCharts from 'katucharts.js';

KatuCharts.chart('container', {
  chart: { type: 'violin' },
  xAxis: { categories: ['Control', 'Low', 'High'] },
  series: [{ data: [{ x: 0, values: [/* … */] }] }]
});

Type-specific options

Option	Description
`showBoxplot`	Overlay an inner boxplot.
`showPoints`	Overlay jittered raw points.
`bandwidth`	KDE bandwidth (Silverman by default).

Variations

Inner box & points

Overlay a boxplot and the raw jittered observations inside each violin.

import KatuCharts from 'katucharts.js';
import 'katucharts.js/bio';

KatuCharts.chart('container', {
  chart: { type: 'violin' },
  series: [{
    showBoxplot: true, showPoints: true,
    data: [{ x: 0, values: [/* … */] }]
  }]
});

Common errors

Why does my violin chart render as a line chart?: The chart type was not registered. KatuCharts logs "KatuCharts: unknown series type "<type>", falling back to line" and draws a line chart rather than throwing. Import the module the type belongs to — for example `import 'katucharts.js/bio';` — before creating the chart.
Why do I get "Cannot read properties of null (reading 'appendChild')"?: The container element does not exist when the chart is created. Create the chart after the element is in the DOM: in React that means inside useEffect, not during render.
Why is the chart rendering with zero height?: The container has no height. A div with no content collapses to zero. Give it a height in CSS, or pass `chart: { height: 400 }` in the options.

FAQ

How do I create a violin chart in JavaScript?: Install with `npm install katucharts.js`, then call KatuCharts.chart(container, { chart: { type: 'violin' }, series: [...] }).
Why does my violin chart render as a line chart?: The chart type was not registered. KatuCharts logs "KatuCharts: unknown series type "<type>", falling back to line" and draws a line chart rather than throwing. Import the module the type belongs to — for example `import 'katucharts.js/bio';` — before creating the chart.
Why do I get "Cannot read properties of null (reading 'appendChild')"?: The container element does not exist when the chart is created. Create the chart after the element is in the DOM: in React that means inside useEffect, not during render.
Why is the chart rendering with zero height?: The container has no height. A div with no content collapses to zero. Give it a height in CSS, or pass `chart: { height: 400 }` in the options.

Common options (color, visible, marker, dataLabels, animation, events, zones…) apply to every type — see Configuration → series. See it rendered in the gallery.