CSS Reference
dygraphs charts are a combination of DOM elements and pixels on a
<canvas>. The parts that are DOM elements can be styled
using CSS.
As a general rule of thumb, all the text on a chart (the legend, the axis labels, the chart labels) can be styled. The data series and gridlines are drawn on the canvas and must by styled using dygraphs options.
This chart shows the CSS classes for chart labels:
The CSS classes for the chart labels are:
- Title:
.dygraph-label.dygraph-title - x-axis label:
.dygraph-label.dygraph-xlabel - y-axis label:
.dygraph-label.dygraph-ylabel - y2-axis label:
.dygraph-label.dygraph-y2label
The axis labels ("2000", "4000", "6000", … for the y-axis and "1920", "1930", "1940", … for the x-axis) also get CSS classes:
- x-axis:
.dygraph-axis-label.dygraph-axis-label-x - y-axis:
.dygraph-axis-label.dygraph-axis-label-y - y2-axis:
.dygraph-axis-label.dygraph-axis-label-y.dygraph-axis-label-y2
The legend has the .dygraph-legend class. When using highlightSeriesOpts, the selected
series' <span> gets a .highlight class. This can be used to
show only a single series in the legend.
For CSS classes and annotations, see the annotations documentation.