When charts are integrated in the web page

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:

library(tidyverse)
library(jsonlite)
library(lubridate)
library(highcharter)

data <- jsonlite::read_json("https://data.jsdelivr.com/v1/package/npm/highcharts/stats/month")

# str(data)

data <- data$versions %>%
  map( ~ .x$dates) %>%
  enframe() %>%
  mutate(value = map(value, enframe)) %>%
  unnest() %>%
  mutate(
    value = map_dbl(value, identity),
    name1 = ymd(name1)
    )

data

# A tibble: 3,510 × 3
   name   name1      value
   <chr>  <date>     <dbl>
 1 0.0.11 2026-08-04     0
 2 0.0.11 2026-08-05     0
 3 0.0.11 2026-08-06     0
 4 0.0.11 2026-08-07     0
 5 0.0.11 2026-08-08     0
 6 0.0.11 2026-08-09     0
 7 0.0.11 2026-08-10     0
 8 0.0.11 2026-08-11     0
 9 0.0.11 2026-08-12     0
10 0.0.11 2026-08-13     0
# ℹ 3,500 more rows

We’ll group the data by day:

datag <- data %>%
  group_by(name1) %>%
  summarise(value = sum(value)) %>% 
  rename(
    date = name1,
    downloads = value
  )

datag

# A tibble: 30 × 2
   date       downloads
   <date>         <dbl>
 1 2026-08-04   1705932
 2 2026-08-05   1684553
 3 2026-08-06   1594692
 4 2026-08-07   1517337
 5 2026-08-08   1696542
 6 2026-08-09   1077763
 7 2026-08-10   1597830
 8 2026-08-11   1671503
 9 2026-08-12   1578702
10 2026-08-13   1573358
# ℹ 20 more rows

And we’re ready to our first try:

hc <- hchart(datag, "line", hcaes(date, downloads))
hc

Just According to Keikaku

Now, there are some changes we need to do:

Change line to area spline.
Put every axis in the opposite side.
Clean the axis and use a bigger font size.
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.

color_theme <- "#E76235" # extracted with chrome extension

hchart(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)