<!-- 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/canvasXpress.min.js"></script>


<!-- 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" : {
        "Color" : ["A","B","C","D","E","F"]
     },
     "y" : {
        "data" : [
          [35,33,34,18,14,50],
          [22,24,23,39,43,7],
          [56,43,25,34,12,47],
          [4,17,35,26,48,13]
        ],
        "smps" : ["Top 2 Roles","Self Reliant","Human","Adult with Job","Child","No Magic"],
        "vars" : ["Females-in","Females-out","Males-in","Males-out"]
     },
     "z" : {
        "Gender" : ["Female","Female","Male","Male"],
        "InOut" : ["In","Out","In","Out"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "background":"rgb(63,149,180)",
     "backgroundType":"solid",
     "barPath":"true",
     "barPathColor":"rgb(48,116,154)",
     "barPathTransparency":"1",
     "colorBy":"Color",
     "colors":[
        "rgb(255,190,179)",
        "rgb(251,153,134)",
        "rgb(244,112,96)",
        "rgb(230,68,72)",
        "rgb(210,41,63)",
        "rgb(173,18,58)"
     ],
     "fontName":"Waltograph",
     "fontsExternal":[
        {
           "name":"Waltograph",
           "url":"https://www.canvasxpress.org/assets/fonts/waltograph42.otf"
        }
     ],
     "graphOrientation":"horizontal",
     "graphType":"StackedPercent",
     "layoutCollapse":"true",
     "layoutStripTextColor":"rgb(255,255,255)",
     "layoutStripTextScaleFontFactor":2.5,
     "marginBottom":"50",
     "marginLeft":"50",
     "marginRight":"50",
     "marginTop":"50",
     "maxTextSize":"80",
     "objectBorderColor":"rgba(255,255,255,0)",
     "patternBy":"InOut",
     "patterns":[
        "solid",
        "stripeHorizontal",
        "hatchForward",
        "hatchReverse",
        "stripeVertical",
        "polkaDot"
     ],
     "segregateVariablesBy":[
        "Gender"
     ],
     "showLegend":"false",
     "smpLabelColor":"rgb(255,255,255)",
     "smpLabelScaleFontFactor":"3",
     "title":"Fewer Role Models",
     "titleColor":"rgb(252,157,156)",
     "titleScaleFontFactor":2.5,
     "widthFactor":1.1,
     "xAxis2Show":"false",
     "xAxisShow":"false",
     "xAxisTicksMajorShow":"false",
     "xAxisTicksMinorShow":"false"
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


</script>