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



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" : [
          [24],[23],[23],[17],[29],[33],[30],[25],[9],[11],[28],[24],[33],[40],[29],[19],[5],[11],[22],[28],[25],[22],[28],[30],[26],[29],[33],[41],[41],[39],[35],[31],[27],[17],[18],[28],[24],[36],[31],[26],[37],[32],[23],[19],[35],[36],[41],[41],[48],[52],[42],[40],[35],[36],[35],[31],[39],[50],[44],[34],[32],[39],[38],[45],[45],[56],[55],[45],[43],[46],[50],[46],[55],[53],[45],[40],[37],[31],[30],[33],[55],[58],[40],[30],[38],[31],[37],[45],[50],[47],[39],[35],[48],[60],[49],[56],[52],[45],[42],[46],[51],[40],[50],[60],[61],[63],[52],[44],[46],[46],[49],[57],[51],[63],[63],[57],[53],[44],[43],[44],[43],[46],[45],[52],[56],[58],[66],[62],[62],[58],[64],[56],[55],[50],[45],[45],[47],[53],[53],[57],[55],[62],[69],[67],[66],[69],[66],[65],[66],[67],[70],[64],[70],[67],[72],[65],[67],[66],[63],[75],[80],[81],[81],[81],[75],[73],[78],[82],[81],[75],[80],[73],[80],[72],[69],[78],[73],[71],[75],[71],[72],[72],[64],[59],[64],[72],[78],[76],[73],[70],[79],[83],[75],[71],[75],[74],[67],[71],[75],[77],[80],[81],[81],[85],[81],[75],[73],[74],[74],[70],[70],[72],[77],[79],[77],[78],[72],[68],[70],[69],[69],[77],[81],[80],[72],[71],[72],[73],[77],[77],[78],[67],[63],[64],[76],[75],[66],[66],[62],[71],[75],[73],[71],[70],[66],[66],[68],[72],[77],[67],[73],[69],[64],[60],[68],[60],[56],[54],[68],[63],[62],[69],[67],[72],[75],[65],[76],[66],[54],[56],[62],[56],[52],[53],[58],[63],[67],[55],[54],[43],[46],[55],[57],[62],[49],[37],[44],[58],[61],[57],[61],[54],[49],[44],[48],[55],[51],[46],[58],[59],[61],[67],[53],[48],[63],[53],[53],[53],[53],[51],[56],[50],[45],[45],[52],[41],[41],[52],[48],[50],[51],[40],[27],[25],[36],[32],[39],[35],[33],[37],[39],[37],[42],[34],[29],[33],[29],[29],[36],[38],[24],[16],[10],[9],[22],[15],[27],[12],[13],[18],[16],[-6],[-1],[16],[34],[34],[29],[29],[24],[37],[29],[29],[36],[30],[38],[30]
        ],
        "smps" : ["Temperature"],
        "vars" : ["1/1/16","1/2/16","1/3/16","1/4/16","1/5/16","1/6/16","1/7/16","1/8/16","1/9/16","1/10/16","1/11/16","1/12/16","1/13/16","1/14/16","1/15/16","1/16/16","1/17/16","1/18/16","1/19/16","1/20/16","1/21/16","1/22/16","1/23/16","1/24/16","1/25/16","1/26/16","1/27/16","1/28/16","1/29/16","1/30/16","1/31/16","2/1/16","2/2/16","2/3/16","2/4/16","2/5/16","2/6/16","2/7/16","2/8/16","2/9/16","2/10/16","2/11/16","2/12/16","2/13/16","2/14/16","2/15/16","2/16/16","2/17/16","2/18/16","2/19/16","2/20/16","2/21/16","2/22/16","2/23/16","2/24/16","2/25/16","2/26/16","2/27/16","2/28/16","2/29/16","3/1/16","3/2/16","3/3/16","3/4/16","3/5/16","3/6/16","3/7/16","3/8/16","3/9/16","3/10/16","3/11/16","3/12/16","3/13/16","3/14/16","3/15/16","3/16/16","3/17/16","3/18/16","3/19/16","3/20/16","3/21/16","3/22/16","3/23/16","3/24/16","3/25/16","3/26/16","3/27/16","3/28/16","3/29/16","3/30/16","3/31/16","4/1/16","4/2/16","4/3/16","4/4/16","4/5/16","4/6/16","4/7/16","4/8/16","4/9/16","4/10/16","4/11/16","4/12/16","4/13/16","4/14/16","4/15/16","4/16/16","4/17/16","4/18/16","4/19/16","4/20/16","4/21/16","4/22/16","4/23/16","4/24/16","4/25/16","4/26/16","4/27/16","4/28/16","4/29/16","4/30/16","5/1/16","5/2/16","5/3/16","5/4/16","5/5/16","5/6/16","5/7/16","5/8/16","5/9/16","5/10/16","5/11/16","5/12/16","5/13/16","5/14/16","5/15/16","5/16/16","5/17/16","5/18/16","5/19/16","5/20/16","5/21/16","5/22/16","5/23/16","5/24/16","5/25/16","5/26/16","5/27/16","5/28/16","5/29/16","5/30/16","5/31/16","6/1/16","6/2/16","6/3/16","6/4/16","6/5/16","6/6/16","6/7/16","6/8/16","6/9/16","6/10/16","6/11/16","6/12/16","6/13/16","6/14/16","6/15/16","6/16/16","6/17/16","6/18/16","6/19/16","6/20/16","6/21/16","6/22/16","6/23/16","6/24/16","6/25/16","6/26/16","6/27/16","6/28/16","6/29/16","6/30/16","7/1/16","7/2/16","7/3/16","7/4/16","7/5/16","7/6/16","7/7/16","7/8/16","7/9/16","7/10/16","7/11/16","7/12/16","7/13/16","7/14/16","7/15/16","7/16/16","7/17/16","7/18/16","7/19/16","7/20/16","7/21/16","7/22/16","7/23/16","7/24/16","7/25/16","7/26/16","7/27/16","7/28/16","7/29/16","7/30/16","7/31/16","8/1/16","8/2/16","8/3/16","8/4/16","8/5/16","8/6/16","8/7/16","8/8/16","8/9/16","8/10/16","8/11/16","8/12/16","8/13/16","8/14/16","8/15/16","8/16/16","8/17/16","8/18/16","8/19/16","8/20/16","8/21/16","8/22/16","8/23/16","8/24/16","8/25/16","8/26/16","8/27/16","8/28/16","8/29/16","8/30/16","8/31/16","9/1/16","9/2/16","9/3/16","9/4/16","9/5/16","9/6/16","9/7/16","9/8/16","9/9/16","9/10/16","9/11/16","9/12/16","9/13/16","9/14/16","9/15/16","9/16/16","9/17/16","9/18/16","9/19/16","9/20/16","9/21/16","9/22/16","9/23/16","9/24/16","9/25/16","9/26/16","9/27/16","9/28/16","9/29/16","9/30/16","10/1/16","10/2/16","10/3/16","10/4/16","10/5/16","10/6/16","10/7/16","10/8/16","10/9/16","10/10/16","10/11/16","10/12/16","10/13/16","10/14/16","10/15/16","10/16/16","10/17/16","10/18/16","10/19/16","10/20/16","10/21/16","10/22/16","10/23/16","10/24/16","10/25/16","10/26/16","10/27/16","10/28/16","10/29/16","10/30/16","10/31/16","11/1/16","11/2/16","11/3/16","11/4/16","11/5/16","11/6/16","11/7/16","11/8/16","11/9/16","11/10/16","11/11/16","11/12/16","11/13/16","11/14/16","11/15/16","11/16/16","11/17/16","11/18/16","11/19/16","11/20/16","11/21/16","11/22/16","11/23/16","11/24/16","11/25/16","11/26/16","11/27/16","11/28/16","11/29/16","11/30/16","12/1/16","12/2/16","12/3/16","12/4/16","12/5/16","12/6/16","12/7/16","12/8/16","12/9/16","12/10/16","12/11/16","12/12/16","12/13/16","12/14/16","12/15/16","12/16/16","12/17/16","12/18/16","12/19/16","12/20/16","12/21/16","12/22/16","12/23/16","12/24/16","12/25/16","12/26/16","12/27/16","12/28/16","12/29/16","12/30/16","12/31/16"]
     },
     "z" : {
        "Month" : ["January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","January","February","February","February","February","February","February","February","February","February","February","February","February","February","February","February","February","February","February","February","February","February","February","February","February","February","February","February","February","February","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","March","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","April","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","May","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","June","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","July","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","August","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","September","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","October","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","November","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December","December"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "colorBy":"data",
     "graphType":"Scatter2D",
     "hideHistogram":"true",
     "histogramBins":"20",
     "ridgeBy":"Month",
     "ridgelineScale":2.5,
     "showFilledHistogramDensity":"true",
     "showHistogramDensity":"true"
  }
  

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


</script>