Introduction

Series Options

Series Colors

You can specify an altrnate color palette for series lines using the colors option. For example, to choose a palette from RColorBrewer

Step Plots

By default dygraphs series as a line, you can however plot series as step chart as follows:

Filling

You can also fill in the area underneath the series as well as customize the alpha value for filling

dygraph(ldeaths,main="Daths from Lung disease (UK)")%>%dyOptions(fillGraph=TRUE,fillAlpha = 0.4)

##Point Display

You can include displays ofthe individual points in a series as well as customize the size of the point

The possible parameters for pointShape are: triangle,square,diamond,pentagon,hexagon,circle,star,plus or ex

Per-Series Options

All of the options above can also be set on per-series basis using the dySeries function. For example:

dygraph(lungDeaths,main="Deaths from Lung Disease (UK)")%>%dySeries("mdeaths",drawPoints = TRUE,pointShape = "square",color = "blue")%>%dySeries("fdeaths",stepPlot = TRUE,fillGraph = TRUE,color="red")

Line Strokes

You can also customize the way that series lines are drawn. Here we draw a wider line with a custom stroke pattern (dahsed line):

dyGroup

With dyGroup you can replicate options across multiple series or pass a vector of values and have it replicate across the series. If arguments differ in length than the number of series named, then the argument will be cycled across the named series.

Series Highlighting

When users hover their mouse over series and points on the graph a highlight effect appears on the surface of the graph. You can use dyHighlight function to customize how the highlighting appears

In this example we specify a larger circle size for point highlighting as well as more decisively fade the non-highlighted series. We also request that the highlighting persist even after the mouse leaves the graph area.

You can also set additional visual options for the highlightedseries using highlightSeriesOpts. This argument takes a list a named series options to apply to just the currently highted series

Axis Options

You can customize the display of axes using the dyOptions function (for global options) and dyAxis function (for per-axis options). Here’s an example that uses both:

dygraph(nhtemp,main = "New Haven Temperatures")%>% dyAxis("y",label="Temp (F)")%>%dyOptions(axisLineWidth=1.5,fillGraph=TRUE,drawGrid=FALSE)

The valueRange is used to set a specific range for the y-axis
The axisLineWidth option specifies a slightly widerpixel width for axis lines
The fillGraph option specifies that y values should be filled vertically
The drawGrid option turns off the grid for both axies (we’ll demonstrate doing this on a per axis basis below)

Here’s another example that customizes some other axes properties:

dygraph(AirPassengers,main="Airline Passengers/ Month")%>% dyAxis("x",drawGrid = FALSE)%>% dyAxis("y",label="Passengers (Thousands)")%>%dyOptions(includeZero=TRUE,axisLineColor = "navy",gridLineColor = "lightblue")

## Second Y Axis

If you are plotting multiple series that have distinct value typesyou can add a second Y-axis to show a distinct value scale. This is done by setting the indepentTicks option for the y2 axis and then assigning one or more series to the y2 axis. For example:

Independent Ticks

The independentTicks option can be used to determine which axis is primary (and therefore which axis grid line are aligned with). In order to display the secondary axis scale at least one of the two axes must specify independentTicks = TRUE. Possible combinations include:

y=TRUE, y2=FALSE (default): y is the primary axis and the y2 ticks are aligned to the the ones of y. (only 1 grid)

y=FALSE, y2=TRUE: y2 is the primary axis and the y ticks are aligned to the the ones of y2. (only 1 grid)

y=TRUE, y2=TRUE: Both axis are independent and have their own ticks. (2 grids)

In this example we specify that the y2 axis has independent ticks (resulting in a more natural value scale for the axis labels). We also add a label to each Y axis.

#Labels & Legends

Labels

You can add labels to a dygraph using the main, ylab and xlab arguments. For example:

##Legends

There are several options available for customizing the appearance and behavior of the plot legend. By default the legend always appears when there are multiple series and only appears on mouseover when there is a single series. By default the legend shows point values when the mouse is over the graph but not when the mouse leaves.

Here we override both of these defaults ensuring that the legend is always visible and that point values are still displayed even after the mouse leaves the plot:

Here we enable “follow” mode which will show the legend overlaid on the plot (near the mouse) only when the mouse is over a point:

Candlestick Charts (stock exchange)

## Loading required package: zoo

## 
## Attaching package: 'zoo'

## The following objects are masked from 'package:base':
## 
##     as.Date, as.Date.numeric

## 
## Attaching package: 'xts'

## The following objects are masked from 'package:dplyr':
## 
##     first, last

Candlestick charts use the first four data series to plot, the rest of the data series (if any) are rendered with line plotter:

You can also use compress function argument to compress chart data annually, quarterly, monthly, weekly or daily depending on the current chart zoom level to prevent chart bars overflow:

Synchronization

You can link the zoom behavior of multiple dygraphs by specifying a group when creating the graph. For example, the following code links the three graphs below. Try zooming one chart (done by mouse-selection) and note that the zoom range of the other graphs is also updated.

Annotation & Shading

Annotations

You can add annotations to individual points within a plot. To minimize their visual footprint annotations are typically short abbreviations (e.g. “A”, “B”, “C”) which are elaborated upon in a tooltip or with adjacent explanatory text.

For example, in the following graph we annotate the dates which saw the first deployment of US combat troops to Korea and Vietnam:

Shading

You can add a shading effect to the graph background for one or more time ranges. This is useful for highlighting periods of time with special properties (e.g. holding periods for securities).

For example, the following code adds a shading effect to the 1920’s and 1940’s for the New Haven Temperatures graph:

Color

dg pckg

NguyenLSCM