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" : [
          [5.1],[4.9],[4.7],[4.6],[5],[5.4],[4.6],[5],[4.4],[4.9],[5.4],[4.8],[4.8],[4.3],[5.8],[5.7],[5.4],[5.1],[5.7],[5.1],[5.4],[5.1],[4.6],[5.1],[4.8],[5],[5],[5.2],[5.2],[4.7],[4.8],[5.4],[5.2],[5.5],[4.9],[5],[5.5],[4.9],[4.4],[5.1],[5],[4.5],[4.4],[5],[5.1],[4.8],[5.1],[4.6],[5.3],[5],[7],[6.4],[6.9],[5.5],[6.5],[5.7],[6.3],[4.9],[6.6],[5.2],[5],[5.9],[6],[6.1],[5.6],[6.7],[5.6],[5.8],[6.2],[5.6],[5.9],[6.1],[6.3],[6.1],[6.4],[6.6],[6.8],[6.7],[6],[5.7],[5.5],[5.5],[5.8],[6],[5.4],[6],[6.7],[6.3],[5.6],[5.5],[5.5],[6.1],[5.8],[5],[5.6],[5.7],[5.7],[6.2],[5.1],[5.7],[6.3],[5.8],[7.1],[6.3],[6.5],[7.6],[4.9],[7.3],[6.7],[7.2],[6.5],[6.4],[6.8],[5.7],[5.8],[6.4],[6.5],[7.7],[7.7],[6],[6.9],[5.6],[7.7],[6.3],[6.7],[7.2],[6.2],[6.1],[6.4],[7.2],[7.4],[7.9],[6.4],[6.3],[6.1],[7.7],[6.3],[6.4],[6],[6.9],[6.7],[6.9],[5.8],[6.8],[6.7],[6.7],[6.3],[6.5],[6.2],[5.9]
        ],
        "smps" : ["Sepal.Length"],
        "vars" : ["s1","s2","s3","s4","s5","s6","s7","s8","s9","s10","s11","s12","s13","s14","s15","s16","s17","s18","s19","s20","s21","s22","s23","s24","s25","s26","s27","s28","s29","s30","s31","s32","s33","s34","s35","s36","s37","s38","s39","s40","s41","s42","s43","s44","s45","s46","s47","s48","s49","s50","s51","s52","s53","s54","s55","s56","s57","s58","s59","s60","s61","s62","s63","s64","s65","s66","s67","s68","s69","s70","s71","s72","s73","s74","s75","s76","s77","s78","s79","s80","s81","s82","s83","s84","s85","s86","s87","s88","s89","s90","s91","s92","s93","s94","s95","s96","s97","s98","s99","s100","s101","s102","s103","s104","s105","s106","s107","s108","s109","s110","s111","s112","s113","s114","s115","s116","s117","s118","s119","s120","s121","s122","s123","s124","s125","s126","s127","s128","s129","s130","s131","s132","s133","s134","s135","s136","s137","s138","s139","s140","s141","s142","s143","s144","s145","s146","s147","s148","s149","s150"]
     },
     "z" : {
        "Species" : ["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "colorBy":"Species",
     "graphType":"Scatter2D",
     "hideHistogram":"true",
     "histogramBins":"20",
     "ridgeBy":"Species",
     "ridgelineScale":1.5,
     "showFilledHistogramDensity":"true",
     "showHistogramDensity":"true",
     "xAxisRugShow":"true"
  }
  

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


</script>