docs/css.html

   1 <!--#include virtual="header.html" -->
   2
   3 <h2>CSS Reference</h2>
   4
   5 <p>dygraphs charts are a combination of DOM elements and pixels on a
   6 <code>&lt;canvas&gt;</code>. The parts that are DOM elements can be styled
   7 using CSS.</p>
   8
   9 <p>As a general rule of thumb, all the text on a chart (the legend, the axis
  10 labels, the chart labels) can be styled. The data series and gridlines are
  11 drawn on the canvas and must by styled using dygraphs <a
  12   href="options.html">options</a>.</p>
  13
  14 <p>This chart shows the CSS classes for chart labels:</p>
  15
  16 <div id="demodiv"></div>
  17 <script type="text/javascript">
  18   g = new Dygraph(
  19       document.getElementById("demodiv"),
  20       "dow.txt",
  21       {
  22         customBars: true,
  23         legend: 'always',
  24         title: '.dygraph-label .dygraph-title',
  25         xlabel: '.dygraph-label .dygraph-xlabel',
  26         ylabel: '.dygraph-label .dygraph-ylabel',
  27         y2label: '.dygraph-label .dygraph-y2label',
  28         'series': {
  29           'Real': {
  30             axis: 'y2'
  31           }
  32         },
  33         yAxisLabelWidth: 70,
  34         drawCallback: function() {
  35           $('.dygraph-legend').text('.dygraph-legend');
  36         },
  37       });
  38 </script>
  39
  40 <p>The CSS classes for the chart labels are:</p>
  41 <ul>
  42   <li>Title: <code>.dygraph-label.dygraph-title</code>
  43   <li>x-axis label: <code>.dygraph-label.dygraph-xlabel</code>
  44   <li>y-axis label: <code>.dygraph-label.dygraph-ylabel</code>
  45   <li>y2-axis label: <code>.dygraph-label.dygraph-y2label</code>
  46 </ul>
  47
  48 <p>The axis labels ("2000", "4000", "6000", &hellip; for the y-axis and "1920",
  49 "1930", "1940", &hellip; for the x-axis) also get CSS classes:</p>
  50
  51 <ul>
  52   <li>x-axis: <code>.dygraph-axis-label.dygraph-axis-label-x</code>
  53   <li>y-axis: <code>.dygraph-axis-label.dygraph-axis-label-y</code>
  54   <li>y2-axis: <code>.dygraph-axis-label.dygraph-axis-label-y.dygraph-axis-label-y2</code>
  55 </ul>
  56
  57 <p>The legend has the <code>.dygraph-legend</code> class. When using <a
  58   href="tests/series-highlight.html">highlightSeriesOpts</a>, the selected
  59 series' &lt;span&gt; gets a <code>.highlight</code> class. This can be used to
  60 show only a single series in the legend.</p>
  61
  62 <p>For CSS classes and annotations, see the <a
  63   href="annotations.html">annotations documentation.</a></p>
  64
  65 <!--#include virtual="footer.html" -->