Area Chart

An area chart is really similar to a line chart, except that the area between the x axis and the line is filled in with color or shading. It represents the evolution of a numeric variable.


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" : [
          [2000,1553],[2001,1733],[2002,2004],[2003,2432],[2004,2935],[2005,3266],[2000,3704],[2006,3833],[2001,4136],[2001,4645],[2008,4663],[2000,4704],[2002,4771],[2007,4985],[2009,5645],[2003,5668],[2002,5921],[2001,5990],[2000,6160],[2001,6555],[2000,6565],[2011,6607],[2010,6810],[2004,6840],[2002,7146],[2012,7353],[2013,7541],[2002,7912],[2003,7979],[2014,8283],[2005,8522],[2015,8948],[2003,8955],[2005,9073],[2008,9513],[2003,9557],[2005,9679],[2004,9833],[2016,9886],[2004,10027],[2006,10344],[2006,10394],[2005,10949],[2009,11193],[2010,11199],[2004,11385],[2015,11594],[2011,11619],[2008,11630],[2016,11729],[2017,11769],[2011,11900],[2010,11934],[2015,12009],[2006,12040],[2016,12160],[2018,12182],[2012,12190],[2007,12302],[2009,12425],[2014,12461],[2016,12593],[2012,12665],[2020,12700],[2014,12799],[2008,12907],[2019,13264],[2013,13269],[2006,13296],[2018,13331],[2009,13369],[2012,13384],[2011,13428],[2018,13470],[2010,13526],[2017,13845],[2013,13846],[2015,13978],[2007,14010],[2014,14017],[2019,14063],[2019,14082],[2013,14098],[2021,14225],[2007,14281],[2017,14501],[2007,14524],[2017,14637],[2018,14681],[2019,15356],[2020,15676],[2021,16159],[2021,16261],[2020,16282],[2001,16324],[2020,17390],[2021,17489],[2008,17723],[2002,17765],[2000,19404],[2005,19476],[2006,19686],[2003,19816],[2009,19986],[2004,20131],[2007,20152],[2014,21004],[2015,21519],[2016,22364],[2013,23122],[2009,23743],[2017,23854],[2018,24075],[2008,24129],[2019,25303],[2010,25493],[2021,25692],[2012,27161],[2020,27261],[2010,28640],[2011,29718],[2011,30920],[2001,31736],[2000,32331],[2012,34611],[2002,38045],[2013,40826],[2000,43423],[2014,44887],[2001,45043],[2002,45185],[2015,46535],[2003,48382],[2003,50231],[2016,52028],[2004,57066],[2004,57202],[2005,58751],[2008,59478],[2009,61171],[2017,62361],[2005,62634],[2010,64661],[2011,65788],[2018,65943],[2006,66897],[2007,68235],[2019,70211],[2012,70808],[2006,70942],[2020,73940],[2008,76574],[2013,79226],[2007,84883],[2014,85106],[2021,85107],[2009,85453],[2015,87959],[2010,89622],[2011,90981],[2016,93094],[2015,95156],[2016,97837],[2012,98580],[2014,99197],[2017,101817],[2018,102376],[2013,103366],[2018,113005],[2019,114896],[2017,114962],[2019,121405],[2020,126300],[2020,132568],[2021,142841],[2021,145793]
        ],
        "smps" : ["year","total_wealth"],
        "vars" : ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100","101","102","103","104","105","106","107","108","109","110","111","112","113","114","115","116","117","118","119","120","121","122","123","124","125","126","127","128","129","130","131","132","133","134","135","136","137","138","139","140","141","142","143","144","145","146","147","148","149","150","151","152","153","154","155","156","157","158","159","160","161","162","163","164","165","166","167","168","169","170","171","172","173","174","175","176"]
     },
     "z" : {
        "country" : ["India","India","India","India","India","India","China","India","China","France","India","France","China","India","India","China","France","Germany","Germany","United Kingdom","United Kingdom","India","India","China","Germany","India","India","United Kingdom","France","India","China","India","Germany","Germany","United Kingdom","United Kingdom","France","France","India","Germany","Germany","China","United Kingdom","United Kingdom","United Kingdom","United Kingdom","France","United Kingdom","Germany","France","India","Germany","Germany","Germany","France","Germany","India","United Kingdom","Germany","Germany","France","United Kingdom","Germany","India","Germany","France","India","United Kingdom","United Kingdom","United Kingdom","France","France","France","France","France","France","Germany","United Kingdom","China","United Kingdom","France","United Kingdom","France","India","France","United Kingdom","United Kingdom","Germany","Germany","Germany","United Kingdom","France","United Kingdom","France","Japan","Germany","Germany","China","Japan","Japan","Japan","Japan","Japan","China","Japan","Japan","Japan","Japan","Japan","Japan","Japan","Japan","Japan","Japan","Japan","China","Japan","Japan","Japan","Japan","Japan","China","Other","Other","China","Other","China","United States","China","United States","United States","China","Other","United States","China","United States","Other","Other","United States","United States","China","United States","United States","United States","China","United States","United States","China","United States","Other","China","Other","United States","Other","United States","China","Other","United States","Other","Other","United States","Other","Other","Other","Other","United States","United States","Other","Other","United States","Other","Other","United States","Other","Other","United States"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "backgroundType":"panel",
     "colorBy":"country",
     "colors":[
        "rgb(0,63,92)",
        "rgb(47,75,124)",
        "rgb(102,81,145)",
        "rgb(160,81,149)",
        "rgb(212,80,135)",
        "rgb(249,93,106)",
        "rgb(255,124,67)",
        "rgb(255,166,0)"
     ],
     "dataPointSizeScaleFactor":"0",
     "graphType":"Scatter2D",
     "legendColumns":"4",
     "legendPosition":"bottom",
     "panelBackgroundColor":"rgb(222,222,222)",
     "scatterType":"area",
     "xAxisGridMinorShow":"false",
     "yAxisGridMinorShow":"false"
  }
  

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


</script>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-fontana-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
z=read.table("https://www.canvasxpress.org/data/cX-fontana-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  varAnnot=z,
  backgroundType="panel",
  colorBy="country",
  colors=list("rgb(0,63,92)", "rgb(47,75,124)", "rgb(102,81,145)", "rgb(160,81,149)", "rgb(212,80,135)", "rgb(249,93,106)", "rgb(255,124,67)", "rgb(255,166,0)"),
  dataPointSizeScaleFactor=0,
  graphType="Scatter2D",
  legendColumns=4,
  legendPosition="bottom",
  panelBackgroundColor="rgb(222,222,222)",
  scatterType="area",
  xAxisGridMinorShow=FALSE,
  yAxisGridMinorShow=FALSE
)