echarts4r

Creating interactive web charts in R

By Irene van den Broek in R Packages Interactive charts

August 1, 2020

From the various html widgets (R packages that interface with JavaScript visualization libraries), I immediately fell for the the {echarts4r} package created by John Coene, because of the detailed documentation, the numerous and simple code examples, and the wide variety of possible chart types. I gave it a try and relatively easily created several interactive charts with this intuitive and versatile R package!

Gauges and horizontal bar charts

The gauges represent my total Sleep, Activity and Readiness Scores and are created with the e_gauge() function. To get multiple gauges in a single chart, you need to specify the center and radius for each gauge individually. Using the e_grid() function, you can adjust the sizes of the figure and margins.

The individual scores used to calculate the total Sleep, Activity and Readiness Scores are visualized in bar charts created with the e_bar() function. The bar charts are easily flipped horizontally using the e_flips_coords() function, whereas the e_visual_map() function is used to highlight the scores below 60%.

Pie and Donut charts

The pie and donut charts are created with the e_pie() function, using e_color() to define the colors and e_tooltip() to define the text that appears when hoovering over the visual. A donut chart is easily achieved by setting the inner radius of the radius argument within the e_pie() function.

Stacked bar charts

The stacked bar charts are created by multiple calls of the e_bar() functions. With e_datazoom() a zoom panel is added that enables to zoom in along the entire time serie. Thee_legend() function was useful to adjust the legend.

Line charts with normal ranges

The e_bar() function was also applied to create the bar charts below, showing the daily trends of HRV during sleep and step counts. With the e_line() function, a line showing the 7-day rolling average was added. To adjust the colors of the bars that were either 1 standard deviation below or above the 7-day rolling average, the e_band2() in combination with the e_add_nested() functions were helpful. The labels for the mean and 7-day rolling mean were added using the e_mark_point() function.

Heatmap calendar

The e_calendar() function quickly creates a heatmap in the shape of a calendar. The colors were defined using the e_visual_map() function.

Conclusion

Whenever I wondered “Could I do, modify or add this?”, the answer always was “Yes, you can!”. Often by simply looking at the code examples on the echarts4r website, but otherwise by searching the extensive JavaScript echarts documentation. Luckily, {echarts4r} seemed to have an easy wrapper function for most (if not all) chart types. And when I couldn’t find a wrapper function, I could typically replace the : or {...} in the JavaScript example with = or list(...) in my R code and voilà…it worked!

Posted on:
August 1, 2020
Length:
19 minute read, 3865 words
Categories:
R Packages Interactive charts
Tags:
Oura Ring echarts4r
See Also:
Ōura Ring
Reactable and reactablefmtr