Filled Area Plots in R
How to make a filled area plot in R. An area chart displays a solid color between the traces of a graph.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
Basic Filled Area Plot
To make an area plot with interior filling set fill
to "tozeroy"
in the call for the second trace.
For more informations and options about the fill
option checkout https://plotly.com/r/reference/#scatter-fill
library(plotly)
density <- density(diamonds$carat)
fig <- plot_ly(x = ~density$x, y = ~density$y, type = 'scatter', mode = 'lines', fill = 'tozeroy')
fig <- fig %>% layout(xaxis = list(title = 'Carat'),
yaxis = list(title = 'Density'))
fig
Click to copy
Filled Area Plot with Multiple Traces
To make a filled area plot set fill
to "tozeroy"
.
library(plotly)
diamonds1 <- diamonds[which(diamonds$cut == "Fair"),]
density1 <- density(diamonds1$carat)
diamonds2 <- diamonds[which(diamonds$cut == "Ideal"),]
density2 <- density(diamonds2$carat)
fig <- plot_ly(x = ~density1$x, y = ~density1$y, type = 'scatter', mode = 'lines', name = 'Fair cut', fill = 'tozeroy')
fig <- fig %>% add_trace(x = ~density2$x, y = ~density2$y, name = 'Ideal cut', fill = 'tozeroy')
fig <- fig %>% layout(xaxis = list(title = 'Carat'),
yaxis = list(title = 'Density'))
fig
Click to copy
Selecting Hover Points
library(plotly)
fig <- plot_ly()
fig <- fig %>% add_trace(
x = c(0,0.5,1,1.5,2),
y = c(0,1,2,1,0),
type = 'scatter',
fill = 'toself',
fillcolor = '#ab63fa',
hoveron = 'points+fills',
marker = list(
color = '#ab63fa'
),
line = list(
color = '#ab63fa'
),
text = "Points + Fills",
hoverinfo = 'text'
)
fig <- fig %>% add_trace(
x = c(3,3.5,4,4.5,5),
y = c(0,1,2,1,0),
type = 'scatter',
fill = 'toself',
fillcolor = '#e763fa',
hoveron = 'points',
marker = list(
color = '#e763fa'
),
line = list(
color = '#e763fa'
),
text = "Points only",
hoverinfo = 'text'
)
fig <- fig %>% layout(
title = "hover on <i>points</i> or <i>fill</i>",
xaxis = list(
range = c(0,5.2)
),
yaxis = list(
range = c(0,3)
)
)
fig
Click to copy
Custom Colors
library(plotly)
diamonds1 <- diamonds[which(diamonds$cut == "Fair"),]
density1 <- density(diamonds1$carat)
diamonds2 <- diamonds[which(diamonds$cut == "Ideal"),]
density2 <- density(diamonds2$carat)
fig <- plot_ly(x = ~density1$x, y = ~density1$y, type = 'scatter', mode = 'lines', name = 'Fair cut', fill = 'tozeroy',
fillcolor = 'rgba(168, 216, 234, 0.5)',
line = list(width = 0.5))
fig <- fig %>% add_trace(x = ~density2$x, y = ~density2$y, name = 'Ideal cut', fill = 'tozeroy',
fillcolor = 'rgba(255, 212, 96, 0.5)')
fig <- fig %>% layout(xaxis = list(title = 'Carat'),
yaxis = list(title = 'Density'))
fig
Click to copy
Area Plot without Lines
To make an area plot without lines set mode
to "none"
.
library(plotly)
diamonds1 <- diamonds[which(diamonds$cut == "Fair"),]
density1 <- density(diamonds1$carat)
diamonds2 <- diamonds[which(diamonds$cut == "Ideal"),]
density2 <- density(diamonds2$carat)
fig <- plot_ly(x = ~density1$x, y = ~density1$y, type = 'scatter', mode = 'none', name = 'Fair cut', fill = 'tozeroy',
fillcolor = 'rgba(168, 216, 234, 0.5)')
fig <- fig %>% add_trace(x = ~density2$x, y = ~density2$y, name = 'Ideal cut', fill = 'tozeroy',
fillcolor = 'rgba(255, 212, 96, 0.5)')
fig <- fig %>% layout(xaxis = list(title = 'Carat'),
yaxis = list(title = 'Density'))
fig
Click to copy
Interior Filling for Area Chart
To make an area plot with interior filling set fill
to "tonexty"
in the call for the second trace.
For more informations and options about the fill
option checkout https://plotly.com/r/reference/#scatter-fill
library(plotly)
month <- c('January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December')
high_2014 <- c(28.8, 28.5, 37.0, 56.8, 69.7, 79.7, 78.5, 77.8, 74.1, 62.6, 45.3, 39.9)
low_2014 <- c(12.7, 14.3, 18.6, 35.5, 49.9, 58.0, 60.0, 58.6, 51.7, 45.2, 32.2, 29.1)
data <- data.frame(month, high_2014, low_2014)
data$average_2014 <- rowMeans(data[,c("high_2014", "low_2014")])
#The default order will be alphabetized unless specified as below:
data$month <- factor(data$month, levels = data[["month"]])
fig <- plot_ly(data, x = ~month, y = ~high_2014, type = 'scatter', mode = 'lines',
line = list(color = 'rgba(0,100,80,1)'),
showlegend = FALSE, name = 'High 2014')
fig <- fig %>% add_trace(y = ~low_2014, type = 'scatter', mode = 'lines',
fill = 'tonexty', fillcolor='rgba(0,100,80,0.2)', line = list(color = 'rgba(0,100,80,1)'),
showlegend = FALSE, name = 'Low 2014')
fig <- fig %>% layout(title = "High and Low Temperatures in New York",
paper_bgcolor='rgb(255,255,255)', plot_bgcolor='rgb(229,229,229)',
xaxis = list(title = "Months",
gridcolor = 'rgb(255,255,255)',
showgrid = TRUE,
showline = FALSE,
showticklabels = TRUE,
tickcolor = 'rgb(127,127,127)',
ticks = 'outside',
zeroline = FALSE),
yaxis = list(title = "Temperature (degrees F)",
gridcolor = 'rgb(255,255,255)',
showgrid = TRUE,
showline = FALSE,
showticklabels = TRUE,
tickcolor = 'rgb(127,127,127)',
ticks = 'outside',
zeroline = FALSE))
fig
Click to copy
Stacked Area Chart with Original Values
library(plotly)
data <- t(USPersonalExpenditure)
data <- data.frame("year"=rownames(data), data)
fig <- plot_ly(data, x = ~year, y = ~Food.and.Tobacco, name = 'Food and Tobacco', type = 'scatter', mode = 'none', stackgroup = 'one', fillcolor = '#F5FF8D')
fig <- fig %>% add_trace(y = ~Household.Operation, name = 'Household Operation', fillcolor = '#50CB86')
fig <- fig %>% add_trace(y = ~Medical.and.Health, name = 'Medical and Health', fillcolor = '#4C74C9')
fig <- fig %>% add_trace(y = ~Personal.Care, name = 'Personal Care', fillcolor = '#700961')
fig <- fig %>% add_trace(y = ~Private.Education, name = 'Private Education', fillcolor = '#312F44')
fig <- fig %>% layout(title = 'United States Personal Expenditures by Categories',
xaxis = list(title = "",
showgrid = FALSE),
yaxis = list(title = "Expenditures (in billions of dollars)",
showgrid = FALSE))
fig
Click to copy
Stacked Area Chart with Cumulative Values
library(plotly)
data <- t(USPersonalExpenditure)
data <- data.frame("year"=rownames(data), data)
fig <- plot_ly(data, x = ~year, y = ~Food.and.Tobacco, name = 'Food and Tobacco', type = 'scatter', mode = 'none', stackgroup = 'one', groupnorm = 'percent', fillcolor = '#F5FF8D')
fig <- fig %>% add_trace(y = ~Household.Operation, name = 'Household Operation', fillcolor = '#50CB86')
fig <- fig %>% add_trace(y = ~Medical.and.Health, name = 'Medical and Health', fillcolor = '#4C74C9')
fig <- fig %>% add_trace(y = ~Personal.Care, name = 'Personal Care', fillcolor = '#700961')
fig <- fig %>% add_trace(y = ~Private.Education, name = 'Private Education', fillcolor = '#312F44')
fig <- fig %>% layout(title = 'United States Personal Expenditures by Categories',
xaxis = list(title = "",
showgrid = FALSE),
yaxis = list(title = "Proportion from the Total Expenditures",
showgrid = FALSE,
ticksuffix = '%'))
fig
Click to copy
Reference
See https://plotly.com/r/reference/#area for more information and chart attribute options!
What About Dash?
Dash for R is an open-source framework for building analytical applications, with no Javascript required, and it is tightly integrated with the Plotly graphing library.
Learn about how to install Dash for R at https://dashr.plot.ly/installation.
Everywhere in this page that you see fig
, you can display the same figure in a Dash for R application by passing it to the figure
argument of the Graph
component from the built-in dashCoreComponents
package like this:
library(plotly)
fig <- plot_ly()
# fig <- fig %>% add_trace( ... )
# fig <- fig %>% layout( ... )
library(dash)
library(dashCoreComponents)
library(dashHtmlComponents)
app <- Dash$new()
app$layout(
htmlDiv(
list(
dccGraph(figure=fig)
)
)
)
app$run_server(debug=TRUE, dev_tools_hot_reload=FALSE)
Click to copy