Long sorted stacked bars with four components

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.


Economist GGPlot Excel Paul Tol Black And White Solarized Stata Tableau Wall Street CanvasXpress
Edit this code: edit & runin place edit inJSFiddle edit inCodePen 
<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",
         "titleAlign" : "plot::0",
         "subtitleAlign" : "plot::0",
         "legendHorizontalJustification" : 0,
         "legendJustifyTo" : "plot",
         "graphOrientation" : "horizontal",
         "theme" : "paulTol",
         "colorScheme" : "User",
         "colors" : [
            "#B8A08C",
            "#FEE29B",
            "#F5A23D",
            "#2FA4B9"
         ],
         "title" : "Embodied carbon across the building-material life cycle",
         "subtitle" : "Kilograms of CO2-equivalent per kilogram of material, split by life-cycle stage (illustrative values).",
         "xAxis" : [
            "Extraction",
            "Manufacturing",
            "Transport",
            "Installation & waste"
         ],
         "xAxisTitle" : "kg CO2e per kg",
         "legendPosition" : "top",
         "showLegend" : true,
         "sampleSpaceFactor" : 0.35,
         "smpTitle" : ""
      }

      // 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>
Edit this code: edit & runin place edit inJSFiddle edit inCodePen 
<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" : [
               "Extraction",
               "Manufacturing",
               "Transport",
               "Installation & waste"
            ],
            "smps" : [
               "Primary aluminium",
               "Steel (BOF)",
               "Cement (CEM I)",
               "Float glass",
               "Copper tube",
               "PVC pipe",
               "Bitumen roofing",
               "Clay brick",
               "Plasterboard",
               "Ready-mix concrete",
               "Softwood timber",
               "Mineral wool",
               "EPS insulation",
               "Ceramic tile",
               "Recycled steel (EAF)",
               "Hempcrete",
               "Cellulose fibre",
               "Gravel aggregate"
            ],
            "data" : [
               [
                  5.27,
                  1.34,
                  0.54,
                  0.7,
                  1.97,
                  1.67,
                  0.55,
                  0.39,
                  0.22,
                  0.12,
                  0.28,
                  0.78,
                  1.9,
                  0.58,
                  0.42,
                  0.06,
                  0.11,
                  0.03
               ],
               [
                  2.91,
                  0.67,
                  0.27,
                  0.44,
                  0.99,
                  0.63,
                  0.39,
                  0.25,
                  0.15,
                  0.05,
                  0.1,
                  0.28,
                  1.05,
                  0.2,
                  0.25,
                  0.03,
                  0.07,
                  0.02
               ],
               [
                  0.88,
                  0.1,
                  0.08,
                  0.13,
                  0.29,
                  0.27,
                  0.11,
                  0.05,
                  0.02,
                  0.02,
                  0.05,
                  0.06,
                  0.21,
                  0.09,
                  0.1,
                  0,
                  0.01,
                  0
               ],
               [
                  0.43,
                  0.09,
                  0.05,
                  0.03,
                  0.14,
                  0.13,
                  0.05,
                  0.02,
                  0.01,
                  0.01,
                  0.03,
                  0.08,
                  0.14,
                  0.02,
                  0.03,
                  0.01,
                  0.01,
                  0
               ]
            ]
         }
      }

      // Create the configuration for the graph
      var config = {
         "graphType" : "Stacked",
         "titleAlign" : "plot::0",
         "subtitleAlign" : "plot::0",
         "legendHorizontalJustification" : 0,
         "legendJustifyTo" : "plot",
         "graphOrientation" : "horizontal",
         "theme" : "paulTol",
         "colorScheme" : "User",
         "colors" : [
            "#B8A08C",
            "#FEE29B",
            "#F5A23D",
            "#2FA4B9"
         ],
         "title" : "Embodied carbon across the building-material life cycle",
         "subtitle" : "Kilograms of CO2-equivalent per kilogram of material, split by life-cycle stage (illustrative values).",
         "xAxis" : [
            "Extraction",
            "Manufacturing",
            "Transport",
            "Installation & waste"
         ],
         "xAxisTitle" : "kg CO2e per kg",
         "legendPosition" : "top",
         "showLegend" : true,
         "sampleSpaceFactor" : 0.35,
         "smpTitle" : ""
      }

      // 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-stacked7-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
colorScheme="User",
colors=list("#B8A08C", "#FEE29B", "#F5A23D", "#2FA4B9"),
graphOrientation="horizontal",
graphType="Stacked",
legendHorizontalJustification=0,
legendJustifyTo="plot",
legendPosition="top",
sampleSpaceFactor=0.35,
showLegend=TRUE,
smpTitle="",
subtitle="Kilograms of CO2-equivalent per kilogram of material, split by life-cycle stage (illustrative values).",
subtitleAlign="plot::0",
theme="paulTol",
title="Embodied carbon across the building-material life cycle",
titleAlign="plot::0",
xAxis=list("Extraction", "Manufacturing", "Transport", "Installation & waste"),
xAxisTitle="kg CO2e per kg"
)
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 = "stacked7",
    data = {
      "y": {
        "vars": ["Extraction", "Manufacturing", "Transport", "Installation & waste"],
        "smps": ["Primary aluminium", "Steel (BOF)", "Cement (CEM I)", "Float glass", "Copper tube", "PVC pipe", "Bitumen roofing", "Clay brick", "Plasterboard", "Ready-mix concrete", "Softwood timber", "Mineral wool", "EPS insulation", "Ceramic tile", "Recycled steel (EAF)", "Hempcrete", "Cellulose fibre", "Gravel aggregate"],
        "data": [
          [5.27, 1.34, 0.54, 0.7, 1.97, 1.67, 0.55, 0.39, 0.22, 0.12, 0.28, 0.78, 1.9, 0.58, 0.42, 0.06, 0.11, 0.03],
          [2.91, 0.67, 0.27, 0.44, 0.99, 0.63, 0.39, 0.25, 0.15, 0.05, 0.1, 0.28, 1.05, 0.2, 0.25, 0.03, 0.07, 0.02],
          [0.88, 0.1, 0.08, 0.13, 0.29, 0.27, 0.11, 0.05, 0.02, 0.02, 0.05, 0.06, 0.21, 0.09, 0.1, 0, 0.01, 0],
          [0.43, 0.09, 0.05, 0.03, 0.14, 0.13, 0.05, 0.02, 0.01, 0.01, 0.03, 0.08, 0.14, 0.02, 0.03, 0.01, 0.01, 0]
        ]
      }
    },
    config = {
      "graphType": "Stacked",
      "titleAlign": "plot::0",
      "subtitleAlign": "plot::0",
      "legendHorizontalJustification": 0,
      "legendJustifyTo": "plot",
      "graphOrientation": "horizontal",
      "theme": "paulTol",
      "colorScheme": "User",
      "colors": ["#B8A08C", "#FEE29B", "#F5A23D", "#2FA4B9"],
      "title": "Embodied carbon across the building-material life cycle",
      "subtitle": "Kilograms of CO2-equivalent per kilogram of material, split by life-cycle stage (illustrative values).",
      "xAxis": ["Extraction", "Manufacturing", "Transport", "Installation & waste"],
      "xAxisTitle": "kg CO2e per kg",
      "legendPosition": "top",
      "showLegend": True,
      "sampleSpaceFactor": 0.35,
      "smpTitle": ""
    },
    width = 760,
    height = 640
  )

  # Display the chart in its own Web page
  show_in_browser(chart)
Run this notebook: Open in Binder 
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import graph

graph(
  CanvasXpress(
    render_to = "stacked7",
    data = {
      "y": {
        "vars": ["Extraction", "Manufacturing", "Transport", "Installation & waste"],
        "smps": ["Primary aluminium", "Steel (BOF)", "Cement (CEM I)", "Float glass", "Copper tube", "PVC pipe", "Bitumen roofing", "Clay brick", "Plasterboard", "Ready-mix concrete", "Softwood timber", "Mineral wool", "EPS insulation", "Ceramic tile", "Recycled steel (EAF)", "Hempcrete", "Cellulose fibre", "Gravel aggregate"],
        "data": [
          [5.27, 1.34, 0.54, 0.7, 1.97, 1.67, 0.55, 0.39, 0.22, 0.12, 0.28, 0.78, 1.9, 0.58, 0.42, 0.06, 0.11, 0.03],
          [2.91, 0.67, 0.27, 0.44, 0.99, 0.63, 0.39, 0.25, 0.15, 0.05, 0.1, 0.28, 1.05, 0.2, 0.25, 0.03, 0.07, 0.02],
          [0.88, 0.1, 0.08, 0.13, 0.29, 0.27, 0.11, 0.05, 0.02, 0.02, 0.05, 0.06, 0.21, 0.09, 0.1, 0, 0.01, 0],
          [0.43, 0.09, 0.05, 0.03, 0.14, 0.13, 0.05, 0.02, 0.01, 0.01, 0.03, 0.08, 0.14, 0.02, 0.03, 0.01, 0.01, 0]
        ]
      }
    },
    config = {
      "graphType": "Stacked",
      "titleAlign": "plot::0",
      "subtitleAlign": "plot::0",
      "legendHorizontalJustification": 0,
      "legendJustifyTo": "plot",
      "graphOrientation": "horizontal",
      "theme": "paulTol",
      "colorScheme": "User",
      "colors": ["#B8A08C", "#FEE29B", "#F5A23D", "#2FA4B9"],
      "title": "Embodied carbon across the building-material life cycle",
      "subtitle": "Kilograms of CO2-equivalent per kilogram of material, split by life-cycle stage (illustrative values).",
      "xAxis": ["Extraction", "Manufacturing", "Transport", "Installation & waste"],
      "xAxisTitle": "kg CO2e per kg",
      "legendPosition": "top",
      "showLegend": True,
      "sampleSpaceFactor": 0.35,
      "smpTitle": ""
    },
    width = 760,
    height = 640
  )
)

using CanvasXpress

canvasxpress(Dict(
  "y" => Dict(
    "vars" => ["Extraction", "Manufacturing", "Transport", "Installation & waste"],
    "smps" => ["Primary aluminium", "Steel (BOF)", "Cement (CEM I)", "Float glass", "Copper tube", "PVC pipe", "Bitumen roofing", "Clay brick", "Plasterboard", "Ready-mix concrete", "Softwood timber", "Mineral wool", "EPS insulation", "Ceramic tile", "Recycled steel (EAF)", "Hempcrete", "Cellulose fibre", "Gravel aggregate"],
    "data" => [
      [5.27, 1.34, 0.54, 0.7, 1.97, 1.67, 0.55, 0.39, 0.22, 0.12, 0.28, 0.78, 1.9, 0.58, 0.42, 0.06, 0.11, 0.03],
      [2.91, 0.67, 0.27, 0.44, 0.99, 0.63, 0.39, 0.25, 0.15, 0.05, 0.1, 0.28, 1.05, 0.2, 0.25, 0.03, 0.07, 0.02],
      [0.88, 0.1, 0.08, 0.13, 0.29, 0.27, 0.11, 0.05, 0.02, 0.02, 0.05, 0.06, 0.21, 0.09, 0.1, 0, 0.01, 0],
      [0.43, 0.09, 0.05, 0.03, 0.14, 0.13, 0.05, 0.02, 0.01, 0.01, 0.03, 0.08, 0.14, 0.02, 0.03, 0.01, 0.01, 0]
    ]
  )
);
  graphType = "Stacked",
  titleAlign = "plot::0",
  subtitleAlign = "plot::0",
  legendHorizontalJustification = 0,
  legendJustifyTo = "plot",
  graphOrientation = "horizontal",
  theme = "paulTol",
  colorScheme = "User",
  colors = ["#B8A08C", "#FEE29B", "#F5A23D", "#2FA4B9"],
  title = "Embodied carbon across the building-material life cycle",
  subtitle = "Kilograms of CO2-equivalent per kilogram of material, split by life-cycle stage (illustrative values).",
  xAxis = ["Extraction", "Manufacturing", "Transport", "Installation & waste"],
  xAxisTitle = "kg CO2e per kg",
  legendPosition = "top",
  showLegend = true,
  sampleSpaceFactor = 0.35,
  smpTitle = ""
)
CanvasXpress Logo

CanvasXpress a stand-alone JavaScript Library for Data Analytics. Built for the purpose of reproducible research with a sophisticated and unobtrusive user interface. Full and effortless audit trail of data, configuration and all user interactions in every visualization.

©2025 All Rights Reserved. CanvasXpress®

Documentation
Examples Docs Learn Api Spec Quality Accessibility Updates Changelog
Company
Contact License Governance Support Regulated & GxP Admin
Information
Terms of Use Privacy policy References
⇧