For each x value, geom_ribbon() displays a y interval defined by ymin and ymax. geom_area() is a special case of geom_ribbon(), where the ymin is fixed to 0 and y is used instead of ymax.

 "mapping" = null,
 "data" = null,
 "stat" = "identity",
 "position" = "identity",
 "na.rm" = false,
 "orientation" = NA,
 "show.legend" = NA,
 "inherit.aes" = true,
 "outline.type" = "both"

 "mapping" = null,
 "data" = null,
 "stat" = "identity",
 "position" = "stack",
 "na.rm" = false,
 "orientation" = NA,
 "show.legend" = NA,
 "inherit.aes" = true,
 "outline.type" = "upper"



Set of aesthetic mappings created by aes() or aes_(). If specified and inherit.aes = TRUE (the default), it is combined with the default mapping at the top level of the plot. You must supply mapping if there is no plot mapping.


The data to be displayed in this layer. There are three options:

If NULL, the default, the data is inherited from the plot data as specified in the call to cxplot().

A data.frame, or other object, will override the plot data. All objects will be fortified to produce a data frame. See fortify() for which variables will be created.

A function will be called with a single argument, the plot data. The return value must be a data.frame, and will be used as the layer data. A function can be created from a formula (e.g. ~ head(.x, 10)).


The statistical transformation to use on the data for this layer, as a string.


Position adjustment, either as a string, or the result of a call to a position adjustment function.


Other arguments passed on to layer(). These are often aesthetics, used to set an aesthetic to a fixed value, like color = "red" or size = 3. They may also be parameters to the paired geom/stat.


If FALSE, the default, missing values are removed with a warning. If TRUE, missing values are silently removed.


The orientation of the layer. The default (NA) automatically determines the orientation from the aesthetic mapping. In the rare event that this fails it can be given explicitly by setting orientation to either "x" or "y". See the Orientation section for more detail.


logical. Should this layer be included in the legends? NA, the default, includes if any aesthetics are mapped. FALSE never includes, and TRUE always includes. It can also be a named logical vector to finely select the aesthetics to display.


If FALSE, overrides the default aesthetics, rather than combining with them. This is most useful for helper functions that define both data and aesthetics and shouldn't inherit behaviour from the default plot specification, e.g. borders().


Type of the outline of the area; "both" draws both the upper and lower lines, "upper"/"lower" draws the respective lines only. "full" draws a closed polygon around the area.


An area plot is the continuous analogue of a stacked bar chart (see geom_bar()), and can be used to show how composition of the whole varies over the range of x. Choosing the order in which different components is stacked is very important, as it becomes increasing hard to see the individual pattern as you move up the stack. See position_stack() for the details of stacking algorithm.


This geom treats each axis differently and, thus, can thus have two orientations. Often the orientation is easy to deduce from a combination of the given mappings and the types of positional scales in use. Thus, cxplot2 will by default try to guess which orientation the layer should have. Under rare circumstances, the orientation is ambiguous and guessing may fail. In that case the orientation can be specified directly using the orientation parameter, which can be either "x" or "y". The value gives the axis that the geom should run along, "x" being the default orientation you would expect for the geom.


geom_ribbon() understands the following aesthetics (required aesthetics are in bold):

x or y

ymin or xmin

ymax or xmax







Learn more about setting these aesthetics in vignette("cxplot2-specs").


var cxp = new cxplot("canvas1", huron, aes("year"));
  "ymax": [580.38,581.86,580.97,580.8,579.79,580.39,580.42,580.82,581.4,581.32,581.44,581.68,581.17,580.53,580.01,579.91,579.14,579.16,579.55,579.67,578.44,578.24,579.1,579.09,579.35,578.82,579.32,579.01,579,579.8,579.83,579.72,579.89,580.01,579.37,578.69,578.19,578.67,579.55,578.92,578.09,579.37,580.13,580.14,579.51,579.24,578.66,578.86,578.05,577.79,576.75,576.75,577.82,578.64,580.58,579.48,577.38,576.9,576.94,576.24,576.84,576.85,576.9,577.79,578.18,577.51,577.23,578.42,579.61,579.05,579.26,579.22,579.38,579.1,577.95,578.12,579.75,580.85,580.41,579.96,579.61,578.76,578.18,577.21,577.13,579.1,578.25,577.91,576.89,575.96,576.8,577.68,578.38,578.52,579.74,579.31,579.89,579.96],
  "ymin": [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  "y": "level"
// A simple example var cxp = new cxplot("canvas2", economics, aes("Date", "unemploy")); cxp.geom_line(); cxp.geom_ribbon(aes({"ymin": "ulow", "ymax": "uhigh"}), {"fill": "blue"});
// Add aesthetic mappings var cxp = new cxplot("canvas3", huron, aes({"x": "year","y": "level"})); cxp.geom_ribbon({ "ymax": [581.38,582.86,581.97,581.8,580.79,581.39,581.42,581.82,582.4,582.32,582.44,582.68,582.17,581.53,581.01,580.91,580.14,580.16,580.55,580.67,579.44,579.24,580.1,580.09,580.35,579.82,580.32,580.01,580,580.8,580.83,580.72,580.89,581.01,580.37,579.69,579.19,579.67,580.55,579.92,579.09,580.37,581.13,581.14,580.51,580.24,579.66,579.86,579.05,578.79,577.75,577.75,578.82,579.64,581.58,580.48,578.38,577.9,577.94,577.24,577.84,577.85,577.9,578.79,579.18,578.51,578.23,579.42,580.61,580.05,580.26,580.22,580.38,580.1,578.95,579.12,580.75,581.85,581.41,580.96,580.61,579.76,579.18,578.21,578.13,580.1,579.25,578.91,577.89,576.96,577.8,578.68,579.38,579.52,580.74,580.31,580.89,580.96], "ymin": [579.38,580.86,579.97,579.8,578.79,579.39,579.42,579.82,580.4,580.32,580.44,580.68,580.17,579.53,579.01,578.91,578.14,578.16,578.55,578.67,577.44,577.24,578.1,578.09,578.35,577.82,578.32,578.01,578,578.8,578.83,578.72,578.89,579.01,578.37,577.69,577.19,577.67,578.55,577.92,577.09,578.37,579.13,579.14,578.51,578.24,577.66,577.86,577.05,576.79,575.75,575.75,576.82,577.64,579.58,578.48,576.38,575.9,575.94,575.24,575.84,575.85,575.9,576.79,577.18,576.51,576.23,577.42,578.61,578.05,578.26,578.22,578.38,578.1,576.95,577.12,578.75,579.85,579.41,578.96,578.61,577.76,577.18,576.21,576.13,578.1,577.25,576.91,575.89,574.96,575.8,576.68,577.38,577.52,578.74,578.31,578.89,578.96], "fill": "grey70" }); cxp.geom_line({"y":"level"});
var df = [ ["g","x","y"], ["a","1","2"], ["a","3","5"], ["a","5","1"], ["b","2","3"], ["b","4","6"], ["b","6","7"] ]; var cxp = new cxplot("canvas4", df, aes({"x": "x", "y": "y", "fill": "g"})); cxp.geom_area();