Bars Not Appearing


#1

Hello,

I'm working on the Sass Bar Chart project, and none of the "rect" elements are showing up in the browser window.

Any ideas?

Here is my index.html

<head>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <h1>Top Ten Most Produced Foods in the World, by Tonnes</h1>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
</body>

Here is my main.scss.

$top-foods: ("Sugar Cane" 1898),
("Corn" 1017),
("Rice" 738),
("Wheat" 711),
("Cow Milk" 635),
("Potatoes" 374),
("Vegetables" 279),
("Soy Beans" 278),
("Cassava" 263),
("Sugar Beets" 247);

$diamond-blue: rgba(0, 159, 255, .6);
$sea-green: rgba(10, 165, 153, .6);
$pale-green: rgba(167, 240, 213, .6);

h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  padding-bottom: 20px;
  color: #434444;
}

span {
  display: block;
}

rect {
  width: 24px;
  float: left;
  padding-left: 25px;
  padding-top: 7px;
  white-space: nowrap;
  word-break: break-all;
  position: relative;
  bottom: 0px;
  font-size: 12px;
  color: #707070;
  font-family: 'Montserrat', sans-serif;
  &:before {
    display: inline-block;
    -webkit-transform: rotate(90deg);
    transform-origin: left top 0;
    float: left;
  }
  &:after {
    position: absolute;
    top: -15px;
    left: 0px;
  }
}

@each $food, $tons-produced in $top-foods {
  $i: index($top-foods,($food $tons-produced));
  rect:nth-child(#{$i + 1}) {
    height: #{$tons-produced/3}px;
    &:before {
       content: $food;
    }
    &:after {
      content: $tons-produced + "m";
    }
  }
}

@if($i % 2 -- 0){
  background-color: fade-in($sea-green, $i*5/100);
} @else if($i % 3 == 0) {
  background-color: fade-in($pale-green, $i*5/100);
} @else {
  background-color: fade-in($diamond-blue, $i*5/100);
}

Thanks in advance for your help!

Blaine


#2

I seem to be having the same issue... :frowning:


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.