Stacked Graph with Publication Footer
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 =
// Create the configuration for the graph
var config = {
"graphType" : "Stacked",
"graphOrientation" : "vertical",
"title" : "Electricity mix (%)",
"notes" : "Shares of gross generation. 2024 values preliminary.",
"source" : "IEA",
"sourceUrl" : "https://www.iea.org",
"byline" : "Chart: CanvasXpress",
"showDataDownload" : true,
"legendPosition" : "bottom"
}
// 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" : {
"vars" : [
"Renewables",
"Nuclear",
"Fossil"
],
"smps" : [
"2000",
"2010",
"2020",
"2024"
],
"data" : [
[
7,
11,
20,
30
],
[
17,
14,
10,
9
],
[
76,
75,
70,
61
]
]
}
}
// Create the configuration for the graph
var config = {
"graphType" : "Stacked",
"graphOrientation" : "vertical",
"title" : "Electricity mix (%)",
"notes" : "Shares of gross generation. 2024 values preliminary.",
"source" : "IEA",
"sourceUrl" : "https://www.iea.org",
"byline" : "Chart: CanvasXpress",
"showDataDownload" : true,
"legendPosition" : "bottom"
}
// 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-stacked6-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
byline="Chart: CanvasXpress",
graphOrientation="vertical",
graphType="Stacked",
legendPosition="bottom",
notes="Shares of gross generation. 2024 values preliminary.",
showDataDownload=TRUE,
source="IEA",
sourceUrl="https://www.iea.org",
title="Electricity mix (%)"
)
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 = "stacked6",
data = {
"y": {
"vars": ["Renewables", "Nuclear", "Fossil"],
"smps": ["2000", "2010", "2020", "2024"],
"data": [
[7, 11, 20, 30],
[17, 14, 10, 9],
[76, 75, 70, 61]
]
}
},
config = {
"graphType": "Stacked",
"graphOrientation": "vertical",
"title": "Electricity mix (%)",
"notes": "Shares of gross generation. 2024 values preliminary.",
"source": "IEA",
"sourceUrl": "https://www.iea.org",
"byline": "Chart: CanvasXpress",
"showDataDownload": True,
"legendPosition": "bottom"
},
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 = "stacked6",
data = {
"y": {
"vars": ["Renewables", "Nuclear", "Fossil"],
"smps": ["2000", "2010", "2020", "2024"],
"data": [
[7, 11, 20, 30],
[17, 14, 10, 9],
[76, 75, 70, 61]
]
}
},
config = {
"graphType": "Stacked",
"graphOrientation": "vertical",
"title": "Electricity mix (%)",
"notes": "Shares of gross generation. 2024 values preliminary.",
"source": "IEA",
"sourceUrl": "https://www.iea.org",
"byline": "Chart: CanvasXpress",
"showDataDownload": True,
"legendPosition": "bottom"
},
width = 600,
height = 600
)
)
using CanvasXpress
canvasxpress(Dict(
"y" => Dict(
"vars" => ["Renewables", "Nuclear", "Fossil"],
"smps" => ["2000", "2010", "2020", "2024"],
"data" => [
[7, 11, 20, 30],
[17, 14, 10, 9],
[76, 75, 70, 61]
]
)
);
graphType = "Stacked",
graphOrientation = "vertical",
title = "Electricity mix (%)",
notes = "Shares of gross generation. 2024 values preliminary.",
source = "IEA",
sourceUrl = "https://www.iea.org",
byline = "Chart: CanvasXpress",
showDataDownload = true,
legendPosition = "bottom"
)
