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

<head>
  <!-- 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/dist/canvasXpress.min.js"></script>
</head>

<body>

  <!-- 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>

</body>