Skip to content

CSS Styling

Source: vignettes/articles/gallery-css-styling.Rmd
gallery-css-styling.Rmd

CSS Classes

You can use CSS to customize the typefaces used in dygraph labels. In this example we’ll use CSS to make the main label bold and to reduce the size of the typefaces used on the axes:

.dygraph-title {
  color: navy;
  font-weight: bold;
}
.dygraph-axis-label {
  font-size: 11px;
}
dygraph(nhtemp, main = "New Haven Temperatures") |>
  dyCSS("dygraph.css")

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 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.

The full reference to the various CSS classes used throughout a dygraph is here: http://dygraphs.com/css.html.

Applying Styles Globally

If you are creating an R Markdown document or Shiny application, you may want to apply your dygraphs CSS globally to the page or application rather than attaching it to each plot. See these links for documentation on how to do this: