Fixes issue w3c#83

css/metrics-graphics-darkness.css

@@ -91,6 +91,10 @@ h2.chart_title span {
     fill: #fff;
 }
 
+.main-area-solid svg .main-area {
+    fill: #52491f;
+}
+
 .missing {
     background-image: url(../images/missing-data-dark.png);
 }

css/metrics-graphics.css

@@ -142,6 +142,11 @@ h2.chart_title .fa {
     width: 400px;
 }
 
+.main-area-solid svg .main-area {
+    fill: #ccccff;
+    opacity: 1;
+}
+
 .markers line {
     opacity: 0.2;
     shape-rendering: crispEdges;

index.html

@@ -70,10 +70,11 @@
             <div id='torso'>
                 <div id='fake_users1'></div>
                 <div id='fake_users2'></div>
-                <div id='glorious_chart' class='missing'></div>
+                <div id='spike' class='main-area-solid'></div>
                 <div id='percentage'></div>
                 <div id='currency'></div>
                 <div id='xnotdate'></div>
+                <div id='glorious_chart' class='missing'></div>
             </div>
             <div id='trunk'>
                 <div class='row trunk-section'>

js/main.js

@@ -47,6 +47,24 @@ $(document).ready(function() {
             x_accessor: 'date',
             y_accessor: 'value'
         })
+
+        var markers = [{
+            'date': new Date('2014-03-17'),
+            'label': 'Look, a spike!'
+        }]
+
+        moz_chart({
+            title: "Annotations",
+            description: "By setting the chart's target a class name of main-area-solid, markers don't extend down to the bottom of the chart, which better draws attention to, say, spikes.",
+            data: data,
+            width: torso.width,
+            height: torso.height,
+            right: torso.right,
+            markers: markers,
+            target: '#spike',
+            x_accessor: 'date',
+            y_accessor: 'value'
+        })
     })
 
     d3.json('data/fake_users2.json', function(data) {