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.
<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", "Var1", "Var2", "Var3", "Factor4", "Factor1", "Factor2", "Factor6", "Factor3", "Factor5"], [ "Smp1", 2, 4, 3, "F4-a", "F1-A", "F2-a", 1, "F3-i", "F5-a"], [ "Smp2", 4, 6, 5, "F4-a", "F1-A", "F2-a", 2, "F3-i", "F5-b"], [ "Smp3", 6, 8, 7, "F4-a", "F1-A", "F2-a", 3, "F3-j", "F5-c"], [ "Smp4", 8, 10, 9, "F4-a", "F1-A", "F2-a", 4, "F3-j", "F5-d"], [ "Smp5", 3, 3, 4, "F4-b", "F1-A", "F2-b", 5, "F3-k", "F5-e"], [ "Smp6", 5, 5, 6, "F4-b", "F1-A", "F2-b", 6, "F3-k", "F5-f"], [ "Smp7", 7, 7, 8, "F4-b", "F1-A", "F2-b", 7, "F3-l", "F5-g"], [ "Smp8", 9, 9, 10, "F4-b", "F1-A", "F2-b", 8, "F3-l", "F5-h"], [ "Smp9", 2, 2, 3, "F4-a", "F1-B", "F2-c", 8, "F3-m", "F5-i"], [ "Smp10", 4, 4, 5, "F4-a", "F1-B", "F2-c", 7, "F3-m", "F5-j"], [ "Smp11", 6, 6, 7, "F4-a", "F1-B", "F2-c", 6, "F3-n", "F5-k"], [ "Smp12", 8, 8, 9, "F4-a", "F1-B", "F2-c", 5, "F3-n", "F5-l"], [ "Smp13", 3, 1, 2, "F4-b", "F1-B", "F2-d", 4, "F3-o", "F5-m"], [ "Smp14", 5, 3, 4, "F4-b", "F1-B", "F2-d", 3, "F3-o", "F5-n"], [ "Smp15", 7, 5, 6, "F4-b", "F1-B", "F2-d", 2, "F3-p", "F5-o"], [ "Smp16", 9, 7, 8, "F4-b", "F1-B", "F2-d", 1, "F3-p", "F5-p"], [ "Smp17", 3, 2, 4, "F4-a", "F1-C", "F2-e", 1, "F3-q", "F5-q"], [ "Smp18", 5, 4, 6, "F4-a", "F1-C", "F2-e", 2, "F3-q", "F5-r"], [ "Smp19", 7, 6, 8, "F4-a", "F1-C", "F2-e", 3, "F3-r", "F5-s"], [ "Smp20", 9, 8, 10, "F4-a", "F1-C", "F2-e", 4, "F3-r", "F5-t"], [ "Smp21", 4, 3, 3, "F4-b", "F1-C", "F2-f", 5, "F3-s", "F5-u"], [ "Smp22", 6, 5, 5, "F4-b", "F1-C", "F2-f", 6, "F3-s", "F5-v"], [ "Smp23", 8, 7, 7, "F4-b", "F1-C", "F2-f", 7, "F3-t", "F5-w"], [ "Smp24", 10, 9, 9, "F4-b", "F1-C", "F2-f", 8, "F3-t", "F5-x" ] ]; // Create the configuration for the graph var config = { "colorScheme" : "Blues", "foreground" : "rgb(0,0,0)", "graphOrientation" : "vertical", "graphType" : "Stacked", "groupingFactors" : ["Factor1"], "legendKeyBackgroundBorderColor" : "rgba(255,255,255,0)", "legendKeyBackgroundColor" : "rgba(255,255,255,0)", "objectBorderColor" : "rgb(0,0,0)", "sampleSpaceFactor" : 1, "showTransition" : false, "title" : "Random Data", "treemapBy" : ["Factor2","Factor3"], "xAxis": ["Var1","Var2","Var3"] } // 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 = { "x" : { "Factor1" : ["F1-A","F1-A","F1-A","F1-A","F1-A","F1-A","F1-A","F1-A","F1-B","F1-B","F1-B","F1-B","F1-B","F1-B","F1-B","F1-B","F1-C","F1-C","F1-C","F1-C","F1-C","F1-C","F1-C","F1-C"], "Factor2" : ["F2-a","F2-a","F2-a","F2-a","F2-b","F2-b","F2-b","F2-b","F2-c","F2-c","F2-c","F2-c","F2-d","F2-d","F2-d","F2-d","F2-e","F2-e","F2-e","F2-e","F2-f","F2-f","F2-f","F2-f"], "Factor3" : ["F3-i","F3-i","F3-j","F3-j","F3-k","F3-k","F3-l","F3-l","F3-m","F3-m","F3-n","F3-n","F3-o","F3-o","F3-p","F3-p","F3-q","F3-q","F3-r","F3-r","F3-s","F3-s","F3-t","F3-t"], "Factor4" : ["F4-a","F4-a","F4-a","F4-a","F4-b","F4-b","F4-b","F4-b","F4-a","F4-a","F4-a","F4-a","F4-b","F4-b","F4-b","F4-b","F4-a","F4-a","F4-a","F4-a","F4-b","F4-b","F4-b","F4-b"], "Factor5" : ["F5-a","F5-b","F5-c","F5-d","F5-e","F5-f","F5-g","F5-h","F5-i","F5-j","F5-k","F5-l","F5-m","F5-n","F5-o","F5-p","F5-q","F5-r","F5-s","F5-t","F5-u","F5-v","F5-w","F5-x"], "Factor6" : [1,2,3,4,5,6,7,8,8,7,6,5,4,3,2,1,1,2,3,4,5,6,7,8] }, "y" : { "data" : [ [2,4,6,8,3,5,7,9,2,4,6,8,3,5,7,9,3,5,7,9,4,6,8,10], [4,6,8,10,3,5,7,9,2,4,6,8,1,3,5,7,2,4,6,8,3,5,7,9], [3,5,7,9,4,6,8,10,3,5,7,9,2,4,6,8,4,6,8,10,3,5,7,9] ], "smps" : ["Smp1","Smp2","Smp3","Smp4","Smp5","Smp6","Smp7","Smp8","Smp9","Smp10","Smp11","Smp12","Smp13","Smp14","Smp15","Smp16","Smp17","Smp18","Smp19","Smp20","Smp21","Smp22","Smp23","Smp24"], "vars" : ["Var1","Var2","Var3"] } } // Create the configuration for the graph var config = { "colorScheme" : "Blues", "foreground" : "rgb(0,0,0)", "graphOrientation" : "vertical", "graphType" : "Stacked", "groupingFactors" : ["Factor1"], "legendKeyBackgroundBorderColor" : "rgba(255,255,255,0)", "legendKeyBackgroundColor" : "rgba(255,255,255,0)", "objectBorderColor" : "rgb(0,0,0)", "sampleSpaceFactor" : 1, "showTransition" : false, "title" : "Random Data", "treemapBy" : ["Factor2","Factor3"], "xAxis": ["Var1","Var2","Var3"] } // 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-stacked2-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-stacked2-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( data=y, smpAnnot=x, colorScheme="Blues", foreground="rgb(0,0,0)", graphOrientation="vertical", graphType="Stacked", groupingFactors=list("Factor1"), legendKeyBackgroundBorderColor="rgba(255,255,255,0)", legendKeyBackgroundColor="rgba(255,255,255,0)", objectBorderColor="rgb(0,0,0)", sampleSpaceFactor=1, showTransition=FALSE, title="Random Data", treemapBy=list("Factor2", "Factor3"), xAxis=list("Var1", "Var2", "Var3") )