Ridgeline plots (formerly called Joy Plots) display the distribution of a numeric variable for multiple groups as a series of partially overlapping density curves arranged vertically. They create an elegant mountain-range visual that makes it easy to compare distribution shapes, centers, and spreads across many groups simultaneously.

Subtype

▾

Live Preview

temp	month
4	Jan
6	Jan
3	Jan
7	Jan
5	Jan
6	Feb
8	Feb
5	Feb
10	Feb
7	Feb

{
  "title": {
    "text": "Daily High Temperature by Month (°C)"
  },
  "data": [
    {
      "month": "Jan",
      "temp": 4
    },
    {
      "month": "Jan",
      "temp": 6
    },
    {
      "month": "Jan",
      "temp": 3
    },
    {
      "month": "Jan",
      "temp": 7
    },
    {
      "month": "Jan",
      "temp": 5
    },
    {
      "month": "Feb",
      "temp": 6
    },
    {
      "month": "Feb",
      "temp": 8
    },
    {
      "month": "Feb",
      "temp": 5
    },
    {
      "month": "Feb",
      "temp": 10
    },
    {
      "month": "Feb",
      "temp": 7
    },
    {
      "month": "Mar",
      "temp": 12
    },
    {
      "month": "Mar",
      "temp": 14
    },
    {
      "month": "Mar",
      "temp": 10
    },
    {
      "month": "Mar",
      "temp": 16
    },
    {
      "month": "Mar",
      "temp": 13
    },
    {
      "month": "Apr",
      "temp": 17
    },
    {
      "month": "Apr",
      "temp": 20
    },
    {
      "month": "Apr",
      "temp": 15
    },
    {
      "month": "Apr",
      "temp": 22
    },
    {
      "month": "Apr",
      "temp": 18
    },
    {
      "month": "May",
      "temp": 22
    },
    {
      "month": "May",
      "temp": 25
    },
    {
      "month": "May",
      "temp": 20
    },
    {
      "month": "May",
      "temp": 27
    },
    {
      "month": "May",
      "temp": 23
    },
    {
      "month": "Jun",
      "temp": 27
    },
    {
      "month": "Jun",
      "temp": 30
    },
    {
      "month": "Jun",
      "temp": 25
    },
    {
      "month": "Jun",
      "temp": 32
    },
    {
      "month": "Jun",
      "temp": 28
    },
    {
      "month": "Jul",
      "temp": 30
    },
    {
      "month": "Jul",
      "temp": 33
    },
    {
      "month": "Jul",
      "temp": 28
    },
    {
      "month": "Jul",
      "temp": 35
    },
    {
      "month": "Jul",
      "temp": 31
    },
    {
      "month": "Aug",
      "temp": 29
    },
    {
      "month": "Aug",
      "temp": 32
    },
    {
      "month": "Aug",
      "temp": 27
    },
    {
      "month": "Aug",
      "temp": 34
    },
    {
      "month": "Aug",
      "temp": 30
    },
    {
      "month": "Sep",
      "temp": 24
    },
    {
      "month": "Sep",
      "temp": 27
    },
    {
      "month": "Sep",
      "temp": 22
    },
    {
      "month": "Sep",
      "temp": 29
    },
    {
      "month": "Sep",
      "temp": 25
    },
    {
      "month": "Oct",
      "temp": 18
    },
    {
      "month": "Oct",
      "temp": 21
    },
    {
      "month": "Oct",
      "temp": 16
    },
    {
      "month": "Oct",
      "temp": 23
    },
    {
      "month": "Oct",
      "temp": 19
    },
    {
      "month": "Nov",
      "temp": 11
    },
    {
      "month": "Nov",
      "temp": 13
    },
    {
      "month": "Nov",
      "temp": 9
    },
    {
      "month": "Nov",
      "temp": 15
    },
    {
      "month": "Nov",
      "temp": 12
    },
    {
      "month": "Dec",
      "temp": 5
    },
    {
      "month": "Dec",
      "temp": 7
    },
    {
      "month": "Dec",
      "temp": 4
    },
    {
      "month": "Dec",
      "temp": 9
    },
    {
      "month": "Dec",
      "temp": 6
    }
  ],
  "series": [
    {
      "type": "ridgeline",
      "xKey": "temp",
      "categoryKey": "month",
      "overlap": 0.5,
      "fill": "#6366f1",
      "fillOpacity": 0.7,
      "stroke": "#4f46e5",
      "strokeWidth": 1
    }
  ],
  "axes": [
    {
      "position": "bottom",
      "title": {
        "text": "Temperature (°C)"
      }
    },
    {
      "position": "left"
    }
  ]
}

Edit JSON above · auto-previews after 0.9 s

Daily temperature readings for each month of the year arranged as stacked density curves showing seasonal shifts.

PreviousBoxPlot Charts Next Beeswarm Plots

Was this article helpful?