{"id":20510,"date":"2021-01-07T15:18:23","date_gmt":"2021-01-07T14:18:23","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=20510"},"modified":"2026-01-13T11:17:22","modified_gmt":"2026-01-13T11:17:22","slug":"violin-plot-with-highcharts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/violin-plot-with-highcharts\/","title":{"rendered":"Violin plot with Highcharts"},"content":{"rendered":"<p>In a previous article, I covered how to create a <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/violin-plot\/\" target=\"_blank\" rel=\"noopener noreferrer\">violin plot<\/a> using an <code>areaSpline<\/code> chart type. Well, there is more than one way to catch a rabbit, so in this article, I will show you how easy it is to create a violin plot with a <a href=\"https:\/\/www.highcharts.com\/demo\/streamgraph\" target=\"_blank\" rel=\"noopener noreferrer\">streamGraph chart type<\/a> with Highcharts.<\/p>\n<p class=\"demo-comtainer\">\n<iframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\" title=\"Violin plot streamGraph: The 2012 Olympic rowing male vs female athletes weight\" src=\"https:\/\/codepen.io\/mushigh\/embed\/NWRzMyv?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"An area spline chart displays the olympic rowing athletes weight for men and women using violin shape\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/NWRzMyv'>Violin plot streamGraph: The 2012 Olympic rowing male vs female athletes weight<\/a> by mustapha mekhatria<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe>\n<\/p>\n<p>&nbsp;<br \/>\nLet\u2019s see how these plots are created.<br \/>\nLike in the previous violin plot article, the data is fetched from the following <a href=\"https:\/\/github.com\/mekhatria\/violin-plot\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub link<\/a>, then processed using the <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/data-science-and-highcharts-kernel-density-estimation\/\" target=\"_blank\" rel=\"noopener noreferrer\">kernel density estimation (KDE)<\/a> function. In the code, I just copy\/paste the final result for both athletes (male and female) in the code.<\/p>\n<pre>Let male = [\r\n    [47, 5.608535227799803e-11],\r\n    [48, 1.372407067436998e-8], \r\n    \u2026\r\n  ],\r\n  female = [...\r\n    [43, 1.7398814086959525e-10],\r\n    [44, 4.2738095400258076e-8], \r\n    \u2026\r\n  ];<\/pre>\n<p><i><b>Remark<\/b><br \/>\nThe KDE function provides three values; the first one is the x-axis value, whereas the last two are the negative and positive density values. As the <code>streamGraph<\/code> chart uses only one y-Axis value, there is no need to keep both values, especially if you are dealing with a huge number of data as it might reduce the browser\u2019s performance. In this case, I keep only positive values.<\/i><\/p>\n<p>To use the <code>streamGraph<\/code> chart type in Highchart, you have to add the <code>streamgraph.js<\/code> module, then specify the type under chart: <\/p>\n<pre>\r\n &lt;script src=\"https:\/\/code.highcharts.com\/modules\/streamgraph.js\"&gt;&lt;\/script&gt;\r\n...\r\n chart: {\r\n    type: \"streamgraph\",\r\n    inverted: true\r\n  },\r\n...<\/pre>\n<p>To put the series side by side, I am using <a href=\"https:\/\/www.highcharts.com\/demo\/combo-multi-axes\" target=\"_blank\" rel=\"noopener noreferrer\">two y-axes<\/a> (one axis of male and the other one for female):<\/p>\n<pre>yAxis: [\r\n    {\r\n      width: \"45%\",\r\n      offset: 0,\r\n      visible: false\r\n    },\r\n    {\r\n      width: \"45%\",\r\n      left: \"55%\",\r\n      offset: 0,\r\n      visible: false\r\n    }\r\n  ],<\/pre>\n<p>That\u2019s it, it is that easy \ud83d\ude42<br \/>\nNow, you know how to create a violin plot using a <code>streamGraph<\/code> type chart with Highcharts.<br \/>\nFeel free to share your experience with the violin plot in the comments section below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Step by step tutorial to create interactive violin plot using Highcharts, kernel density estimation, and streamgraph .<\/p>\n","protected":false},"author":32,"featured_media":20524,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1063,1094],"coauthors":[699],"class_list":["post-20510","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-data-visualization","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=20510"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20510\/revisions"}],"predecessor-version":[{"id":29335,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20510\/revisions\/29335"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/20524"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=20510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=20510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=20510"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}