From 93a5bb4c827d6665f395c48b216438f95e94d76e Mon Sep 17 00:00:00 2001
From: Dan Vanderkam <danvdk@gmail.com>
Date: Wed, 28 Sep 2016 08:45:57 -0400
Subject: [PATCH] Use CSS for tests, gallery and docs

---
 docs/annotations.html                         |  4 +++-
 gallery/border.js                             |  2 +-
 gallery/edge-padding.js                       |  2 +-
 gallery/index.html                            |  1 +
 gallery/range-selector.js                     |  9 +++++----
 gallery/styled-chart-labels.js                |  9 +--------
 gallery/temperature-sf-ny.js                  |  3 +--
 tests/annotation-native.html                  |  1 +
 tests/annotation.html                         |  1 +
 tests/avoidMinZero.html                       |  1 +
 tests/border.html                             |  5 ++++-
 tests/callback.html                           |  1 +
 tests/century-scale.html                      |  1 +
 tests/charting-combinations.html              |  1 +
 tests/color-cycle.html                        |  1 +
 tests/color-visibility.html                   |  1 +
 tests/connect-separated.html                  |  1 +
 tests/crosshair.html                          |  1 +
 tests/css-positioning.html                    |  1 +
 tests/custom-bars.html                        |  1 +
 tests/custom-circles.html                     |  1 +
 tests/customLabel.html                        |  1 +
 tests/customLabelCss3.html                    | 19 +++++++++++--------
 tests/dateWindow.html                         |  1 +
 tests/daylight-savings.html                   |  1 +
 tests/demo.html                               |  1 +
 tests/dense-fill.html                         |  1 +
 tests/draw-points.html                        |  1 +
 tests/drawing.html                            |  1 +
 tests/dygraph-many-points-benchmark.html      |  1 +
 tests/dygraph.html                            |  1 +
 tests/dynamic-update.html                     |  1 +
 tests/exported-symbols.html                   |  1 +
 tests/fillGraph-alpha.html                    |  1 +
 tests/fillGraph.html                          |  1 +
 tests/fractions.html                          |  1 +
 tests/grid_dot.html                           |  1 +
 tests/gviz-infinity.html                      |  1 +
 tests/gviz-selection.html                     |  1 +
 tests/gviz.html                               |  1 +
 tests/hairlines.html                          |  1 +
 tests/highlighted-region.html                 |  1 +
 tests/hourly.html                             |  1 +
 tests/iframe.html                             |  1 +
 tests/independent-series.html                 |  1 +
 tests/interaction.html                        |  1 +
 tests/is-zoomed-ignore-programmatic-zoom.html |  1 +
 tests/is-zoomed.html                          |  1 +
 tests/isolated-points.html                    |  1 +
 tests/label-div.html                          |  1 +
 tests/labelsDateUTC.html                      |  1 +
 tests/labelsKMB.html                          |  1 +
 tests/layout-options.html                     |  1 +
 tests/legend-formatter.html                   |  1 +
 tests/legend-values.html                      |  3 ++-
 tests/linear-regression-addseries.html        |  1 +
 tests/linear-regression-fractions.html        |  1 +
 tests/linear-regression.html                  |  1 +
 tests/link-interaction.html                   |  1 +
 tests/logscale.html                           |  1 +
 tests/missing-data.html                       |  1 +
 tests/multi-scale.html                        |  1 +
 tests/native-format.html                      |  1 +
 tests/negative.html                           |  1 +
 tests/no-range.html                           |  1 +
 tests/no-visibility.html                      |  1 +
 tests/number-format.html                      |  1 +
 tests/numeric-axis.html                       |  1 +
 tests/numeric-gviz.html                       |  1 +
 tests/out-of-order.html                       |  1 +
 tests/per-series.html                         |  1 +
 tests/perf.html                               |  1 +
 tests/plotter.html                            |  1 +
 tests/plotters.html                           |  1 +
 tests/plugins.html                            |  1 +
 tests/range-selector.html                     | 22 ++++++++++++++++------
 tests/resize.html                             |  1 +
 tests/reverse-y-axis.html                     |  1 +
 tests/series-highlight.html                   |  1 +
 tests/small-range-zero.html                   |  1 +
 tests/smooth-plots.html                       |  1 +
 tests/spacing.html                            |  1 +
 tests/stacked.html                            |  1 +
 tests/steps.html                              |  1 +
 tests/stock.html                              |  1 +
 tests/straw-broom.html                        |  1 +
 tests/styled-chart-labels.html                | 13 +++++--------
 tests/synchronize.html                        |  1 +
 tests/temperature-sf-ny.html                  |  6 ++++--
 tests/two-axes-vr.html                        |  1 +
 tests/two-axes.html                           |  1 +
 tests/unboxed-spark.html                      |  1 +
 tests/underlay-callback.html                  |  1 +
 tests/value-axis-formatters.html              |  1 +
 tests/visibility.html                         |  1 +
 tests/x-axis-formatter.html                   |  1 +
 tests/zero-series.html                        |  1 +
 tests/zoom.html                               |  1 +
 98 files changed, 140 insertions(+), 43 deletions(-)

diff --git a/docs/annotations.html b/docs/annotations.html
index 0a3ba17..9ed49b1 100644
--- a/docs/annotations.html
+++ b/docs/annotations.html
@@ -6,6 +6,9 @@
   .annotation {
     font-size: 12px !important;
   }
+  .dygraph-legend {
+    width: 300px;
+  }
 </style>
 
 <h2>dygraphs Annotations</h2>
@@ -26,7 +29,6 @@ them.</p>
       showRoller: true,
       customBars: true,
       labelsKMB: true,
-      labelsDivWidth: 300
     }
   );
 
diff --git a/gallery/border.js b/gallery/border.js
index b5e4f68..eacaf46 100644
--- a/gallery/border.js
+++ b/gallery/border.js
@@ -6,12 +6,12 @@ Gallery.register(
     title: 'Graph stays within the border',
     setup: function(parent) {
       parent.innerHTML =
+          "<style>.dygraph-legend { border: 1px solid black; }</style>" +
           "<div id='bordered' style='border: 1px solid red; width:600px; height:300px;'></div>";
     },
     run: function() {
       new Dygraph(document.getElementById('bordered'), data,
       {
-        labelsDivStyles: { border: '1px solid black' },
         title: 'Chart Title',
         xlabel: 'Date',
         ylabel: 'Temperature (F)'
diff --git a/gallery/edge-padding.js b/gallery/edge-padding.js
index be79054..5956d4a 100644
--- a/gallery/edge-padding.js
+++ b/gallery/edge-padding.js
@@ -6,6 +6,7 @@ Gallery.register(
     title: 'Graph edge padding and axis position',
     setup: function(parent) {
       parent.innerHTML = (
+          "<style>.dygraph-legend { width: 100px; }</style>" +
           "<p>" +
           "  <b>Mode:</b>" +
           "    <input type='radio' name='mode'>use {x,y}RangePad</input>" +
@@ -39,7 +40,6 @@ Gallery.register(
 
           var g = new Dygraph(gdiv, data, {
               labels: ['x', 'A', 'B'],
-              labelsDivWidth: 100,
               gridLineColor: '#ccc',
               includeZero: true,
               width: 250,
diff --git a/gallery/index.html b/gallery/index.html
index c953deb..a749cf0 100644
--- a/gallery/index.html
+++ b/gallery/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <title>Dygraphs Gallery</title>
+    <link rel="stylesheet" href="../css/dygraph.css" />
 
     <script src="../dist/dygraph.js"></script>
     <script src="../src/extras/synchronizer.js"></script>
diff --git a/gallery/range-selector.js b/gallery/range-selector.js
index 09bfd49..e243b43 100644
--- a/gallery/range-selector.js
+++ b/gallery/range-selector.js
@@ -7,6 +7,11 @@ Gallery.register(
     title: 'Demo of the Range Selector',
     setup: function(parent) {
       parent.innerHTML = [
+          "<style>",
+          "  #darkbg .dygraph-axis-label { color: white; }",
+          "  .dygraph-legend { text-align: right; }",
+          "  #darkbg .dygraph-legend { background-color: #101015; }",
+          "</style>",
           "<p>No roll period.</p>",
           "<div id='noroll' style='width:600px; height:300px;'></div>",
           "",
@@ -27,7 +32,6 @@ Gallery.register(
             title: 'Daily Temperatures in New York vs. San Francisco',
             ylabel: 'Temperature (F)',
             legend: 'always',
-            labelsDivStyles: { 'textAlign': 'right' },
             showRangeSelector: true
           }
       );
@@ -41,7 +45,6 @@ Gallery.register(
             title: 'Daily Temperatures in New York vs. San Francisco',
             ylabel: 'Temperature (F)',
             legend: 'always',
-            labelsDivStyles: { 'textAlign': 'right' },
             showRangeSelector: true,
             rangeSelectorHeight: 30,
             rangeSelectorPlotStrokeColor: 'yellow',
@@ -58,11 +61,9 @@ Gallery.register(
               title: 'Nightly Temperatures in New York vs. San Francisco',
               ylabel: 'Temperature (F)',
               legend: 'always',
-              labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
               showRangeSelector: true,
               rangeSelectorPlotFillColor: 'MediumSlateBlue',
               rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
-              axisLabelColor: 'white',
               colorValue: 0.9,
               fillAlpha: 0.4
           }
diff --git a/gallery/styled-chart-labels.js b/gallery/styled-chart-labels.js
index 0268f6d..6f8c3b4 100644
--- a/gallery/styled-chart-labels.js
+++ b/gallery/styled-chart-labels.js
@@ -6,6 +6,7 @@ Gallery.register(
     title: 'Each chart label is styled independently with CSS',
     setup: function(parent) {
       parent.innerHTML = [
+          "<style>.dygraph-legend { text-align: right; background: none; }</style>",
           "<p class='infotext'>This chart's labels are styled</p>",
           "<div class='chart' id='div_g' style='width:600px; height:300px;'></div>",
           "<p class='infotext'>This version of the chart uses the default styles:</p>",
@@ -21,10 +22,6 @@ Gallery.register(
               titleHeight: 32,
               ylabel: 'Temperature (F)',
               xlabel: 'Date (Ticks indicate the start of the indicated time period)',
-              labelsDivStyles: {
-                'text-align': 'right',
-                'background': 'none'
-              },
               strokeWidth: 1.5
             }
           );
@@ -37,10 +34,6 @@ Gallery.register(
               title: 'High and Low Temperatures (30-day average)',
               ylabel: 'Temperature (F)',
               xlabel: 'Date (Ticks indicate the start of the indicated time period)',
-              labelsDivStyles: {
-                'text-align': 'right',
-                'background': 'none'
-              },
               strokeWidth: 1.5
             }
           );
diff --git a/gallery/temperature-sf-ny.js b/gallery/temperature-sf-ny.js
index f2c9ad1..7e41310 100644
--- a/gallery/temperature-sf-ny.js
+++ b/gallery/temperature-sf-ny.js
@@ -8,6 +8,7 @@ Gallery.register(
     title: 'Demo of a graph with many data points and custom error bars.',
     setup: function(parent) {
       parent.innerHTML = [
+          "<style>.dygraph-legend { text-align: right; }</style>",
           "<p>Roll period of 14 timesteps.</p>",
           "<div id='roll14' style='width:600px; height:300px;'></div>",
           "<p>No roll period.</p>",
@@ -23,7 +24,6 @@ Gallery.register(
             title: 'Daily Temperatures in New York vs. San Francisco',
             ylabel: 'Temperature (F)',
             legend: 'always',
-            labelsDivStyles: { 'textAlign': 'right' }
           }
       );
       new Dygraph(
@@ -36,7 +36,6 @@ Gallery.register(
             title: 'Daily Temperatures in New York vs. San Francisco',
             ylabel: 'Temperature (F)',
             legend: 'always',
-            labelsDivStyles: { 'textAlign': 'right' }
           }
       );
     }
diff --git a/tests/annotation-native.html b/tests/annotation-native.html
index a003497..4e4538d 100644
--- a/tests/annotation-native.html
+++ b/tests/annotation-native.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Native format annotations</title>
     <script type="text/javascript" src="../dist/dygraph.js"></script>
   </head>
diff --git a/tests/annotation.html b/tests/annotation.html
index 6d477e2..4cdcb10 100644
--- a/tests/annotation.html
+++ b/tests/annotation.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>demo</title>
     <!--
     <script type="text/javascript" src="dygraph-combined.js"></script>
diff --git a/tests/avoidMinZero.html b/tests/avoidMinZero.html
index a688770..b89e52d 100644
--- a/tests/avoidMinZero.html
+++ b/tests/avoidMinZero.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>dygraph</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/border.html b/tests/border.html
index 89c8313..03dc0a1 100644
--- a/tests/border.html
+++ b/tests/border.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>gadget border</title>
     <!--
     For production (minified) code, use:
@@ -13,6 +14,9 @@
     #bordered {
       border: 1px solid red;
     }
+    .dygraph-legend {
+      border: 1px solid black;
+    }
     </style>
   </head>
   <body>
@@ -21,7 +25,6 @@
     <script type="text/javascript">
     var g = new Dygraph(document.getElementById('bordered'), data,
     {
-      labelsDivStyles: { border: '1px solid black' },
       title: 'Chart Title',
       xlabel: 'Date',
       ylabel: 'Temperature (F)'
diff --git a/tests/callback.html b/tests/callback.html
index c659930..fc3450c 100644
--- a/tests/callback.html
+++ b/tests/callback.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>callbacks</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/century-scale.html b/tests/century-scale.html
index 8423715..4dad758 100644
--- a/tests/century-scale.html
+++ b/tests/century-scale.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>demo</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/charting-combinations.html b/tests/charting-combinations.html
index 8f2ecaf..18157a6 100644
--- a/tests/charting-combinations.html
+++ b/tests/charting-combinations.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Charting combinations</title>
     <script type="text/javascript" src="../dist/dygraph.js"></script>
     <script type="text/javascript" src="data.js"></script>
diff --git a/tests/color-cycle.html b/tests/color-cycle.html
index 53da503..9cbf071 100644
--- a/tests/color-cycle.html
+++ b/tests/color-cycle.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>color cycles</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/color-visibility.html b/tests/color-visibility.html
index c0e6941..73a3b6a 100644
--- a/tests/color-visibility.html
+++ b/tests/color-visibility.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>color visibility</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/connect-separated.html b/tests/connect-separated.html
index ef6034d..f0d8294 100644
--- a/tests/connect-separated.html
+++ b/tests/connect-separated.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>connect separated</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/crosshair.html b/tests/crosshair.html
index 25eb8d8..dffdf03 100644
--- a/tests/crosshair.html
+++ b/tests/crosshair.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>crosshairs</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/css-positioning.html b/tests/css-positioning.html
index 2db8d69..11238c5 100644
--- a/tests/css-positioning.html
+++ b/tests/css-positioning.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>demo</title>
     <script type="text/javascript" src="../dist/dygraph.js"></script>
     <style>
diff --git a/tests/custom-bars.html b/tests/custom-bars.html
index faa08ad..a2f633e 100644
--- a/tests/custom-bars.html
+++ b/tests/custom-bars.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>custom bars</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/custom-circles.html b/tests/custom-circles.html
index 55cc0bb..5f988f2 100644
--- a/tests/custom-circles.html
+++ b/tests/custom-circles.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Custom Circles</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/customLabel.html b/tests/customLabel.html
index c4ebee7..74fc6d6 100644
--- a/tests/customLabel.html
+++ b/tests/customLabel.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Label styles</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/customLabelCss3.html b/tests/customLabelCss3.html
index 2b1b55a..ae08bf7 100644
--- a/tests/customLabelCss3.html
+++ b/tests/customLabelCss3.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Label styles</title>
     <!--
     For production (minified) code, use:
@@ -9,6 +10,16 @@
     <script type="text/javascript" src="../dist/dygraph.js"></script>
 
     <script type="text/javascript" src="data.js"></script>
+    <style>
+      .dygraph-legend {
+        background-color: rgba(200, 200, 255, 0.75);
+        padding: 4px;
+        border: 1px solid black;
+        border-radius: 10px;
+        box-shadow: 4px 4px 4px #888;
+        width: 100px;
+      }
+    </style>
   </head>
   <body>
     <p>Labels are styled with css3:</p>
@@ -20,14 +31,6 @@
             NoisyData, {
               rollPeriod: 14,
               errorBars: true,
-              labelsDivWidth: 100,
-              labelsDivStyles: {
-                'backgroundColor': 'rgba(200, 200, 255, 0.75)',
-                'padding': '4px',
-                'border': '1px solid black',
-                'borderRadius': '10px',
-                'boxShadow': '4px 4px 4px #888'
-              },
               labelsSeparateLines: true,
               axes: {
                 y: {
diff --git a/tests/dateWindow.html b/tests/dateWindow.html
index 96926e4..89c7969 100644
--- a/tests/dateWindow.html
+++ b/tests/dateWindow.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>dateWindow</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/daylight-savings.html b/tests/daylight-savings.html
index b52a654..2e250aa 100644
--- a/tests/daylight-savings.html
+++ b/tests/daylight-savings.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Daylight Savings</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/demo.html b/tests/demo.html
index 2c72699..af01cc5 100644
--- a/tests/demo.html
+++ b/tests/demo.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>demo</title>
     <!--
     <script type="text/javascript" src="../dist/dygraph.js"></script>
diff --git a/tests/dense-fill.html b/tests/dense-fill.html
index d2d50fe..033600b 100644
--- a/tests/dense-fill.html
+++ b/tests/dense-fill.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>dense, filled plots</title>
     <script type="text/javascript" src="../dist/dygraph.js"></script>
     <style>
diff --git a/tests/draw-points.html b/tests/draw-points.html
index 8b062ab..2a04a17 100644
--- a/tests/draw-points.html
+++ b/tests/draw-points.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>individual points</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/drawing.html b/tests/drawing.html
index 270b44e..03a9b50 100644
--- a/tests/drawing.html
+++ b/tests/drawing.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Dygraphs Drawing Demo</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/dygraph-many-points-benchmark.html b/tests/dygraph-many-points-benchmark.html
index 5b94eb3..5f98755 100644
--- a/tests/dygraph-many-points-benchmark.html
+++ b/tests/dygraph-many-points-benchmark.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Benchmarking for Plots with Many Points</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/dygraph.html b/tests/dygraph.html
index 6795b8c..dd282d1 100644
--- a/tests/dygraph.html
+++ b/tests/dygraph.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>dygraph</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/dynamic-update.html b/tests/dynamic-update.html
index 12b46a5..22f53be 100644
--- a/tests/dynamic-update.html
+++ b/tests/dynamic-update.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Live random data</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/exported-symbols.html b/tests/exported-symbols.html
index 0800823..698f2c0 100644
--- a/tests/exported-symbols.html
+++ b/tests/exported-symbols.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Exported Symbols test</title>
   </head>
   <body>
diff --git a/tests/fillGraph-alpha.html b/tests/fillGraph-alpha.html
index 751838e..9a952d4 100644
--- a/tests/fillGraph-alpha.html
+++ b/tests/fillGraph-alpha.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>fillGraph with per series fillAlpha</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/fillGraph.html b/tests/fillGraph.html
index d21770d..3e03cd2 100644
--- a/tests/fillGraph.html
+++ b/tests/fillGraph.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>fillGraph</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/fractions.html b/tests/fractions.html
index d4dec6a..4e7ac3d 100644
--- a/tests/fractions.html
+++ b/tests/fractions.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Fractions</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/grid_dot.html b/tests/grid_dot.html
index 3259468..ec783ae 100644
--- a/tests/grid_dot.html
+++ b/tests/grid_dot.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Custom grid and Dot</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/gviz-infinity.html b/tests/gviz-infinity.html
index aa2cc25..8694172 100644
--- a/tests/gviz-infinity.html
+++ b/tests/gviz-infinity.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>gviz</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/gviz-selection.html b/tests/gviz-selection.html
index 61dfaff..39a90d6 100644
--- a/tests/gviz-selection.html
+++ b/tests/gviz-selection.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>gviz selection</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/gviz.html b/tests/gviz.html
index ba3953f..e06fcf9 100644
--- a/tests/gviz.html
+++ b/tests/gviz.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>gviz</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/hairlines.html b/tests/hairlines.html
index 1ffe163..6f03b39 100644
--- a/tests/hairlines.html
+++ b/tests/hairlines.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Hairlines demo</title>
     <script type="text/javascript" src="../dist/dygraph.js"></script>
 
diff --git a/tests/highlighted-region.html b/tests/highlighted-region.html
index be2986b..f932c86 100644
--- a/tests/highlighted-region.html
+++ b/tests/highlighted-region.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Highlighted Region</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/hourly.html b/tests/hourly.html
index 5b5a5c7..9a526d6 100644
--- a/tests/hourly.html
+++ b/tests/hourly.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>hourly</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/iframe.html b/tests/iframe.html
index d3189f9..93f40df 100644
--- a/tests/iframe.html
+++ b/tests/iframe.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>demo</title>
     <script type="text/javascript" src="../dist/dygraph.js"></script>
 
diff --git a/tests/independent-series.html b/tests/independent-series.html
index 1a2153f..b9f07bf 100644
--- a/tests/independent-series.html
+++ b/tests/independent-series.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Independent Series</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/interaction.html b/tests/interaction.html
index 8b64843..6d35238 100644
--- a/tests/interaction.html
+++ b/tests/interaction.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>interaction model</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/is-zoomed-ignore-programmatic-zoom.html b/tests/is-zoomed-ignore-programmatic-zoom.html
index 134dec9..cffc8be 100644
--- a/tests/is-zoomed-ignore-programmatic-zoom.html
+++ b/tests/is-zoomed-ignore-programmatic-zoom.html
@@ -1,5 +1,6 @@
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>isZoomedIgnoreProgrammaticZoom Flag</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/is-zoomed.html b/tests/is-zoomed.html
index e3d72ce..1becb2e 100644
--- a/tests/is-zoomed.html
+++ b/tests/is-zoomed.html
@@ -1,5 +1,6 @@
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>isZoomedIgnoresProgrammaticZoom Flag</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/isolated-points.html b/tests/isolated-points.html
index 6b8e7d4..045fbad 100644
--- a/tests/isolated-points.html
+++ b/tests/isolated-points.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>isolated points</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/label-div.html b/tests/label-div.html
index 47f1199..b3cd9b6 100644
--- a/tests/label-div.html
+++ b/tests/label-div.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>label-div</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/labelsDateUTC.html b/tests/labelsDateUTC.html
index fe26753..27b7101 100644
--- a/tests/labelsDateUTC.html
+++ b/tests/labelsDateUTC.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>UTC date labels</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/labelsKMB.html b/tests/labelsKMB.html
index 3b44160..fc125c8 100644
--- a/tests/labelsKMB.html
+++ b/tests/labelsKMB.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>labelsKMB</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/layout-options.html b/tests/layout-options.html
index 1051976..c4f7ce7 100644
--- a/tests/layout-options.html
+++ b/tests/layout-options.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Layout Options</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/legend-formatter.html b/tests/legend-formatter.html
index 10b7c94..b1c506a 100644
--- a/tests/legend-formatter.html
+++ b/tests/legend-formatter.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+    <link rel="stylesheet" href="../css/dygraph.css">
 <title>legendFormatter</title>
 <style>
 #demodiv {
diff --git a/tests/legend-values.html b/tests/legend-values.html
index c5eec30..da61c0a 100644
--- a/tests/legend-values.html
+++ b/tests/legend-values.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Label styles</title>
     <!--
     For production (minified) code, use:
@@ -17,6 +18,7 @@
         border-radius: 10px;
         box-shadow: 4px 4px 4px #888;
         pointer-events: none;
+        width: 100px;
       }
       pre {
         margin-top: 30px;
@@ -52,7 +54,6 @@
       var baseOpts = {
         rollPeriod: 14,
         errorBars: true,
-        labelsDivWidth: 100,
         labelsSeparateLines: true
       };
 
diff --git a/tests/linear-regression-addseries.html b/tests/linear-regression-addseries.html
index f5becaf..2efffb1 100644
--- a/tests/linear-regression-addseries.html
+++ b/tests/linear-regression-addseries.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Linear Regression</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/linear-regression-fractions.html b/tests/linear-regression-fractions.html
index a2306bb..54c299a 100644
--- a/tests/linear-regression-fractions.html
+++ b/tests/linear-regression-fractions.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Linear Regression</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/linear-regression.html b/tests/linear-regression.html
index 5caae90..873e7ca 100644
--- a/tests/linear-regression.html
+++ b/tests/linear-regression.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Linear Regression</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/link-interaction.html b/tests/link-interaction.html
index 93a0bab..c49ac42 100644
--- a/tests/link-interaction.html
+++ b/tests/link-interaction.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>noise</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/logscale.html b/tests/logscale.html
index fda64dd..ca21b92 100644
--- a/tests/logscale.html
+++ b/tests/logscale.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>log scale</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/missing-data.html b/tests/missing-data.html
index f337de5..3fd8d60 100644
--- a/tests/missing-data.html
+++ b/tests/missing-data.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>missing data</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/multi-scale.html b/tests/multi-scale.html
index 478111b..d49fdad 100644
--- a/tests/multi-scale.html
+++ b/tests/multi-scale.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>multi-scale</title>
     <script type="text/javascript" src="../dist/dygraph.js"></script>
     <style type="text/css">
diff --git a/tests/native-format.html b/tests/native-format.html
index 178aefc..2cf59cd 100644
--- a/tests/native-format.html
+++ b/tests/native-format.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Native Format</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/negative.html b/tests/negative.html
index 8a2ad22..e3baf20 100644
--- a/tests/negative.html
+++ b/tests/negative.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>negatives</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/no-range.html b/tests/no-range.html
index 2984c50..e05a40c 100644
--- a/tests/no-range.html
+++ b/tests/no-range.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>no range</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/no-visibility.html b/tests/no-visibility.html
index f01bf3f..b253433 100644
--- a/tests/no-visibility.html
+++ b/tests/no-visibility.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>no-visibility</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/number-format.html b/tests/number-format.html
index c81896d..3f604d2 100644
--- a/tests/number-format.html
+++ b/tests/number-format.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Test of number formatting</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/numeric-axis.html b/tests/numeric-axis.html
index 5c6ebb5..a864f6b 100644
--- a/tests/numeric-axis.html
+++ b/tests/numeric-axis.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>numeric axis</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/numeric-gviz.html b/tests/numeric-gviz.html
index 800680d..fbffd50 100644
--- a/tests/numeric-gviz.html
+++ b/tests/numeric-gviz.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>numeric gviz</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/out-of-order.html b/tests/out-of-order.html
index 153856a..c3e6741 100644
--- a/tests/out-of-order.html
+++ b/tests/out-of-order.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>out of order</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/per-series.html b/tests/per-series.html
index 60448ba..a35f767 100644
--- a/tests/per-series.html
+++ b/tests/per-series.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Per-Series Properties</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/perf.html b/tests/perf.html
index 20bca86..739d224 100644
--- a/tests/perf.html
+++ b/tests/perf.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>perf</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/plotter.html b/tests/plotter.html
index 38a76f8..e49032a 100644
--- a/tests/plotter.html
+++ b/tests/plotter.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>dygraphs Equation Plotter</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/plotters.html b/tests/plotters.html
index 6ece182..b56ca1f 100644
--- a/tests/plotters.html
+++ b/tests/plotters.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Plotters demo</title>
     <script type="text/javascript" src="../dist/dygraph.js"></script>
 
diff --git a/tests/plugins.html b/tests/plugins.html
index 92cd104..f7610bd 100644
--- a/tests/plugins.html
+++ b/tests/plugins.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>plugins demo</title>
     <script type="text/javascript" src="../dist/dygraph.js"></script>
 
diff --git a/tests/range-selector.html b/tests/range-selector.html
index b257fe4..ac8e752 100644
--- a/tests/range-selector.html
+++ b/tests/range-selector.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Temperatures with Range Selector</title>
     <!--
     For production (minified) code, use:
@@ -17,6 +18,21 @@
       background-color: #101015;
       color: white;
     }
+    #darkbg1 .dygraph-axis-label, #darkbg2 .dygraph-axis-label {
+      color: white;
+    }
+    #noroll .dygraph-legend,
+    #roll14 .dygraph-legend,
+    #darkbg1 .dygraph-legend,
+    #darkbg2 .dygraph-legend {
+      text-align: right;
+    }
+    #darkbg1 .dygraph-legend {
+      background-color: #101015;
+    }
+    #darkbg2 .dygraph-legend {
+      background-color: #101015;
+    }
     </style>
   </head>
   <body>
@@ -61,7 +77,6 @@
             title: 'Daily Temperatures in New York vs. San Francisco',
             ylabel: 'Temperature (F)',
             legend: 'always',
-            labelsDivStyles: { 'textAlign': 'right' },
             showRangeSelector: true
           }
       );
@@ -75,7 +90,6 @@
             title: 'Daily Temperatures in New York vs. San Francisco',
             ylabel: 'Temperature (F)',
             legend: 'always',
-            labelsDivStyles: { 'textAlign': 'right' },
             xAxisHeight: 14,
             showRangeSelector: true,
             rangeSelectorHeight: 80,
@@ -133,11 +147,9 @@
               title: 'Nightly Temperatures in NY vs. SF',
               ylabel: 'Temperature (F)',
               legend: 'always',
-              labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
               showRangeSelector: true,
               rangeSelectorPlotFillColor: 'MediumSlateBlue',
               rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
-              axisLabelColor: 'white',
               colorValue: 0.9,
               fillAlpha: 0.4
           }
@@ -152,10 +164,8 @@
               title: 'Nightly Temperatures in NY vs. SF',
               ylabel: 'Temperature (F)',
               legend: 'always',
-              labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
               showRangeSelector: true,
               rangeSelectorPlotFillColor: 'MediumSlateBlue',
-              axisLabelColor: 'white',
               colorValue: 0.9,
               fillAlpha: 0.4
           }
diff --git a/tests/resize.html b/tests/resize.html
index bbc120d..343aa6b 100644
--- a/tests/resize.html
+++ b/tests/resize.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>resize the window</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/reverse-y-axis.html b/tests/reverse-y-axis.html
index 253a9f7..99a7173 100644
--- a/tests/reverse-y-axis.html
+++ b/tests/reverse-y-axis.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>reverse y-axis</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/series-highlight.html b/tests/series-highlight.html
index 6abb715..8dc8d0b 100644
--- a/tests/series-highlight.html
+++ b/tests/series-highlight.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Series highlighting</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/small-range-zero.html b/tests/small-range-zero.html
index 0f202dd..4f8bf8c 100644
--- a/tests/small-range-zero.html
+++ b/tests/small-range-zero.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>no range</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/smooth-plots.html b/tests/smooth-plots.html
index 55ebb1c..e051574 100644
--- a/tests/smooth-plots.html
+++ b/tests/smooth-plots.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Plotters demo</title>
     <script type="text/javascript" src="../dist/dygraph.js"></script>
     <script type="text/javascript" src="../src/extras/smooth-plotter.js"></script>
diff --git a/tests/spacing.html b/tests/spacing.html
index 18f4e4d..8d9292b 100644
--- a/tests/spacing.html
+++ b/tests/spacing.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>spacing</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/stacked.html b/tests/stacked.html
index 65e5089..e6f6210 100644
--- a/tests/stacked.html
+++ b/tests/stacked.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>stacked</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/steps.html b/tests/steps.html
index 71de53c..e67f45d 100644
--- a/tests/steps.html
+++ b/tests/steps.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>dygraph</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/stock.html b/tests/stock.html
index 622788b..4656dd5 100644
--- a/tests/stock.html
+++ b/tests/stock.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Stock chart</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/straw-broom.html b/tests/straw-broom.html
index 0a13b69..7628f49 100644
--- a/tests/straw-broom.html
+++ b/tests/straw-broom.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Straw broom charts demo</title>
     <script type="text/javascript" src="../dist/dygraph.js"></script>
 
diff --git a/tests/styled-chart-labels.html b/tests/styled-chart-labels.html
index 07a43b9..35c0b5a 100644
--- a/tests/styled-chart-labels.html
+++ b/tests/styled-chart-labels.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>two series</title>
     <!--
     For production (minified) code, use:
@@ -29,6 +30,10 @@
       margin: 5px;
       padding: 2px;
     }
+    .dygraph-legend {
+      text-align: right;
+      background: none;
+    }
     </style>
   </head>
   <body>
@@ -50,10 +55,6 @@
               titleHeight: 32,
               ylabel: 'Temperature (F)',
               xlabel: 'Date (Ticks indicate the start of the indicated time period)',
-              labelsDivStyles: {
-                'text-align': 'right',
-                'background': 'none'
-              },
               strokeWidth: 1.5
             }
           );
@@ -66,10 +67,6 @@
               title: 'High and Low Temperatures (30-day average)',
               ylabel: 'Temperature (F)',
               xlabel: 'Date (Ticks indicate the start of the indicated time period)',
-              labelsDivStyles: {
-                'text-align': 'right',
-                'background': 'none'
-              },
               strokeWidth: 1.5
             }
           );
diff --git a/tests/synchronize.html b/tests/synchronize.html
index c14ef64..70c264b 100644
--- a/tests/synchronize.html
+++ b/tests/synchronize.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>synchronize</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/temperature-sf-ny.html b/tests/temperature-sf-ny.html
index b5cfef1..a778d77 100644
--- a/tests/temperature-sf-ny.html
+++ b/tests/temperature-sf-ny.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html> 
 <html> 
   <head> 
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Temperatures</title> 
     <!--
     For production (minified) code, use:
@@ -13,6 +14,9 @@
     #bordered {
       border: 1px solid red;
     }
+    .dygraph-legend {
+      text-align: right;
+    }
     </style> 
   </head> 
   <body> 
@@ -34,7 +38,6 @@
             title: 'Daily Temperatures in New York vs. San Francisco',
             ylabel: 'Temperature (F)',
             legend: 'always',
-            labelsDivStyles: { 'textAlign': 'right' }
           }
       );
       g2 = new Dygraph(
@@ -47,7 +50,6 @@
             title: 'Daily Temperatures in New York vs. San Francisco',
             ylabel: 'Temperature (F)',
             legend: 'always',
-            labelsDivStyles: { 'textAlign': 'right' }
           }
       );
     </script> 
diff --git a/tests/two-axes-vr.html b/tests/two-axes-vr.html
index b714b36..c1ebfb2 100644
--- a/tests/two-axes-vr.html
+++ b/tests/two-axes-vr.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Multiple y-axes with valueRange</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/two-axes.html b/tests/two-axes.html
index f652389..fa187c6 100644
--- a/tests/two-axes.html
+++ b/tests/two-axes.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Multiple y-axes</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/unboxed-spark.html b/tests/unboxed-spark.html
index 2713467..3dc8968 100644
--- a/tests/unboxed-spark.html
+++ b/tests/unboxed-spark.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>dygraphs unboxed</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/underlay-callback.html b/tests/underlay-callback.html
index 11b2764..f552b11 100644
--- a/tests/underlay-callback.html
+++ b/tests/underlay-callback.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>Custom underlay callback</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/value-axis-formatters.html b/tests/value-axis-formatters.html
index 31d61ea..caffab4 100644
--- a/tests/value-axis-formatters.html
+++ b/tests/value-axis-formatters.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>valueFormatter and axisLabelFormatter</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/visibility.html b/tests/visibility.html
index 43b73a5..53c14fe 100644
--- a/tests/visibility.html
+++ b/tests/visibility.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>visibility</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/x-axis-formatter.html b/tests/x-axis-formatter.html
index ef884e3..63b9e05 100644
--- a/tests/x-axis-formatter.html
+++ b/tests/x-axis-formatter.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>X Axis Label Formatting</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/zero-series.html b/tests/zero-series.html
index 72c4baa..100bca1 100644
--- a/tests/zero-series.html
+++ b/tests/zero-series.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>zero series</title>
     <!--
     For production (minified) code, use:
diff --git a/tests/zoom.html b/tests/zoom.html
index afc39a3..5803af6 100644
--- a/tests/zoom.html
+++ b/tests/zoom.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
     <title>zoom</title>
     <!--
     For production (minified) code, use:
-- 
2.7.4