Likert Plot: Diverging Bar Graphs

Stacked bar graphs are a type of bar chart that visually represent data by stacking different components of a dataset on top of one another within a single bar. Each segment of the bar represents a category or portion of the total, making it easy to compare both the overall totals and the individual parts across multiple groups.

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa

HTML / JS
R Code

<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" : "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%%",
         "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="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",
  xAxis=list("Pants on Fire", "False", "Mostly False", "Half True", "Mostly True", "True"),
  xAxisTickFormat="%s%%"
)