Area Chart

Area graphs visually represent changes in one or more variables over time, comparing total values across categories and highlighting contributions to the overall value. They effectively show trends, making patterns easier to grasp, and are ideal for emphasizing overall trends rather than individual data points. By using color and shading, they help differentiate categories and convey complex information in a clear, appealing way

You can organize the data for different series in separate rows or in a long and narrow format, adding a metadata column to identify each series


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" : [
            [10,11,13,4,18,21],
            [5,6,10,12,15,10],
            [2,3,6,4,8,6]
          ],
          "smps" : ["Jan","Feb","Mar","Apr","May","Jun"],
          "vars" : ["Series A","Series B","Series C"]
       }
    }
    
    
    // Create the configuration for the graph
    var config = {
       "areaType":"percent",
       "colorScheme":"Prism",
       "graphOrientation":"vertical",
       "graphType":"Area",
       "lineType":"spline",
       "smpTextRotate":"90",
       "smpTitle":"Month / First Quarters of 2024",
       "title":"Area graph with three data series in percentage",
       "titleScaleFontFactor":1.2,
       "xAxis":[
          "Series A",
          "Series B",
          "Series C"
       ],
       "xAxisTitle":"Percent of Revenue (in Millions)"
    }
    

    // Call the CanvasXpress function to create the graph
    var cX = new CanvasXpress("canvasId", data, config);


  </script>

</body>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-area6-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  areaType="percent",
  colorScheme="Prism",
  graphOrientation="vertical",
  graphType="Area",
  lineType="spline",
  smpTextRotate=90,
  smpTitle="Month / First Quarters of 2024",
  title="Area graph with three data series in percentage",
  titleScaleFontFactor=1.2,
  xAxis=list("Series A", "Series B", "Series C"),
  xAxisTitle="Percent of Revenue (in Millions)"
)