<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-c4de54b661986ee24039">{"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"}},"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-94482484ca905a9acd8b">{"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"}},"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>
<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>
<scripttype="application/json"data-for="htmlwidget-af1b7c51027bfb9cf5a4">{"x":{"ax_opts":{"chart":{"type":"scatter"},"series":[{"name":"mpg","type":"scatter","data":[{"x":2.62,"y":21},{"x":2.875,"y":21},{"x":2.32,"y":22.8},{"x":3.215,"y":21.4},{"x":3.44,"y":18.7},{"x":3.46,"y":18.1},{"x":3.57,"y":14.3},{"x":3.19,"y":24.4},{"x":3.15,"y":22.8},{"x":3.44,"y":19.2},{"x":3.44,"y":17.8},{"x":4.07,"y":16.4},{"x":3.73,"y":17.3},{"x":3.78,"y":15.2},{"x":5.25,"y":10.4},{"x":5.424,"y":10.4},{"x":5.345,"y":14.7},{"x":2.2,"y":32.4},{"x":1.615,"y":30.4},{"x":1.835,"y":33.9},{"x":2.465,"y":21.5},{"x":3.52,"y":15.5},{"x":3.435,"y":15.2},{"x":3.84,"y":13.3},{"x":3.845,"y":19.2},{"x":1.935,"y":27.3},{"x":2.14,"y":26},{"x":1.513,"y":30.4},{"x":3.17,"y":15.8},{"x":2.77,"y":19.7},{"x":3.57,"y":15},{"x":2.78,"y":21.4}]}],"dataLabels":{"enabled":false},"xaxis":{"type":"numeric","min":1,"max":6,"crosshairs":{"show":true,"stroke":{"dashArray":0}},"labels":{"style":{"colors":"#848484"}}},"yaxis":{"min":10,"max":35,"decimalsInFloat":3,"tooltip":{"enabled":true},"labels":{"style":{"colors":"#848484"}}},"grid":{"xaxis":{"lines":{"show":true}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":1.513,"max":5.424}},"evals":[],"jsHooks":[]}</script><p>Color points according to a third variable:</p>
<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>
<scripttype="application/json"data-for="htmlwidget-e8cc13ddec4e44397e7c">{"x":{"ax_opts":{"chart":{"type":"scatter"},"series":[{"name":6,"type":"scatter","data":[{"x":2.62,"y":21},{"x":2.875,"y":21},{"x":3.215,"y":21.4},{"x":3.44,"y":19.2},{"x":3.44,"y":17.8},{"x":3.46,"y":18.1},{"x":2.77,"y":19.7}]},{"name":4,"type":"scatter","data":[{"x":2.32,"y":22.8},{"x":3.19,"y":24.4},{"x":3.15,"y":22.8},{"x":2.2,"y":32.4},{"x":1.615,"y":30.4},{"x":1.835,"y":33.9},{"x":2.465,"y":21.5},{"x":1.935,"y":27.3},{"x":2.14,"y":26},{"x":1.513,"y":30.4},{"x":2.78,"y":21.4}]},{"name":8,"type":"scatter","data":[{"x":3.44,"y":18.7},{"x":3.57,"y":14.3},{"x":3.57,"y":15},{"x":4.07,"y":16.4},{"x":3.73,"y":17.3},{"x":3.78,"y":15.2},{"x":5.25,"y":10.4},{"x":5.424,"y":10.4},{"x":5.345,"y":14.7},{"x":3.52,"y":15.5},{"x":3.435,"y":15.2},{"x":3.84,"y":13.3},{"x":3.845,"y":19.2},{"x":3.17,"y":15.8}]}],"dataLabels":{"enabled":false},"xaxis":{"type":"numeric","min":1,"max":6,"crosshairs":{"show":true,"stroke":{"dashArray":0}},"labels":{"style":{"colors":"#848484"}}},"yaxis":{"min":10,"max":35,"decimalsInFloat":3,"tooltip":{"enabled":true},"labels":{"style":{"colors":"#848484"}}},"grid":{"xaxis":{"lines":{"show":true}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":1.513,"max":5.424}},"evals":[],"jsHooks":[]}</script><p>And change point size using <code>z</code> aesthetics:</p>
<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-7b8a96ea3859bc1a3bd0">{"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"}},"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} ;