Stacked Percent Bars Comparison Chart

Stacked percent bar graphs are a type of chart that shows the proportion of different categories as parts of a whole. Each bar is divided into segments representing percentages, with all bars scaled to 100%. This makes it easy to compare relative contributions of categories across different groups or time periods.

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

<html>

  <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>

      // Use a data frame (2D-array) for the graph
      var data = [
        [ "Id", "Pants on Fire", "False", "Mostly False", "Half True", "Mostly True", "True"],
        [ "Big Fat Liar", -35, -25, -15, 10, 10, 5],
        [ "Two-Faced", -20, -20, -10, 10, 20, 20],
        [ "Honest Abe", -5, -10, -10, 15, 25, 35 ]
      ];

      // Create the configuration for the graph
      var config = {
         "axisAlgorithm" : "wilkinson",
         "colorScheme" : "CanvasXpress",
         "graphOrientation" : "horizontal",
         "graphType" : "StackedPercent",
         "legendColumns" : 3,
         "legendKeyBackgroundBorderColor" : "rgba(255,255,255,0)",
         "legendKeyBackgroundColor" : "rgba(255,255,255,0)",
         "legendPosition" : "bottom",
         "marginRight" : 20,
         "showDataValues" : true,
         "title" : "Diverging Stacked Percent Graph",
         "xAxisTickFormat" : "%s%%",
         "xAxis" : ["Pants on Fire","False","Mostly False","Half True","Mostly True","True"]
      }

      // Event used to create graph (optional)
      var events = false


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

      
    </script>

  </body>

</html>

<html>

  <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" : [
              [-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" : "StackedPercent",
         "legendColumns" : 3,
         "legendKeyBackgroundBorderColor" : "rgba(255,255,255,0)",
         "legendKeyBackgroundColor" : "rgba(255,255,255,0)",
         "legendPosition" : "bottom",
         "marginRight" : 20,
         "showDataValues" : true,
         "title" : "Diverging Stacked Percent Graph",
         "xAxisTickFormat" : "%s%%",
         "xAxis" : ["Pants on Fire","False","Mostly False","Half True","Mostly True","True"]
      }

      // Event used to create graph (optional)
      var events = false


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

      
    </script>

  </body>

</html>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/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="StackedPercent",
  legendColumns=3,
  legendKeyBackgroundBorderColor="rgba(255,255,255,0)",
  legendKeyBackgroundColor="rgba(255,255,255,0)",
  legendPosition="bottom",
  marginRight=20,
  showDataValues=TRUE,
  title="Diverging Stacked Percent Graph",
  xAxis=list("Pants on Fire", "False", "Mostly False", "Half True", "Mostly True", "True"),
  xAxisTickFormat="%s%%"
)