Master Stacked Bar Graphs for Effective Data Visualization

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 = {
         "x" : {
            "Factor1" : ["Lev : 1","Lev : 2","Lev : 3","Lev : 1","Lev : 2","Lev : 3"],
            "Factor2" : ["Lev : A","Lev : B","Lev : A","Lev : B","Lev : A","Lev : B"],
            "Factor3" : ["Lev : X","Lev : X","Lev : Y","Lev : Y","Lev : Z","Lev : Z"],
            "Factor4" : [5,10,15,20,25,30],
            "Factor5" : [8,16,24,32,40,48],
            "Factor6" : [10,20,30,40,50,60]
         },
         "y" : {
            "data" : [
              [5,10,25,40,45,50],
              [95,80,75,70,55,40],
              [25,30,45,60,65,70],
              [55,40,35,30,15,1]
            ],
            "desc" : ["Magnitude1","Magnitude2"],
            "smps" : ["S1","S2","S3","S4","S5","S6"],
            "vars" : ["V1","V2","V3","V4"]
         },
         "z" : {
            "Annt1" : ["Desc : 1","Desc : 2","Desc : 3","Desc : 4"],
            "Annt2" : ["Desc : A","Desc : B","Desc : A","Desc : B"],
            "Annt3" : ["Desc : X","Desc : X","Desc : Y","Desc : Y"],
            "Annt4" : [5,10,15,20],
            "Annt5" : [8,16,24,32],
            "Annt6" : [10,20,30,40]
         }
      }

      // Create the configuration for the graph
      var config = {
         "graphOrientation" : "horizontal",
         "graphType" : "Stacked",
         "legendBackgroundColor" : false,
         "showDataValues" : true,
         "smpTextScaleFontFactor" : 0.8,
         "smpTitle" : "Collection of Samples",
         "smpTitleFontStyle" : "italic",
         "splitSamplesBy" : "Factor3",
         "theme" : "CanvasXpress",
         "title" : "Random Data",
         "xAxis" : ["V1","V2","V3","V4"]
      }

      // 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-generic-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/r/cX-generic-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
z=read.table("https://www.canvasxpress.org/data/r/cX-generic-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  smpAnnot=x,
  varAnnot=z,
  graphOrientation="horizontal",
  graphType="Stacked",
  legendBackgroundColor=FALSE,
  showDataValues=TRUE,
  smpTextScaleFontFactor=0.8,
  smpTitle="Collection of Samples",
  smpTitleFontStyle="italic",
  splitSamplesBy="Factor3",
  theme="CanvasXpress",
  title="Random Data",
  xAxis=list("V1", "V2", "V3", "V4")
)