**r-bloggers on Programming with R**, and kindly contributed to R-bloggers)

Interactive Visualizations are powerful these days because those are all made for web. Web – simply a combination of `html`

,`css`

and `javascript`

which build interactive visualizations. Thus, paving way for a lot of javascript charting libraries like `highcharts.js`

, `apexcharts.js`

.

Thanks to `htmlwidgets`

of R, many R developers have started porting those javascript charting libraries to R and dreamRs is one of such leading Developer groups working on the intersection R + Web. In this post, We’ll learn how to use the R package `apexcharter`

which is developed by **dreamRs – Victor Perrier and Team** to make beautiful interactive visualizations that are based on `apexcharts.js`

### apexcharter – Intro, Installation & Loading

`apexchart.js`

is a modern JavaScript charting library to build interactive charts and visualizations with simple API. `apexcharter`

is built as a htmlwidget (R Package) for `apexchart.js`

and the API design is inspired by `highcharter`

. `apexcharter`

requires RStudio >= 1.2 to properly display charts.

Install the stable version from CRAN with:

`install.packages("apexcharter")`

Or install the development version from GitHub with:

```
# install.packages("devtools")
devtools::install_github("dreamRs/apexcharter")
```

Once successfully installed, `apexcharter`

can be loaded using

`library(apexcharter)`

### Simple Example

The main function of `apexcharter`

is the `apex()`

function whose first argument is `data`

. Thus, enabling the support of pipe `%>%`

operator. The second argument is `mapping`

– aesthetics (x & y) and the third one is `type`

of the chart – which takes multiple values like `scatter`

, `bar`

, `line`

and much more.

Let’s take R’s in-built `mtcars`

dataset and draw a simple bar chart.

```
library(apexcharter)
library(tidyverse)
mtcars %>%
count(cyl) %>%
apex(type = "bar",
mapping = aes(x = "cyl", y = n))
```

Now, that’s a beautiful interctive chart. Let’s go ahead and see a few more examples of something bigger than a simple bar chart.

### Building Interactive Heatmap / Correlation Plot

Let’s try to visualize a Heatmap (of Correlation Plot) of numeric columns of `mtcars`

dataset. To do that, we’ve to first select the numeric columns which we’ll do with `select_if(is.numeric)`

and then we’ve to build the correlation matrix which the base-R function `cor()`

does it smoothly.

Now that we’ve got a `matrix`

let’s convert it to a `data.frame`

and for us to draw a heatmap – we need 3 things primarily:

- x-axis – categorical
- y-axis – categorical
- fill value – continuous

So, we’ll convert the rownames of the resultant dataframe to a column and then convert the wide format data into long format using `pivot_longer()`

.

At this point our data is in the desirable format for a heatmap. Simply for aesthetics improvement, let’s round off the correlation values.

Finally, we’ll use our `apex()`

function with `type = 'heatmap'`

that gives us a color-filled heatmap (that’s also interactive).

```
library(apexcharter)
library(tidyverse)
mtcars %>%
select_if(is.numeric) %>%
cor() %>%
as.data.frame() %>%
rownames_to_column("col") %>%
pivot_longer(cols = -col, names_to = "type") %>%
mutate(value = round(value,2)) %>%
apex(type = "heatmap",
mapping = aes(x = col, y = type, fill = value))
```

### Building Interactive Time-Series (Line) Graph

If there’s a plot where Interactive Charts are incredibly valuable, I think it’s Time-Series Graph where labelling on traditional (static) chart would sometimes make the chart clunky and less readable.

Let’s build an Interactive Time-series plot with the `apexcharter`

library. As you can see below, all it takes is a dataframe with a column denoting the `time`

field and another column with the actual `value`

for that time.

```
library(apexcharter)
df <- data.frame(Y=as.matrix(EuStockMarkets), date=time(EuStockMarkets))
df %>%
apex(type = "line",
mapping = aes(x = date, y = Y.DAX))
```

### Summary

Thus, We learnt how to build interactive charts using `apexcharter`

that follows a very minimal API similar to `highcharter`

.

### References

**leave a comment**for the author, please follow the link and comment on their blog:

**r-bloggers on Programming with R**.

R-bloggers.com offers

**daily e-mail updates**about R news and tutorials on topics such as: Data science, Big Data, R jobs, visualization (ggplot2, Boxplots, maps, animation), programming (RStudio, Sweave, LaTeX, SQL, Eclipse, git, hadoop, Web Scraping) statistics (regression, PCA, time series, trading) and more...