Ridge-Line Chart

A Ridgeline plot (sometimes called Joyplot) shows the distribution of a numerical value for several groups. Distribution can be represented using histograms or density plots, all aligned to the same horizontal scale and presented with a slight overlap. It is especially useful when the number of group to represent is high, and thus a classic window separation would take to much space.


Example Color Themes

Example Fonts

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa


Show Code

Tools

<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>


<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
  <canvas id="canvasId" width="600" height="600"</canvas>
</div>


<!-- Create a script to initialize the chart -->
<script>

  <!-- Create the data for the graph -->
  var data = {
     "y" : {
        "data" : [
          [10,8.04],
          [8,6.95],
          [13,7.58],
          [9,8.81],
          [11,8.33],
          [14,9.96],
          [6,7.24],
          [4,4.26],
          [12,10.84],
          [7,4.82],
          [5,5.68],
          [10,9.14],
          [8,8.14],
          [13,8.74],
          [9,8.77],
          [11,9.26],
          [14,8.1],
          [6,6.13],
          [4,3.1],
          [12,9.13],
          [7,7.26],
          [5,4.74],
          [10,7.46],
          [8,6.77],
          [13,12.74],
          [9,7.11],
          [11,7.81],
          [14,8.84],
          [6,6.08],
          [4,5.39],
          [12,8.15],
          [7,6.42],
          [5,5.73],
          [8,6.58],
          [8,5.76],
          [8,7.71],
          [8,8.84],
          [8,8.47],
          [8,7.04],
          [8,5.25],
          [19,12.5],
          [8,5.56],
          [8,7.91],
          [8,6.89]
        ],
        "smps" : ["x","y"],
        "vars" : ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43"]
     },
     "z" : {
        "dataset" : ["I","I","I","I","I","I","I","I","I","I","I","II","II","II","II","II","II","II","II","II","II","II","III","III","III","III","III","III","III","III","III","III","III","IV","IV","IV","IV","IV","IV","IV","IV","IV","IV","IV"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "graphType":"Scatter2D",
     "hideHistogram":"true",
     "legendKeyBackgroundBorderColor":"rgba(255,255,255,0)",
     "legendKeyBackgroundColor":"rgba(255,255,255,0)",
     "ridgeBy":"dataset",
     "showFilledHistogramDensity":"true",
     "showHistogramDensity":"true"
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


</script>
⇧