Stacked Chart

A barplot shows the relationship between a numeric and a categoric variable. Each entity of the categoric variable is represented as a bar. The size of the bar represents its numeric value. Barplot is sometimes described as a boring way to visualize information. However it is probably the most efficient way to show this kind of data. Ordering bars and providing good annotation are often necessary.


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" : [
          [-35,-20,-5],
          [-25,-20,-10],
          [-15,-10,-10],
          [10,10,15],
          [10,20,25],
          [5,20,35]
        ],
        "smps" : ["Big Fat Liar","Two-Faced","Honest Abe"],
        "vars" : ["Pants on Fire","False","Mostly False","Half True","Mostly True","True"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "axisAlgorithm":"wilkinson",
     "colorScheme":"CanvasXpress",
     "graphOrientation":"horizontal",
     "graphType":"Stacked",
     "legendColumns":"3",
     "legendKeyBackgroundBorderColor":"rgba(255,255,255,0)",
     "legendKeyBackgroundColor":"rgba(255,255,255,0)",
     "legendPosition":"bottom",
     "marginRight":"20",
     "showDataValues":"true",
     "title":"Diverging Stacked Graph",
     "xAxisTickFormat":"%s%%"
  }
  

  <!-- 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-diverging-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  axisAlgorithm="wilkinson",
  colorScheme="CanvasXpress",
  graphOrientation="horizontal",
  graphType="Stacked",
  legendColumns=3,
  legendKeyBackgroundBorderColor="rgba(255,255,255,0)",
  legendKeyBackgroundColor="rgba(255,255,255,0)",
  legendPosition="bottom",
  marginRight=20,
  showDataValues=TRUE,
  title="Diverging Stacked Graph",
  xAxisTickFormat="%s%%"
)