<g id="graph-background">
  <rect x="0" y="0" width="100%" height="<%= background.analyze_zone_height * 2 %>%" fill="#edecf0" />
  <rect x="0" y="<%= background.analyze_zone_height * 2 %>%" width="100%" height="<%= background.analyze_zone_height * 3 %>%" fill="#fffaee" />
  <rect x="0" y="0" width="100%" height="<%= background.analyze_graph_height %>%" fill="none" stroke="grey" />
  <rect x="0" y="<%= background.benchmark_y %>%" width="100%" height="<%= background.benchmark_height %>%" fill="black" />

  <g id="zone-dividers" stroke-width="1">
    <line x1="0" y1="17%" x2="100%" y2="17%" stroke="white" />
    <line x1="0" y1="51%" x2="100%" y2="51%" stroke="#edecf0" />
    <line x1="0" y1="68%" x2="100%" y2="68%" stroke="#edecf0" />
  </g>

  <g id="zone-labels">
    <text class="zone-header" x="<%= background.zone_label_x %>%" y="<%= background.zone_label_y(1) %>%" text-anchor="start" dominant-baseline="middle">
      Ideal
    </text>
    <text class="zone-header" x="<%= background.zone_label_x %>%" y="<%= background.zone_label_y(2) %>%" text-anchor="start" dominant-baseline="middle">
      Approval
    </text>
    <text class="zone-header" x="<%= background.zone_label_x %>%" y="<%= background.zone_label_y(3) %>%" text-anchor="start" dominant-baseline="middle">
      Growth
    </text>
    <text class="zone-header" x="<%= background.zone_label_x %>%" y="<%= background.zone_label_y(4) %>%" text-anchor="start" dominant-baseline="middle">
      Watch
    </text>
    <text class="zone-header" x="<%= background.zone_label_x %>%" y="<%= background.zone_label_y(5) %>%" text-anchor="start" dominant-baseline="middle">
      Warning
    </text>
  </g>
</g>
