I saw a chart yesterday, a chart without frame, without title or captions just a very hidden chart at bottom of the web page. It will be a nice time to get the most interesting visual features of it.
data-visualization
highcharts
Author
Joshua Kunst Fuentes
Published
April 8, 2019
I was searching for a CDN at jsdelivr.com and I noticed a chart showing download per days:
Why I like this chart? Because is a chart integrated with the web site using all space and soft colors to not call the attention. A very special chart.
Now we’ll try to replicate :). That’s why we’re are here. Let’s download the data:
Remove the lables and reduce number of axis ticks.
A lot of tweaks!
And the most important step in this chart: use all the space, reducing the margins and move the x-axis labels to the inner side. Using the l-screen option in distill package.
Code
color_theme<-"#E76235"# extracted with chrome extensionhchart(datag, "areaspline", hcaes(date, downloads), name ="Downloads")%>%hc_xAxis( title =list(text =NULL), opposite =TRUE, gridLineWidth =1, gridLineColor =color_theme, # vertical lines tickColor =color_theme, lineColor ="transparent", # horizontal line, labels =list(style =list(color =color_theme, fontSize ="16px")), tickInterval =8*24*3600*1000# interval of 1 day (in your case = 60))%>%hc_yAxis( title =list(text =""), opposite =TRUE, gridLineColor ="transparent", showFirstLabel =FALSE, labels =list( style =list(color =color_theme, fontSize ="16px"), align ="left", x =-100))%>%hc_plotOptions( series =list( color =color_theme, fillColor =hex_to_rgba(color_theme, 0.20), marker =list(enabled =FALSE)))%>%hc_chart( spacingBottom =0, spacingLeft =-6, spacingRight =-55# just plying to get these numbers)%>%hc_size(height =300)
@online{kunstfuentes2019,
author = {Joshua Kunst Fuentes},
title = {When Charts Are Integrated in the Web Page},
date = {2019-04-08},
url = {https://jkunst.com/blog/posts/2019-04-08-when-charts-are-integrated-in-the-web-page},
langid = {en}
}