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.