<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4="crossorigin="anonymous"></script><!-- Font --><linkhref="../css/montserrat.css"rel="stylesheet">
<scriptsrc="../bootstrap-toc.js"></script><!-- Font Awesome icons --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk="crossorigin="anonymous">
<!-- Font Awesome icons --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css"integrity="sha256-nAmazAk6vS34Xqo0BSrTb+abbtFlgsFK7NKSi6o7Y78="crossorigin="anonymous">
<p>The objective of this vignette is to show how to quickly build data visualizations with the ApexCharts JavaScript library, as well as to give an overview of the different graphics available.</p>
<p>Data used are from <code>ggplot2</code> package, data manipulation will be done with the <code>dplyr</code> package.</p>
<spanclass="fu"><ahref="../reference/apex.html">apex</a></span><spanclass="op">(</span>data <spanclass="op">=</span><spanclass="va">n_manufac</span>, type <spanclass="op">=</span><spanclass="st">"column"</span>, mapping <spanclass="op">=</span><spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">manufacturer</span>, y <spanclass="op">=</span><spanclass="va">n</span><spanclass="op">)</span><spanclass="op">)</span></code></pre></div>
<scripttype="application/json"data-for="htmlwidget-13e40c70b49841b67909">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","type":"bar","data":[{"x":"audi","y":18},{"x":"chevrolet","y":19},{"x":"dodge","y":37},{"x":"ford","y":25},{"x":"honda","y":9},{"x":"hyundai","y":14},{"x":"jeep","y":8},{"x":"land rover","y":4},{"x":"lincoln","y":3},{"x":"mercury","y":4},{"x":"nissan","y":13},{"x":"pontiac","y":5},{"x":"subaru","y":14},{"x":"toyota","y":34},{"x":"volkswagen","y":27}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"audi","max":"volkswagen"},"type":"column"},"evals":[],"jsHooks":[]}</script><p>Flipping coordinates can be done by using <code>type = "bar"</code>:</p>
<codeclass="sourceCode R"><spanclass="fu"><ahref="../reference/apex.html">apex</a></span><spanclass="op">(</span>data <spanclass="op">=</span><spanclass="va">n_manufac</span>, type <spanclass="op">=</span><spanclass="st">"bar"</span>, mapping <spanclass="op">=</span><spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">manufacturer</span>, y <spanclass="op">=</span><spanclass="va">n</span><spanclass="op">)</span><spanclass="op">)</span></code></pre></div>
<scripttype="application/json"data-for="htmlwidget-218a5788590ba960c57f">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"audi","y":18},{"x":"chevrolet","y":19},{"x":"dodge","y":37},{"x":"ford","y":25},{"x":"honda","y":9},{"x":"hyundai","y":14},{"x":"jeep","y":8},{"x":"land rover","y":4},{"x":"lincoln","y":3},{"x":"mercury","y":4},{"x":"nissan","y":13},{"x":"pontiac","y":5},{"x":"subaru","y":14},{"x":"toyota","y":34},{"x":"volkswagen","y":27}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":true}},"tooltip":{"shared":true,"followCursor":true},"grid":{"yaxis":{"lines":{"show":false}},"xaxis":{"lines":{"show":true}}},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"audi","max":"volkswagen"},"type":"bar"},"evals":[],"jsHooks":[]}</script><p>To create a dodge bar charts, use aesthetic <code>fill</code> :</p>
<spanclass="fu"><ahref="../reference/apex.html">apex</a></span><spanclass="op">(</span>data <spanclass="op">=</span><spanclass="va">n_manufac_year</span>, type <spanclass="op">=</span><spanclass="st">"column"</span>, mapping <spanclass="op">=</span><spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">manufacturer</span>, y <spanclass="op">=</span><spanclass="va">n</span>, fill <spanclass="op">=</span><spanclass="va">year</span><spanclass="op">)</span><spanclass="op">)</span></code></pre></div>
<codeclass="sourceCode R"><spanclass="fu"><ahref="../reference/apex.html">apex</a></span><spanclass="op">(</span>data <spanclass="op">=</span><spanclass="va">n_manufac_year</span>, type <spanclass="op">=</span><spanclass="st">"column"</span>, mapping <spanclass="op">=</span><spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">manufacturer</span>, y <spanclass="op">=</span><spanclass="va">n</span>, fill <spanclass="op">=</span><spanclass="va">year</span><spanclass="op">)</span><spanclass="op">)</span><spanclass="op">%>%</span>
<spanclass="fu"><ahref="../reference/apex.html">apex</a></span><spanclass="op">(</span>data <spanclass="op">=</span><spanclass="va">economics</span>, type <spanclass="op">=</span><spanclass="st">"line"</span>, mapping <spanclass="op">=</span><spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">date</span>, y <spanclass="op">=</span><spanclass="va">uempmed</span><spanclass="op">)</span><spanclass="op">)</span></code></pre></div>
<scripttype="application/json"data-for="htmlwidget-a12e2fd675093cf9cc5e">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[[1167609600000,8.3],[1170288000000,8.5],[1172707200000,9.1],[1175385600000,8.6],[1177977600000,8.2],[1180656000000,7.7],[1183248000000,8.7],[1185926400000,8.8],[1188604800000,8.7],[1191196800000,8.4],[1193875200000,8.6],[1196467200000,8.4],[1199145600000,9],[1201824000000,8.7],[1204329600000,8.7],[1207008000000,9.4],[1209600000000,7.9],[1212278400000,9],[1214870400000,9.7],[1217548800000,9.7],[1220227200000,10.2],[1222819200000,10.4],[1225497600000,9.8],[1228089600000,10.5],[1230768000000,10.7],[1233446400000,11.7],[1235865600000,12.3],[1238544000000,13.1],[1241136000000,14.2],[1243814400000,17.2],[1246406400000,16],[1249084800000,16.3],[1251763200000,17.8],[1254355200000,18.9],[1257033600000,19.8],[1259625600000,20.1],[1262304000000,20],[1264982400000,19.9],[1267401600000,20.4],[1270080000000,22.1],[1272672000000,22.3],[1275350400000,25.2],[1277942400000,22.3],[1280620800000,21],[1283299200000,20.3],[1285891200000,21.2],[1288569600000,21],[1291161600000,21.9],[1293840000000,21.5],[1296518400000,21.1],[1298937600000,21.5],[1301616000000,20.9],[1304208000000,21.6],[1306886400000,22.4],[1309478400000,22],[1312156800000,22.4],[1314835200000,22],[1317427200000,20.6],[1320105600000,20.8],[1322697600000,20.5],[1325376000000,20.8],[1328054400000,19.7],[1330560000000,19.2],[1333238400000,19.1],[1335830400000,19.9],[1338508800000,20.4],[1341100800000,17.5],[1343779200000,18.4],[1346457600000,18.8],[1349049600000,19.9],[1351728000000,18.6],[1354320000000,17.7],[1356998400000,15.8],[1359676800000,17.2],[1362096000000,17.6],[1364774400000,17.1],[1367366400000,17.1],[1370044800000,17],[1372636800000,16.2],[1375315200000,16.5],[1377993600000,16.5],[1380585600000,16.3],[1383264000000,17.1],[1385856000000,17.3],[1388534400000,15.4],[1391212800000,15.9],[1393632000000,15.8],[1396310400000,15.7],[1398902400000,14.6],[1401580800000,13.8],[1404172800000,13.1],[1406851200000,12.9],[1409529600000,13.4],[1412121600000,13.6],[1414800000000,13],[1417392000000,12.9],[1420070400000,13.2],[1422748800000,12.9],[1425168000000,12],[1427846400000,11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2007-01-01","max":"2015-04-01"},"type":"line"},"evals":[],"jsHooks":[]}</script><p>To represent several lines, use a <code>data.frame</code> in long format and the <code>group</code> aesthetic:</p>
<spanclass="fu"><ahref="../reference/apex.html">apex</a></span><spanclass="op">(</span>data <spanclass="op">=</span><spanclass="va">economics_long</span>, type <spanclass="op">=</span><spanclass="st">"line"</span>, mapping <spanclass="op">=</span><spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">date</span>, y <spanclass="op">=</span><spanclass="va">value01</span>, group <spanclass="op">=</span><spanclass="va">variable</span><spanclass="op">)</span><spanclass="op">)</span><spanclass="op">%>%</span>
<spanclass="fu"><ahref="../reference/ax_yaxis.html">ax_yaxis</a></span><spanclass="op">(</span>decimalsInFloat <spanclass="op">=</span><spanclass="fl">2</span><spanclass="op">)</span><spanclass="co"># number of decimals to keep</span></code></pre></div>
<codeclass="sourceCode R"><spanclass="fu"><ahref="../reference/apex.html">apex</a></span><spanclass="op">(</span>data <spanclass="op">=</span><spanclass="va">economics_long</span>, type <spanclass="op">=</span><spanclass="st">"area"</span>, mapping <spanclass="op">=</span><spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">date</span>, y <spanclass="op">=</span><spanclass="va">value01</span>, fill <spanclass="op">=</span><spanclass="va">variable</span><spanclass="op">)</span><spanclass="op">)</span><spanclass="op">%>%</span>
<spanclass="fu"><ahref="../reference/ax_yaxis.html">ax_yaxis</a></span><spanclass="op">(</span>decimalsInFloat <spanclass="op">=</span><spanclass="fl">2</span><spanclass="op">)</span><spanclass="op">%>%</span><spanclass="co"># number of decimals to keep</span>
<codeclass="sourceCode R"><spanclass="fu"><ahref="../reference/apex.html">apex</a></span><spanclass="op">(</span>data <spanclass="op">=</span><spanclass="va">mtcars</span>, type <spanclass="op">=</span><spanclass="st">"scatter"</span>, mapping <spanclass="op">=</span><spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">wt</span>, y <spanclass="op">=</span><spanclass="va">mpg</span><spanclass="op">)</span><spanclass="op">)</span></code></pre></div>
<codeclass="sourceCode R"><spanclass="fu"><ahref="../reference/apex.html">apex</a></span><spanclass="op">(</span>data <spanclass="op">=</span><spanclass="va">mtcars</span>, type <spanclass="op">=</span><spanclass="st">"scatter"</span>, mapping <spanclass="op">=</span><spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">wt</span>, y <spanclass="op">=</span><spanclass="va">mpg</span>, fill <spanclass="op">=</span><spanclass="va">cyl</span><spanclass="op">)</span><spanclass="op">)</span></code></pre></div>
<codeclass="sourceCode R"><spanclass="fu"><ahref="../reference/apex.html">apex</a></span><spanclass="op">(</span>data <spanclass="op">=</span><spanclass="va">mtcars</span>, type <spanclass="op">=</span><spanclass="st">"scatter"</span>, mapping <spanclass="op">=</span><spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">wt</span>, y <spanclass="op">=</span><spanclass="va">mpg</span>, z <spanclass="op">=</span><spanclass="fu">scales</span><spanclass="fu">::</span><spanclass="fu"><ahref="https://scales.r-lib.org//reference/rescale.html">rescale</a></span><spanclass="op">(</span><spanclass="va">qsec</span><spanclass="op">)</span><spanclass="op">)</span><spanclass="op">)</span></code></pre></div>
n <spanclass="op">=</span><spanclass="fu"><ahref="https://rdrr.io/r/base/c.html">c</a></span><spanclass="op">(</span><spanclass="fl">254</span>, <spanclass="fl">238</span><spanclass="op">)</span>
<spanclass="op">)</span>
<spanclass="fu"><ahref="../reference/apex.html">apex</a></span><spanclass="op">(</span>data <spanclass="op">=</span><spanclass="va">poll</span>, type <spanclass="op">=</span><spanclass="st">"pie"</span>, mapping <spanclass="op">=</span><spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">answer</span>, y <spanclass="op">=</span><spanclass="va">n</span><spanclass="op">)</span><spanclass="op">)</span></code></pre></div>
<scripttype="application/json"data-for="htmlwidget-187a95b0322683efd64d">{"x":{"ax_opts":{"chart":{"type":"radialBar"},"series":[65],"labels":["My value"],"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"My value","max":"My value"},"type":"radialBar"},"evals":[],"jsHooks":[]}</script><p>Multi radial chart (more than one value):</p>
name <spanclass="op">=</span><spanclass="fu"><ahref="https://rdrr.io/r/base/c.html">c</a></span><spanclass="op">(</span><spanclass="st">'Apples'</span>, <spanclass="st">'Oranges'</span>, <spanclass="st">'Bananas'</span>, <spanclass="st">'Berries'</span><spanclass="op">)</span>,
value <spanclass="op">=</span><spanclass="fu"><ahref="https://rdrr.io/r/base/c.html">c</a></span><spanclass="op">(</span><spanclass="fl">44</span>, <spanclass="fl">55</span>, <spanclass="fl">67</span>, <spanclass="fl">83</span><spanclass="op">)</span>
<spanclass="op">)</span>
<spanclass="fu"><ahref="../reference/apex.html">apex</a></span><spanclass="op">(</span>data <spanclass="op">=</span><spanclass="va">fruits</span>, type <spanclass="op">=</span><spanclass="st">"radialBar"</span>, mapping <spanclass="op">=</span><spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">name</span>, y <spanclass="op">=</span><spanclass="va">value</span><spanclass="op">)</span><spanclass="op">)</span></code></pre></div>
<spanclass="fu"><ahref="../reference/apex.html">apex</a></span><spanclass="op">(</span>data <spanclass="op">=</span><spanclass="fu"><ahref="https://rdrr.io/r/utils/head.html">head</a></span><spanclass="op">(</span><spanclass="va">mtcars</span><spanclass="op">)</span>, type <spanclass="op">=</span><spanclass="st">"radar"</span>, mapping <spanclass="op">=</span><spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">model</span>, y <spanclass="op">=</span><spanclass="va">qsec</span><spanclass="op">)</span><spanclass="op">)</span></code></pre></div>
data <spanclass="op">=</span><spanclass="fu"><ahref="https://rdrr.io/r/utils/head.html">head</a></span><spanclass="op">(</span><spanclass="va">mtcars</span><spanclass="op">)</span>,
times <spanclass="op">=</span><spanclass="fu"><ahref="https://rdrr.io/r/base/c.html">c</a></span><spanclass="op">(</span><spanclass="st">"drat"</span>, <spanclass="st">"wt"</span><spanclass="op">)</span>,
direction <spanclass="op">=</span><spanclass="st">"long"</span>,
drop <spanclass="op">=</span><spanclass="fu"><ahref="https://rdrr.io/r/base/c.html">c</a></span><spanclass="op">(</span><spanclass="st">"mpg"</span>, <spanclass="st">"cyl"</span>, <spanclass="st">"hp"</span>, <spanclass="st">"dist"</span>, <spanclass="st">"qsec"</span>, <spanclass="st">"vs"</span>, <spanclass="st">"am"</span>, <spanclass="st">"gear"</span>, <spanclass="st">"carb"</span><spanclass="op">)</span>
<spanclass="op">)</span>
<spanclass="fu"><ahref="../reference/apex.html">apex</a></span><spanclass="op">(</span>data <spanclass="op">=</span><spanclass="va">new_mtcars</span>, type <spanclass="op">=</span><spanclass="st">"radar"</span>, mapping <spanclass="op">=</span><spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">model</span>, y <spanclass="op">=</span><spanclass="va">value</span>, group <spanclass="op">=</span><spanclass="va">time</span><spanclass="op">)</span><spanclass="op">)</span></code></pre></div>
data <spanclass="op">=</span><spanclass="va">txhousing2</span>,
type <spanclass="op">=</span><spanclass="st">"heatmap"</span>,
mapping <spanclass="op">=</span><spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">date</span>, y <spanclass="op">=</span><spanclass="va">city</span>, fill <spanclass="op">=</span><spanclass="fu">scales</span><spanclass="fu">::</span><spanclass="fu"><ahref="https://scales.r-lib.org//reference/rescale.html">rescale</a></span><spanclass="op">(</span><spanclass="va">val_med</span><spanclass="op">)</span><spanclass="op">)</span>
<spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span><spanclass="op">(</span>x <spanclass="op">=</span><spanclass="va">datetime</span>, open <spanclass="op">=</span><spanclass="va">open</span>, close <spanclass="op">=</span><spanclass="va">close</span>, low <spanclass="op">=</span><spanclass="va">low</span>, high <spanclass="op">=</span><spanclass="va">high</span><spanclass="op">)</span>,
type <spanclass="op">=</span><spanclass="st">"candlestick"</span>
<p>Developed by <ahref="https://twitter.com/_pvictorr"><imgsrc="https://pbs.twimg.com/profile_images/844237339404722177/E1U61aM8_normal.jpg"> Victor Perrier</a>, <ahref="https://twitter.com/_mfaan"><imgsrc="https://pbs.twimg.com/profile_images/912313931326218240/o1-wvA18_normal.jpg"> Fanny Meyer</a>.</p>
var config = {"particles":{"number":{"value":90,"density":{"enable":true,"value_area":1200}},"color":{"value":"#112446"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.8,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#112446","opacity":0.6,"width":1},"move":{"enable":true,"speed":5,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true}},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}},"retina_detect":true} ;