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.
<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%%"
)
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import show_in_browser
if __name__ == "__main__":
# Define the chart with its data and configuration
chart: CanvasXpress = CanvasXpress(
render_to = "stackedpercent4",
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"]
}
},
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"]
},
width = 600,
height = 600
)
# Display the chart in its own Web page
show_in_browser(chart)
Run this notebook:
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import graph
graph(
CanvasXpress(
render_to = "stackedpercent4",
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"]
}
},
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"]
},
width = 600,
height = 600
)
)
