--- title: Beyond the Box: Building Violin, Split, and Raincloud... description: A tutorial on building violin, split, and raincloud plots using the CanvasXpress JavaScript charting library. It covers the basic one-line violin plot, half... canonical: https://daily.dev/posts/beyond-the-box-building-violin-split-and-raincloud-plots-in-canvasxpress-fwfszlplb twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Beyond the Box: Building Violin, Split, and Raincloud Plots in CanvasXpress | daily.dev og:description: A tutorial on building violin, split, and raincloud plots using the CanvasXpress JavaScript charting library. It covers the basic one-line violin plot, half... og:url: https://daily.dev/posts/beyond-the-box-building-violin-split-and-raincloud-plots-in-canvasxpress-fwfszlplb og:image: https://api.daily.dev/og/posts/FwFSzlPlB.png og:image:alt: Beyond the Box: Building Violin, Split, and Raincloud Plots in CanvasXpress og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Beyond the Box: Building Violin, Split, and Raincloud Plots in CanvasXpress **[Dev Genius](https://daily.dev/sources/devgenius)** · 8 min read · 0 upvotes · 0 comments ## Summary A tutorial on building violin, split, and raincloud plots using the CanvasXpress JavaScript charting library. It covers the basic one-line violin plot, half violins via the violinSide flag, composing rainclouds by layering violin, boxplot, and jittered raw points, connecting paired data across conditions with connectBy, creating split violins for two-group comparisons in a single band, and faceting into small multiples with segregateSamplesBy and layoutTopology. Ends with a configuration cheat sheet summarizing all the flags. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I create a raincloud plot in CanvasXpress? Set graphType to Boxplot, enable showViolinBoxplot, set violinSide to a half like lt, then enable showBoxplotIfViolin and showBoxplotOriginalData with jitter true. CanvasXpress automatically partitions the band into ordered sub-slots for violin, boxplot, and points so they don't overlap, producing a density cloud, summary box, and raw observations in one chart. _Building distribution charts like rainclouds gets easier with implementation tips surfaced on daily.dev._ ### How do I make a split violin plot comparing two groups in CanvasXpress? Set violinSide to "split" while using groupingFactors with two levels, such as dose and supp. The two levels of the split factor render as mirrored halves within the same category band rather than as separate side-by-side violins, matching the seaborn split=True idiom. Adding showBoxplotIfViolin then draws one global boxplot computed from both levels' pooled raw values. _daily.dev surfaces practical configuration guides for developers comparing charting approaches._ ### How can I connect paired data points across conditions in a CanvasXpress violin plot? Use violinSide as an object keyed by group so each condition faces outward, such as {"Baseline": "lt", "Followup": "rb"}, then set connectBy to the subject annotation field so CanvasXpress draws lines linking each subject's paired points starting from the actual jittered points rather than the band center. connectByPointColor colors each connector line by its points. _Developers wiring up paired visualizations can find similar configuration walkthroughs on daily.dev._ ## Similar posts on daily.dev - [Building Interactive Charts in JavaScript: A Developer’s Guide](https://daily.dev/posts/building-interactive-charts-in-javascript-a-developer-s-guide-zv6j0ryl8) · SitePoint · 0 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#data-visualization](https://daily.dev/tags/data-visualization), [#statistics](https://daily.dev/tags/statistics) [View this post on daily.dev](https://daily.dev/posts/beyond-the-box-building-violin-split-and-raincloud-plots-in-canvasxpress-fwfszlplb) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Beyond the Box: Building Violin, Split, and Raincloud Plots in CanvasXpress","url":"https://daily.dev/posts/beyond-the-box-building-violin-split-and-raincloud-plots-in-canvasxpress-fwfszlplb","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/beyond-the-box-building-violin-split-and-raincloud-plots-in-canvasxpress-fwfszlplb"},"datePublished":"2026-09-01T21:22:48.864Z","dateModified":"2026-09-01T21:23:15.653Z","description":"A tutorial on building violin, split, and raincloud plots using the CanvasXpress JavaScript charting library. It covers the basic one-line violin plot, half...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2c0d4ce4e03dc533a8b95b8eb12220ec?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2c0d4ce4e03dc533a8b95b8eb12220ec?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Dev Genius","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Dev Genius","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/a79144d7517043e7803ed562e45a99df","url":"https://daily.dev/sources/devgenius"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/beyond-the-box-building-violin-split-and-raincloud-plots-in-canvasxpress-fwfszlplb","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,data-visualization,statistics","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Dev Genius","item":"https://daily.dev/sources/devgenius"},{"@type":"ListItem","position":3,"name":"Beyond the Box: Building Violin, Split, and Raincloud Plots in CanvasXpress"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/beyond-the-box-building-violin-split-and-raincloud-plots-in-canvasxpress-fwfszlplb#faq","mainEntity":[{"@type":"Question","name":"How do I create a raincloud plot in CanvasXpress?","acceptedAnswer":{"@type":"Answer","text":"Set graphType to Boxplot, enable showViolinBoxplot, set violinSide to a half like lt, then enable showBoxplotIfViolin and showBoxplotOriginalData with jitter true. CanvasXpress automatically partitions the band into ordered sub-slots for violin, boxplot, and points so they don't overlap, producing a density cloud, summary box, and raw observations in one chart. Building distribution charts like rainclouds gets easier with implementation tips surfaced on daily.dev."}},{"@type":"Question","name":"How do I make a split violin plot comparing two groups in CanvasXpress?","acceptedAnswer":{"@type":"Answer","text":"Set violinSide to \"split\" while using groupingFactors with two levels, such as dose and supp. The two levels of the split factor render as mirrored halves within the same category band rather than as separate side-by-side violins, matching the seaborn split=True idiom. Adding showBoxplotIfViolin then draws one global boxplot computed from both levels' pooled raw values. daily.dev surfaces practical configuration guides for developers comparing charting approaches."}},{"@type":"Question","name":"How can I connect paired data points across conditions in a CanvasXpress violin plot?","acceptedAnswer":{"@type":"Answer","text":"Use violinSide as an object keyed by group so each condition faces outward, such as {\"Baseline\": \"lt\", \"Followup\": \"rb\"}, then set connectBy to the subject annotation field so CanvasXpress draws lines linking each subject's paired points starting from the actual jittered points rather than the band center. connectByPointColor colors each connector line by its points. Developers wiring up paired visualizations can find similar configuration walkthroughs on daily.dev."}}]} ```