UNPKG

8.39 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Dygraphs — CSS reference</title>
7
8 <link rel="stylesheet" type="text/css" href=".jslibs/bootstrap.min.css" />
9 <link rel="stylesheet" type="text/css" href="dist/dygraph.css" />
10 <link rel="stylesheet" type="text/css" href="common/vextlnk.css" />
11 <link rel="stylesheet" type="text/css" href="site.css" />
12
13 <script type="text/javascript" src=".jslibs/jquery.min.js"></script>
14 <script type="text/javascript" src=".jslibs/bootstrap.min.js"></script>
15 <script type="text/javascript" src="dist/dygraph.js"></script>
16 </head>
17 <body>
18 <nav id="header" class="navbar navbar-default navbar-fixed-top">
19 <div class="container-fluid">
20 <div class="navbar-header">
21 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-responsive-collapse" aria-expanded="false">
22 <span class="sr-only">Toggle navigation</span>
23 <span class="icon-bar"></span>
24 <span class="icon-bar"></span>
25 <span class="icon-bar"></span>
26 </button>
27 <a class="navbar-brand" href="/">dygraphs</a>
28 </div><!-- /navbar-header -->
29 <div class="collapse navbar-collapse" id="navbar-responsive-collapse">
30
31 <!-- TODO(danvk): fill in relevant links here -->
32 <ul class="nav navbar-nav">
33 <li class="dropdown">
34 <a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Documentation<b class="caret"></b></a>
35 <ul id="menu0" class="dropdown-menu" role="menu" aria-labelledby="drop3">
36 <li role="presentation"><a role="menuitem" tabindex="-1" href="tutorial.html">Tutorial</a></li>
37 <li role="presentation"><a role="menuitem" tabindex="-1" href="options.html">Options Reference</a></li>
38 <li role="presentation"><a role="menuitem" tabindex="-1" href="jsdoc/symbols/Dygraph.html">API Reference</a></li>
39 <li role="presentation"><a role="menuitem" tabindex="-1" href="data.html">Data Format</a></li>
40 <li role="presentation"><a role="menuitem" tabindex="-1" href="annotations.html">Annotations</a></li>
41 <li role="presentation"><a role="menuitem" tabindex="-1" href="css.html">CSS Reference</a></li>
42 <li role="presentation"><a role="menuitem" tabindex="-1" href="versions.html">Version History</a></li>
43 <li role="separator" class="divider"></li>
44 <li role="presentation"><a role="menuitem" tabindex="-1" href="ie.html">Notes on Internet Explorer</a></li>
45 </ul>
46 </li>
47 <li class="dropdown">
48 <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Examples<b class="caret"></b></a>
49 <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
50 <li role="presentation"><a role="menuitem" tabindex="-1" href="gallery/">Demo Gallery</a></li>
51 <li role="presentation"><a role="menuitem" tabindex="-1" href="users.html">List of Users</a></li>
52 <li role="separator" class="divider"></li>
53 <li role="presentation"><a role="menuitem" tabindex="-1" href="tests/">Test Cases</a></li>
54 <li role="separator" class="divider"></li>
55 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://dygraphs.com/fiddle/">Play</a></li>
56 </ul>
57 </li>
58 <li><a class="xnavbar-link" href="download.html">Download</a></li>
59 <li class="dropdown">
60 <a class="dropdown-toggle" id="drop7" role="button" data-toggle="dropdown" href="#">Community <b class="caret"></b></a>
61 <ul id="menu4" class="dropdown-menu" role="menu" aria-labelledby="drop7">
62 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://blog.dygraphs.com/">Blog</a></li>
63 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://stackoverflow.com/questions/ask?tags=dygraphs+javascript">Ask a Question</a></li>
64 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://stackoverflow.com/questions/tagged/dygraphs">Stack Overflow</a></li>
65 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://groups.google.com/g/dygraphs-users">Mailing List</a></li>
66 </ul>
67 </li>
68 <li class="dropdown">
69 <a class="dropdown-toggle" id="drop6" role="button" data-toggle="dropdown" href="#">Contribute <b class="caret"></b></a>
70 <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
71 <li role="presentation"><a role="menuitem" tabindex="-1" href="changes.html">Contributors Guide</a></li>
72 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/danvk/dygraphs">Source (Github)</a></li>
73 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/danvk/dygraphs/issues">Issue Tracker</a></li>
74 <li role="presentation"><a role="menuitem" tabindex="-1" href="https://github.com/danvk/dygraphs/issues/new">Report a Bug</a></li>
75 </ul>
76 </li>
77 </ul><!-- /navbar-nav -->
78
79 </div><!-- /navbar-responsive-collapse -->
80 </div><!-- container-fluid -->
81 </nav>
82
83 <div class="container" id="main">
84 <div class="row">
85 <div class="col-lg-12">
86<h2>CSS Reference</h2>
87
88<p>dygraphs charts are a combination of DOM elements and pixels on a
89<code>&lt;canvas&gt;</code>. The parts that are DOM elements can be styled
90using CSS.</p>
91
92<p>As a general rule of thumb, all the text on a chart (the legend, the axis
93labels, the chart labels) can be styled. The data series and gridlines are
94drawn on the canvas and must by styled using dygraphs <a
95 href="options.html">options</a>.</p>
96
97<p>This chart shows the CSS classes for chart labels:</p>
98
99<div id="demodiv"></div>
100<script type="text/javascript"><!--//--><![CDATA[//><!--
101Dygraph.onDOMready(function onDOMready() {
102 g = new Dygraph(
103 document.getElementById("demodiv"),
104 "dow.txt",
105 {
106 customBars: true,
107 legend: 'always',
108 title: '.dygraph-label .dygraph-title',
109 xlabel: '.dygraph-label .dygraph-xlabel',
110 ylabel: '.dygraph-label .dygraph-ylabel',
111 y2label: '.dygraph-label .dygraph-y2label',
112 'series': {
113 'Real': {
114 axis: 'y2'
115 }
116 },
117 axes: {
118 y: {
119 axisLabelWidth: 75
120 },
121 y2: {
122 axisLabelWidth: 75
123 }
124 },
125 drawCallback: function() {
126 $('.dygraph-legend').text('.dygraph-legend');
127 },
128 });
129});
130//--><!]]></script>
131
132<p>The CSS classes for the chart labels are:</p>
133<ul>
134 <li>Title: <code>.dygraph-label.dygraph-title</code>
135 <li>x-axis label: <code>.dygraph-label.dygraph-xlabel</code>
136 <li>y-axis label: <code>.dygraph-label.dygraph-ylabel</code>
137 <li>y2-axis label: <code>.dygraph-label.dygraph-y2label</code>
138</ul>
139
140<p>The axis labels ("2000", "4000", "6000", … for the y-axis and "1920",
141"1930", "1940", … for the x-axis) also get CSS classes:</p>
142
143<ul>
144 <li>x-axis: <code>.dygraph-axis-label.dygraph-axis-label-x</code>
145 <li>y-axis: <code>.dygraph-axis-label.dygraph-axis-label-y</code>
146 <li>y2-axis: <code>.dygraph-axis-label.dygraph-axis-label-y.dygraph-axis-label-y2</code>
147</ul>
148
149<p>The legend has the <code>.dygraph-legend</code> class. When using <a
150 href="tests/series-highlight.html">highlightSeriesOpts</a>, the selected
151series' &lt;span&gt; gets a <code>.highlight</code> class. This can be used to
152show only a single series in the legend.</p>
153
154<p>For CSS classes and annotations, see the <a
155 href="annotations.html">annotations documentation.</a></p>
156
157 </div> <!-- .col-lg-12 -->
158 </div> <!-- /div.row -->
159</div> <!-- /div#main.container -->
160
161<!-- TODO(danvk): add a real footer -->
162<!--@@@IFIMPRINT:<div class="container" style="border:1px solid green; margin-bottom:1ex;">@@@PLACE_IMPRINT_LINK_HERE_IF_NECESSARY@@@</div>:FIIMPRINT@@@-->
163
164 </body>
165</html>