apexcharter/docs/articles/apexcharter.html

309 lines
256 KiB
HTML
Raw Normal View History

2021-07-23 11:19:23 +02:00
<!DOCTYPE html>
<!-- Generated by pkgdown: do not edit by hand --><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="apexcharter">
<title>Starting with ApexCharts • apexcharter</title>
<script src="../deps/jquery-3.6.0/jquery-3.6.0.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="../deps/bootstrap-4.6.0/bootstrap.min.css" rel="stylesheet">
2021-10-20 18:23:29 +02:00
<script src="../deps/bootstrap-4.6.0/bootstrap.bundle.min.js"></script><script src="../deps/bs3compat-0.3.1/transition.js"></script><script src="../deps/bs3compat-0.3.1/tabs.js"></script><script src="../deps/bs3compat-0.3.1/bs3compat.js"></script><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous">
2021-07-23 11:19:23 +02:00
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous">
<!-- bootstrap-toc --><script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.js"></script><!-- headroom.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script><!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script><!-- search --><script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/6.4.6/fuse.js" integrity="sha512-zv6Ywkjyktsohkbp9bb45V6tEMoWhzFzXis+LrMehmJZZSys19Yxf1dopHx7WzIKxr5tK2dVcYmaCk2uqdjF4A==" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/autocomplete.js/0.38.0/autocomplete.jquery.min.js" integrity="sha512-GU9ayf+66Xx2TmpxqJpliWbT5PiGYxpaG8rfnBEk1LL8l1KGkRShhngwdXK1UgqhAzWpZHSiYPc09/NwDQIGyg==" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js" integrity="sha512-5CYOlHXGh6QpOFA/TeTylKLWfB3ftPsde7AnmhuitiTX4K5SqCLBeKro6sPS8ilsz1Q4NRx3v8Ko2IBiszzdww==" crossorigin="anonymous"></script><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet">
<link href="../syntax-highlighting.css" rel="stylesheet">
<script src="../pkgdown.js"></script><meta property="og:title" content="Starting with ApexCharts">
<meta property="og:description" content="apexcharter">
<!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#toc" data-headroom>
<nav class="navbar fixed-top navbar-dark navbar-expand-lg bg-primary"><div class="container">
<a class="navbar-brand mb-0 h1" href="../index.html">apexcharter</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
2021-10-20 18:23:29 +02:00
<button type="button" id="version-badge" class="badge badge-default d-none d-lg-block" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Released version">0.2.0.9200</button>
2021-07-23 11:19:23 +02:00
<div id="navbar" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto ml-3">
<li class="active nav-item">
<a class="nav-link" href="../articles/apexcharter.html">Get started</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../reference/index.html">Reference</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" id="dropdown-articles">Articles</a>
<div class="dropdown-menu" aria-labelledby="dropdown-articles">
2021-10-20 18:23:29 +02:00
<a class="dropdown-item" href="../articles/extra/advanced-configuration.html">Advanced configuration examples</a>
<a class="dropdown-item" href="../articles/extra/chart-options.html">Chart options</a>
<a class="dropdown-item" href="../articles/extra/facets.html">Facets: grid of charts</a>
<a class="dropdown-item" href="../articles/extra/shiny-integration.html">Shiny integration</a>
<a class="dropdown-item" href="../articles/extra/spark-box.html">Spark boxes</a>
<a class="dropdown-item" href="../articles/extra/sync-charts.html">Syncing charts</a>
2021-07-23 11:19:23 +02:00
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="../news/index.html">Changelog</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" role="search">
<input type="search" class="form-control mr-sm-2" aria-label="Search" name="search-input" data-search-index="/search.json" id="search-input" placeholder="Search..." autocomplete="off">
</form>
<ul class="navbar-nav ml-1">
<li class="nav-item">
<a class="external-link nav-link" href="https://github.com/dreamRs/apexcharter/" aria-label="github">
<span class="fab fa fab fa-github fa-lg"></span>
</a>
</li>
</ul>
</div>
</div>
</nav><div class="container template-article">
2021-10-20 18:23:29 +02:00
<script src="apexcharter_files/header-attrs-2.11/header-attrs.js"></script><script src="apexcharter_files/htmlwidgets-1.5.4/htmlwidgets.js"></script><script src="apexcharter_files/apexcharter-binding-0.2.0.9100/apexcharter.js"></script><div class="row">
2021-07-23 11:19:23 +02:00
<div class="col-md-9 contents">
<img src="" class="pkg-logo" alt=""><div class="page-header pb-2 mt-4 mb-2 border-bottom toc-ignore">
<h1 class="display-4" data-toc-skip>Starting with ApexCharts</h1>
<h4 data-toc-skip class="author">Victor Perrier</h4>
2021-10-20 18:23:29 +02:00
<h4 data-toc-skip class="date">2021-10-20</h4>
2021-07-23 11:19:23 +02:00
<small class="dont-index">Source: <a href="https://github.com/dreamRs/apexcharter/blob/master/vignettes/apexcharter.Rmd" class="external-link"><code>vignettes/apexcharter.Rmd</code></a></small>
<div class="d-none name"><code>apexcharter.Rmd</code></div>
</div>
<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.</p>
<div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://ggplot2.tidyverse.org" class="external-link">ggplot2</a></span><span class="op">)</span>
<span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://scales.r-lib.org" class="external-link">scales</a></span><span class="op">)</span>
<span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/dreamRs/apexcharter" class="external-link">apexcharter</a></span><span class="op">)</span></code></pre></div>
<div id="bar-charts" class="section level2">
<h2 class="hasAnchor">
<a href="#bar-charts" class="anchor" aria-hidden="true"></a>Bar charts</h2>
<p>Simple bar charts can be created with:</p>
<div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="https://rdrr.io/r/utils/data.html" class="external-link">data</a></span><span class="op">(</span><span class="st">"mpg"</span><span class="op">)</span>
<span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">mpg</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">manufacturer</span><span class="op">)</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-61900da32b8f9f90db39" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-61900da32b8f9f90db39">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":[],"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,"intersect":false,"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>
2021-07-23 11:19:23 +02:00
<div class="sourceCode" id="cb3"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">mpg</span>, type <span class="op">=</span> <span class="st">"bar"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">manufacturer</span><span class="op">)</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-b5718ca01040fe3b7c81" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-b5718ca01040fe3b7c81">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":[],"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,"intersect":false,"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>
2021-07-23 11:19:23 +02:00
<div class="sourceCode" id="cb4"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">mpg</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">manufacturer</span>, fill <span class="op">=</span> <span class="va">year</span><span class="op">)</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-4cbcf2baa488f6cbc1c6" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-4cbcf2baa488f6cbc1c6">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"1999","type":"bar","data":[{"x":"audi","y":9},{"x":"chevrolet","y":7},{"x":"dodge","y":16},{"x":"ford","y":15},{"x":"honda","y":5},{"x":"hyundai","y":6},{"x":"jeep","y":2},{"x":"land rover","y":2},{"x":"lincoln","y":2},{"x":"mercury","y":2},{"x":"nissan","y":6},{"x":"pontiac","y":3},{"x":"subaru","y":6},{"x":"toyota","y":20},{"x":"volkswagen","y":16}]},{"name":"2008","type":"bar","data":[{"x":"audi","y":9},{"x":"chevrolet","y":12},{"x":"dodge","y":21},{"x":"ford","y":10},{"x":"honda","y":4},{"x":"hyundai","y":8},{"x":"jeep","y":6},{"x":"land rover","y":2},{"x":"lincoln","y":1},{"x":"mercury","y":2},{"x":"nissan","y":7},{"x":"pontiac","y":2},{"x":"subaru","y":8},{"x":"toyota","y":14},{"x":"volkswagen","y":11}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"tooltip":{"shared":true,"intersect":false,"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>For stacked bar charts, specify option <code>stacked</code> in <code>ax_chart</code> :</p>
2021-07-23 11:19:23 +02:00
<div class="sourceCode" id="cb5"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">mpg</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">manufacturer</span>, fill <span class="op">=</span> <span class="va">year</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_chart.html">ax_chart</a></span><span class="op">(</span>stacked <span class="op">=</span> <span class="cn">TRUE</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-c6f0d0584d48f0b67a19" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-c6f0d0584d48f0b67a19">{"x":{"ax_opts":{"chart":{"type":"bar","stacked":true},"series":[{"name":"1999","type":"bar","data":[{"x":"audi","y":9},{"x":"chevrolet","y":7},{"x":"dodge","y":16},{"x":"ford","y":15},{"x":"honda","y":5},{"x":"hyundai","y":6},{"x":"jeep","y":2},{"x":"land rover","y":2},{"x":"lincoln","y":2},{"x":"mercury","y":2},{"x":"nissan","y":6},{"x":"pontiac","y":3},{"x":"subaru","y":6},{"x":"toyota","y":20},{"x":"volkswagen","y":16}]},{"name":"2008","type":"bar","data":[{"x":"audi","y":9},{"x":"chevrolet","y":12},{"x":"dodge","y":21},{"x":"ford","y":10},{"x":"honda","y":4},{"x":"hyundai","y":8},{"x":"jeep","y":6},{"x":"land rover","y":2},{"x":"lincoln","y":1},{"x":"mercury","y":2},{"x":"nissan","y":7},{"x":"pontiac","y":2},{"x":"subaru","y":8},{"x":"toyota","y":14},{"x":"volkswagen","y":11}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"tooltip":{"shared":true,"intersect":false,"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>
2021-07-23 11:19:23 +02:00
</div>
<div id="line-charts" class="section level2">
<h2 class="hasAnchor">
<a href="#line-charts" class="anchor" aria-hidden="true"></a>Line charts</h2>
<p>Simple line charts can be created with (works with <code>character</code>, <code>Date</code> or <code>POSIXct</code>):</p>
<div class="sourceCode" id="cb6"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="https://rdrr.io/r/utils/data.html" class="external-link">data</a></span><span class="op">(</span><span class="st">"economics"</span><span class="op">)</span>
<span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-a12f800bada95505c5d8" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-a12f800bada95505c5d8">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[[-79056000000,4.5],[-76377600000,4.7],[-73699200000,4.6],[-71107200000,4.9],[-68428800000,4.7],[-65836800000,4.8],[-63158400000,5.1],[-60480000000,4.5],[-57974400000,4.1],[-55296000000,4.6],[-52704000000,4.4],[-50025600000,4.4],[-47433600000,4.5],[-44755200000,4.2],[-42076800000,4.6],[-39484800000,4.8],[-36806400000,4.4],[-34214400000,4.4],[-31536000000,4.4],[-28857600000,4.9],[-26438400000,4],[-23760000000,4],[-21168000000,4.2],[-18489600000,4.4],[-15897600000,4.4],[-13219200000,4.4],[-10540800000,4.7],[-7948800000,4.5],[-5270400000,4.8],[-2678400000,4.6],[0,4.6],[2678400000,4.5],[5097600000,4.6],[7776000000,4.1],[10368000000,4.7],[13046400000,4.9],[15638400000,5.1],[18316800000,5.4],[20995200000,5.2],[23587200000,5.2],[26265600000,5.6],[28857600000,5.9],[31536000000,6.2],[34214400000,6.3],[36633600000,6.4],[39312000000,6.5],[41904000000,6.7],[44582400000,5.7],[47174400000,6.2],[49852800000,6.4],[52531200000,5.8],[55123200000,6.5],[57801600000,6.4],[60393600000,6.2],[63072000000,6.2],[65750400000,6.6],[68256000000,6.6],[70934400000,6.7],[73526400000,6.6],[76204800000,5.4],[78796800000,6.1],[81475200000,6],[84153600000,5.6],[86745600000,5.7],[89424000000,5.7],[92016000000,6.1],[94694400000,5.7],[97372800000,5.2],[99792000000,5.5],[102470400000,5],[105062400000,4.9],[107740800000,5],[110332800000,5.2],[113011200000,4.9],[115689600000,5.4],[118281600000,5.5],[120960000000,5.1],[123552000000,4.7],[126230400000,5],[128908800000,5.1],[131328000000,4.8],[134006400000,5],[136598400000,4.6],[139276800000,5.3],[141868800000,5.7],[144547200000,5],[147225600000,5.3],[149817600000,5.5],[152496000000,5.2],[155088000000,5.7],[157766400000,6.3],[160444800000,7.1],[162864000000,7.2],[165542400000,8.7],[168134400000,9.4],[170812800000,8.8],[173404800000,8.6],[176083200000,9.2],[178761600000,9.2],[181353600000,8.6],[184032000000,9.5],[186624000000,9],[189302400000,9],[191980800000,8.2],[194486400000,8.7],[197164800000,8.2],[199756800000,8.3],[202435200000,7.8],[205027200000,7.7],[207705600000,7.9],[210384000000,7.8],[212976000000,7.7],[215654400000,8.4],[218246400000,8],[220924800000,7.5],[223603200000,7.2],[226022400000,7.2],[228700800000,7.3],[231292800000,7.9],[233971200000,6.2],[236563200000,7.1],[239241600000,7],[241920000000,6.7],[244512000000,6.9],[247190400000,7],[249782400000,6.8],[252460800000,6.5],[255139200000,6.7],[257558400000,6.2],[260236800000,6.1],[262828800000,5.7],[265507200000,6],[268099200000,5.8],[270777600000,5.8],[273456000000,5.6],[276048000000,5.9],[278726400000,5.5],[281318400000,5.6],[283996800000,5.9],[286675200000,5.9],[289094400000,5.9],[291772800000,5.4],[294364800000,5.6],[297043200000,5.6],[299635200000,5.9],[302313600000,4.8],[304992000000,5.5],[307584000000,5.5],[310262400000,5.3],[312854400000,5.7],[315532800000,5.3],[318211200000,5.8],[320716800000,6],[323395200000,5.8],[325987200000,5.7],[328665600000,6.4],[331257600000,7],[333936000000,7.5],[336614400000,7.7],[339206400000,7.5],[341884800000,7.7],[344476800000,7.5],[347155200000,7.4],[349833600000,7.1],[352252800000,7.1],[354931200000,7.4],[357523200000,6.9],[360201600000,6.6],[362793600000,7.1],[365472000000,7.2],[368150400000,6.8],[370742400000,6.8],[373420800000,6.9],[376012800000,6.9],[378691200000,7.1],[381369600000,7.5],[383788800000,7.7],[386467200000,8.1],[389059200000,8.5],[391737600000,9.5],[394329600000,8.5],[397008000000,8.7],[399686400000,9.5],[402278400000,9.7],[404956800000,10],[407548800000,10.2],[410227200000,11.1],[412905600000,9.8],[415324800000,10.4],[418003200000,10.9],[420595200000,12.3],[423273600000,11.3],[425865600000,10.1],[428544000000,9.3],[431222400000,9.3],[433814400000,9.4],[436492800000,9.3],[439084800000,8.7],[441763200000,9.1],[444441600000,8.3],[446947200000,8.3],[449625600000,8.2],[452217600000,9.1],[454896000000,7.5],[457488000000,7.5],[460166400000,7.3],[462844800000,7.6],[465436800000,7.2],[468115200000,7.2],[470707200000,7.3],[473385600000,6.8],[
2021-07-23 11:19:23 +02:00
<div class="sourceCode" id="cb7"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="https://rdrr.io/r/utils/data.html" class="external-link">data</a></span><span class="op">(</span><span class="st">"economics_long"</span><span class="op">)</span>
<span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics_long</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">value01</span>, group <span class="op">=</span> <span class="va">variable</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span>decimalsInFloat <span class="op">=</span> <span class="fl">2</span><span class="op">)</span> <span class="co"># number of decimals to keep</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-1e243834ddad2d02fa3b" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-1e243834ddad2d02fa3b">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"pce","type":"line","data":[[-79056000000,0],[-76377600000,0.000265249719776508],[-73699200000,0.000761523389035778],[-71107200000,0.000470604341538967],[-68428800000,0.000915539355357616],[-65836800000,0.00157438543351217],[-63158400000,0.00207065910277143],[-60480000000,0.0023016830522542],[-57974400000,0.00321722240761181],[-55296000000,0.00319155307989151],[-52704000000,0.00368782674915077],[-50025600000,0.00424399551642409],[-47433600000,0.00483439005399116],[-44755200000,0.00515953487178171],[-42076800000,0.00526221218266294],[-39484800000,0.00555313123015975],[-36806400000,0.00598950980140497],[-34214400000,0.0059723969162581],[-31536000000,0.0065713478963986],[-28857600000,0.00701628291021725],[-26438400000,0.00703339579536412],[-23760000000,0.0074612179240359],[-21168000000,0.00800883024873578],[-18489600000,0.0080601689041764],[-15897600000,0.00821418487049825],[-13219200000,0.00883024873578561],[-10540800000,0.00911261134070899],[-7948800000,0.00956610279710108],[-5270400000,0.00973723164856979],[-2678400000,0.00993402982775881],[0,0.0104388599395915],[2678400000,0.0108923513959836],[5097600000,0.0107468918722352],[7776000000,0.0110634802474523],[10368000000,0.0116110925721522],[13046400000,0.0119447938325162],[15638400000,0.0121330355691318],[18316800000,0.0125095190423629],[20995200000,0.013040018481916],[23587200000,0.0129715669413285],[26265600000,0.0128261074175801],[28857600000,0.0135961872491893],[31536000000,0.0144946137194],[34214400000,0.0147769763243234],[36633600000,0.0149994438312327],[39312000000,0.0155812819262264],[41904000000,0.0157780801054154],[44582400000,0.0165224906093043],[47174400000,0.0164454826261434],[49852800000,0.0169588691805495],[52531200000,0.0176519410289978],[55123200000,0.017891521421054],[57801600000,0.0183278999922992],[60393600000,0.0189696331853069],[63072000000,0.0192348829050834],[65750400000,0.0196370357060349],[68256000000,0.0207493732405815],[70934400000,0.0210317358455049],[73526400000,0.0215023401870438],[76204800000,0.0218103721196875],[78796800000,0.0225205568532827],[81475200000,0.0230681691779826],[84153600000,0.0234788784215075],[86745600000,0.0246596674966416],[89424000000,0.025138828280754],[92016000000,0.0256179890648664],[94694400000,0.0265078590925037],[97372800000,0.0273036082518332],[99792000000,0.0279025592319737],[102470400000,0.0281506960666034],[105062400000,0.0286555261784361],[107740800000,0.0288865501279188],[110332800000,0.0297250815001155],[113011200000,0.029656629959528],[115689600000,0.0310171043287043],[118281600000,0.0309315399029699],[120960000000,0.0316759504068588],[123552000000,0.0316502810791385],[126230400000,0.03232624004244],[128908800000,0.0327711750562586],[131328000000,0.0337722788373506],[134006400000,0.0345765844392535],[136598400000,0.0355691317777721],[139276800000,0.0360482925618845],[141868800000,0.0368953803766546],[144547200000,0.0383414191715652],[147225600000,0.0383670884992855],[149817600000,0.0387179026447964],[152496000000,0.0384612093675933],[155088000000,0.0389403701517057],[157766400000,0.0401211592268399],[160444800000,0.041301948301974],[162864000000,0.0414046256128552],[165542400000,0.0417811090860864],[168134400000,0.0438260988611375],[170812800000,0.0445020578244389],[173404800000,0.0456143953589855],[176083200000,0.0462304592242729],[178761600000,0.0468978617450009],[181353600000,0.0474198047419805],[184032000000,0.0486947146854224],[186624000000,0.0500894148248924],[189302400000,0.0513728812109077],[191980800000,0.0514242198663484],[194486400000,0.0520402837316357],[197164800000,0.0529387102018465],[199756800000,0.0527076862523637],[202435200000,0.0542307330304353],[205027200000,0.0550093693046179],[207705600000,0.0557281104807865],[210384000000,0.0566522062787176],[212976000000,0.0573367216845924],[215654400000,0.0583806076785516],[218246400000,0.0603058072575746],[220924800000,0.0606052827476448],[223603200000,0.0619999828871149],[226022400000,0.0625989338672553],[22870080
2021-07-23 11:19:23 +02:00
<div class="sourceCode" id="cb8"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics_long</span>, type <span class="op">=</span> <span class="st">"area"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">value01</span>, fill <span class="op">=</span> <span class="va">variable</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span>decimalsInFloat <span class="op">=</span> <span class="fl">2</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span> <span class="co"># number of decimals to keep</span>
<span class="fu"><a href="../reference/ax_chart.html">ax_chart</a></span><span class="op">(</span>stacked <span class="op">=</span> <span class="cn">TRUE</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span>max <span class="op">=</span> <span class="fl">4</span>, tickAmount <span class="op">=</span> <span class="fl">4</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-82db0603530733e7b426" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-82db0603530733e7b426">{"x":{"ax_opts":{"chart":{"type":"area","stacked":true},"series":[{"name":"pce","type":"area","data":[[-79056000000,0],[-76377600000,0.000265249719776508],[-73699200000,0.000761523389035778],[-71107200000,0.000470604341538967],[-68428800000,0.000915539355357616],[-65836800000,0.00157438543351217],[-63158400000,0.00207065910277143],[-60480000000,0.0023016830522542],[-57974400000,0.00321722240761181],[-55296000000,0.00319155307989151],[-52704000000,0.00368782674915077],[-50025600000,0.00424399551642409],[-47433600000,0.00483439005399116],[-44755200000,0.00515953487178171],[-42076800000,0.00526221218266294],[-39484800000,0.00555313123015975],[-36806400000,0.00598950980140497],[-34214400000,0.0059723969162581],[-31536000000,0.0065713478963986],[-28857600000,0.00701628291021725],[-26438400000,0.00703339579536412],[-23760000000,0.0074612179240359],[-21168000000,0.00800883024873578],[-18489600000,0.0080601689041764],[-15897600000,0.00821418487049825],[-13219200000,0.00883024873578561],[-10540800000,0.00911261134070899],[-7948800000,0.00956610279710108],[-5270400000,0.00973723164856979],[-2678400000,0.00993402982775881],[0,0.0104388599395915],[2678400000,0.0108923513959836],[5097600000,0.0107468918722352],[7776000000,0.0110634802474523],[10368000000,0.0116110925721522],[13046400000,0.0119447938325162],[15638400000,0.0121330355691318],[18316800000,0.0125095190423629],[20995200000,0.013040018481916],[23587200000,0.0129715669413285],[26265600000,0.0128261074175801],[28857600000,0.0135961872491893],[31536000000,0.0144946137194],[34214400000,0.0147769763243234],[36633600000,0.0149994438312327],[39312000000,0.0155812819262264],[41904000000,0.0157780801054154],[44582400000,0.0165224906093043],[47174400000,0.0164454826261434],[49852800000,0.0169588691805495],[52531200000,0.0176519410289978],[55123200000,0.017891521421054],[57801600000,0.0183278999922992],[60393600000,0.0189696331853069],[63072000000,0.0192348829050834],[65750400000,0.0196370357060349],[68256000000,0.0207493732405815],[70934400000,0.0210317358455049],[73526400000,0.0215023401870438],[76204800000,0.0218103721196875],[78796800000,0.0225205568532827],[81475200000,0.0230681691779826],[84153600000,0.0234788784215075],[86745600000,0.0246596674966416],[89424000000,0.025138828280754],[92016000000,0.0256179890648664],[94694400000,0.0265078590925037],[97372800000,0.0273036082518332],[99792000000,0.0279025592319737],[102470400000,0.0281506960666034],[105062400000,0.0286555261784361],[107740800000,0.0288865501279188],[110332800000,0.0297250815001155],[113011200000,0.029656629959528],[115689600000,0.0310171043287043],[118281600000,0.0309315399029699],[120960000000,0.0316759504068588],[123552000000,0.0316502810791385],[126230400000,0.03232624004244],[128908800000,0.0327711750562586],[131328000000,0.0337722788373506],[134006400000,0.0345765844392535],[136598400000,0.0355691317777721],[139276800000,0.0360482925618845],[141868800000,0.0368953803766546],[144547200000,0.0383414191715652],[147225600000,0.0383670884992855],[149817600000,0.0387179026447964],[152496000000,0.0384612093675933],[155088000000,0.0389403701517057],[157766400000,0.0401211592268399],[160444800000,0.041301948301974],[162864000000,0.0414046256128552],[165542400000,0.0417811090860864],[168134400000,0.0438260988611375],[170812800000,0.0445020578244389],[173404800000,0.0456143953589855],[176083200000,0.0462304592242729],[178761600000,0.0468978617450009],[181353600000,0.0474198047419805],[184032000000,0.0486947146854224],[186624000000,0.0500894148248924],[189302400000,0.0513728812109077],[191980800000,0.0514242198663484],[194486400000,0.0520402837316357],[197164800000,0.0529387102018465],[199756800000,0.0527076862523637],[202435200000,0.0542307330304353],[205027200000,0.0550093693046179],[207705600000,0.0557281104807865],[210384000000,0.0566522062787176],[212976000000,0.0573367216845924],[215654400000,0.0583806076785516],[218246400000,0.0603058072575746],[220924800000,0.0606052827476448],[223603200000,0.0619999828871149],[226022400000,0.062598933867
2021-07-23 11:19:23 +02:00
</div>
<div id="scatter-charts" class="section level2">
<h2 class="hasAnchor">
<a href="#scatter-charts" class="anchor" aria-hidden="true"></a>Scatter charts</h2>
<p>Simple bar charts can be created with:</p>
<div class="sourceCode" id="cb9"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">mtcars</span>, type <span class="op">=</span> <span class="st">"scatter"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">wt</span>, y <span class="op">=</span> <span class="va">mpg</span><span class="op">)</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-3bd3463d2591fee3c8cb" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-3bd3463d2591fee3c8cb">{"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,"tickAmount":5,"crosshairs":{"show":true,"stroke":{"dashArray":0}},"labels":{"style":{"colors":"#848484"}}},"yaxis":{"min":10,"max":35,"tickAmount":5,"labels":{"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~r')(value) + '';}","style":{"colors":"#848484"}},"tooltip":{"enabled":true}},"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},"type":"scatter"},"evals":["ax_opts.yaxis.labels.formatter"],"jsHooks":[]}</script><p>Color points according to a third variable:</p>
2021-07-23 11:19:23 +02:00
<div class="sourceCode" id="cb10"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">mtcars</span>, type <span class="op">=</span> <span class="st">"scatter"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">wt</span>, y <span class="op">=</span> <span class="va">mpg</span>, fill <span class="op">=</span> <span class="va">cyl</span><span class="op">)</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-e408b5861e5ef01f4579" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-e408b5861e5ef01f4579">{"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,"tickAmount":5,"crosshairs":{"show":true,"stroke":{"dashArray":0}},"labels":{"style":{"colors":"#848484"}}},"yaxis":{"min":10,"max":35,"tickAmount":5,"labels":{"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~r')(value) + '';}","style":{"colors":"#848484"}},"tooltip":{"enabled":true}},"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},"type":"scatter"},"evals":["ax_opts.yaxis.labels.formatter"],"jsHooks":[]}</script><p>And change point size using <code>z</code> aesthetics:</p>
2021-07-23 11:19:23 +02:00
<div class="sourceCode" id="cb11"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">mtcars</span>, type <span class="op">=</span> <span class="st">"scatter"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">wt</span>, y <span class="op">=</span> <span class="va">mpg</span>, z <span class="op">=</span> <span class="fu">scales</span><span class="fu">::</span><span class="fu"><a href="https://scales.r-lib.org/reference/rescale.html" class="external-link">rescale</a></span><span class="op">(</span><span class="va">qsec</span><span class="op">)</span><span class="op">)</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-15187359151d048e151a" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-15187359151d048e151a">{"x":{"ax_opts":{"chart":{"type":"bubble"},"series":[{"name":"mpg","type":"bubble","data":[{"x":2.62,"y":21,"z":0.233333333333333},{"x":2.875,"y":21,"z":0.3},{"x":2.32,"y":22.8,"z":0.489285714285714},{"x":3.215,"y":21.4,"z":0.588095238095238},{"x":3.44,"y":18.7,"z":0.3},{"x":3.46,"y":18.1,"z":0.680952380952381},{"x":3.57,"y":14.3,"z":0.15952380952381},{"x":3.19,"y":24.4,"z":0.654761904761905},{"x":3.15,"y":22.8,"z":1},{"x":3.44,"y":19.2,"z":0.452380952380953},{"x":3.44,"y":17.8,"z":0.523809523809524},{"x":4.07,"y":16.4,"z":0.345238095238095},{"x":3.73,"y":17.3,"z":0.369047619047619},{"x":3.78,"y":15.2,"z":0.416666666666667},{"x":5.25,"y":10.4,"z":0.414285714285714},{"x":5.424,"y":10.4,"z":0.395238095238095},{"x":5.345,"y":14.7,"z":0.347619047619048},{"x":2.2,"y":32.4,"z":0.591666666666667},{"x":1.615,"y":30.4,"z":0.478571428571429},{"x":1.835,"y":33.9,"z":0.642857142857143},{"x":2.465,"y":21.5,"z":0.655952380952381},{"x":3.52,"y":15.5,"z":0.282142857142857},{"x":3.435,"y":15.2,"z":0.333333333333333},{"x":3.84,"y":13.3,"z":0.108333333333333},{"x":3.845,"y":19.2,"z":0.303571428571429},{"x":1.935,"y":27.3,"z":0.523809523809524},{"x":2.14,"y":26,"z":0.261904761904762},{"x":1.513,"y":30.4,"z":0.285714285714286},{"x":3.17,"y":15.8,"z":0},{"x":2.77,"y":19.7,"z":0.119047619047619},{"x":3.57,"y":15,"z":0.0119047619047619},{"x":2.78,"y":21.4,"z":0.488095238095238}]}],"dataLabels":{"enabled":false},"xaxis":{"type":"numeric","min":1,"max":6,"tickAmount":5,"crosshairs":{"show":true,"stroke":{"dashArray":0}},"labels":{"style":{"colors":"#848484"}}},"yaxis":{"min":10,"max":35,"tickAmount":5,"labels":{"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~r')(value) + '';}","style":{"colors":"#848484"}},"tooltip":{"enabled":true}},"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},"type":"bubble"},"evals":["ax_opts.yaxis.labels.formatter"],"jsHooks":[]}</script>
2021-07-23 11:19:23 +02:00
</div>
<div id="pie-charts" class="section level2">
<h2 class="hasAnchor">
<a href="#pie-charts" class="anchor" aria-hidden="true"></a>Pie charts</h2>
<p>Simple pie charts can be created with:</p>
<div class="sourceCode" id="cb12"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="va">poll</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/base/data.frame.html" class="external-link">data.frame</a></span><span class="op">(</span>
answer <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span><span class="st">"Yes"</span>, <span class="st">"No"</span><span class="op">)</span>,
n <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span><span class="fl">254</span>, <span class="fl">238</span><span class="op">)</span>
<span class="op">)</span>
<span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">poll</span>, type <span class="op">=</span> <span class="st">"pie"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">answer</span>, y <span class="op">=</span> <span class="va">n</span><span class="op">)</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-282f2f86f7efe071b28c" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-282f2f86f7efe071b28c">{"x":{"ax_opts":{"chart":{"type":"pie"},"series":[254,238],"labels":["Yes","No"],"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":"No","max":"Yes"},"type":"pie"},"evals":[],"jsHooks":[]}</script>
2021-07-23 11:19:23 +02:00
</div>
<div id="radial-charts" class="section level2">
<h2 class="hasAnchor">
<a href="#radial-charts" class="anchor" aria-hidden="true"></a>Radial charts</h2>
<p>Simple radial charts can be created with (here we pass values directly in <code>aes</code>, but you can use a <code>data.frame</code>) :</p>
<div class="sourceCode" id="cb13"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="cn">NULL</span>, type <span class="op">=</span> <span class="st">"radialBar"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="st">"My value"</span>, y <span class="op">=</span> <span class="fl">65</span><span class="op">)</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-73cc595d312da5a5d1aa" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-73cc595d312da5a5d1aa">{"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>
2021-07-23 11:19:23 +02:00
<div class="sourceCode" id="cb14"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="va">fruits</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/base/data.frame.html" class="external-link">data.frame</a></span><span class="op">(</span>
name <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span><span class="st">'Apples'</span>, <span class="st">'Oranges'</span>, <span class="st">'Bananas'</span>, <span class="st">'Berries'</span><span class="op">)</span>,
value <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span><span class="fl">44</span>, <span class="fl">55</span>, <span class="fl">67</span>, <span class="fl">83</span><span class="op">)</span>
<span class="op">)</span>
<span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">fruits</span>, type <span class="op">=</span> <span class="st">"radialBar"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">name</span>, y <span class="op">=</span> <span class="va">value</span><span class="op">)</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-ef4dc37c0f0fd1bdca0f" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-ef4dc37c0f0fd1bdca0f">{"x":{"ax_opts":{"chart":{"type":"radialBar"},"series":[44,55,67,83],"labels":["Apples","Oranges","Bananas","Berries"],"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":"Apples","max":"Oranges"},"type":"radialBar"},"evals":[],"jsHooks":[]}</script>
2021-07-23 11:19:23 +02:00
</div>
<div id="radar-charts" class="section level2">
<h2 class="hasAnchor">
<a href="#radar-charts" class="anchor" aria-hidden="true"></a>Radar charts</h2>
<p>Simple radar charts can be created with:</p>
<div class="sourceCode" id="cb15"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="va">mtcars</span><span class="op">$</span><span class="va">model</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/base/colnames.html" class="external-link">rownames</a></span><span class="op">(</span><span class="va">mtcars</span><span class="op">)</span>
<span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/utils/head.html" class="external-link">head</a></span><span class="op">(</span><span class="va">mtcars</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"radar"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">model</span>, y <span class="op">=</span> <span class="va">qsec</span><span class="op">)</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-ff1153c5034ba85a1986" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-ff1153c5034ba85a1986">{"x":{"ax_opts":{"chart":{"type":"radar"},"series":[{"name":"qsec","data":[{"x":"Mazda RX4","y":16.46},{"x":"Mazda RX4 Wag","y":17.02},{"x":"Datsun 710","y":18.61},{"x":"Hornet 4 Drive","y":19.44},{"x":"Hornet Sportabout","y":17.02},{"x":"Valiant","y":20.22}]}],"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":"Datsun 710","max":"Valiant"},"type":"radar"},"evals":[],"jsHooks":[]}</script><p>With a grouping variable:</p>
2021-07-23 11:19:23 +02:00
<div class="sourceCode" id="cb16"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="co"># extremely complicated reshaping</span>
<span class="va">new_mtcars</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/stats/reshape.html" class="external-link">reshape</a></span><span class="op">(</span>
data <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/utils/head.html" class="external-link">head</a></span><span class="op">(</span><span class="va">mtcars</span><span class="op">)</span>,
idvar <span class="op">=</span> <span class="st">"model"</span>,
varying <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span><span class="st">"drat"</span>, <span class="st">"wt"</span><span class="op">)</span><span class="op">)</span>,
times <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span><span class="st">"drat"</span>, <span class="st">"wt"</span><span class="op">)</span>,
direction <span class="op">=</span> <span class="st">"long"</span>,
v.names <span class="op">=</span> <span class="st">"value"</span>,
drop <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span><span class="st">"mpg"</span>, <span class="st">"cyl"</span>, <span class="st">"hp"</span>, <span class="st">"dist"</span>, <span class="st">"qsec"</span>, <span class="st">"vs"</span>, <span class="st">"am"</span>, <span class="st">"gear"</span>, <span class="st">"carb"</span><span class="op">)</span>
<span class="op">)</span>
<span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">new_mtcars</span>, type <span class="op">=</span> <span class="st">"radar"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">model</span>, y <span class="op">=</span> <span class="va">value</span>, group <span class="op">=</span> <span class="va">time</span><span class="op">)</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-016713c1740ff7482d44" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-016713c1740ff7482d44">{"x":{"ax_opts":{"chart":{"type":"radar"},"series":[{"name":"drat","data":[{"x":"Mazda RX4","y":3.9},{"x":"Mazda RX4 Wag","y":3.9},{"x":"Datsun 710","y":3.85},{"x":"Hornet 4 Drive","y":3.08},{"x":"Hornet Sportabout","y":3.15},{"x":"Valiant","y":2.76}]},{"name":"wt","data":[{"x":"Mazda RX4","y":2.62},{"x":"Mazda RX4 Wag","y":2.875},{"x":"Datsun 710","y":2.32},{"x":"Hornet 4 Drive","y":3.215},{"x":"Hornet Sportabout","y":3.44},{"x":"Valiant","y":3.46}]}],"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":"Datsun 710","max":"Valiant"},"type":"radar"},"evals":[],"jsHooks":[]}</script>
2021-07-23 11:19:23 +02:00
</div>
<div id="polar-area" class="section level2">
<h2 class="hasAnchor">
<a href="#polar-area" class="anchor" aria-hidden="true"></a>Polar area</h2>
<p>With some custom options for color mapping:</p>
<div class="sourceCode" id="cb17"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span><span class="va">mtcars</span>, <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/colnames.html" class="external-link">rownames</a></span><span class="op">(</span><span class="va">mtcars</span><span class="op">)</span>, <span class="va">mpg</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"polarArea"</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_legend.html">ax_legend</a></span><span class="op">(</span>show <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_colors.html">ax_colors</a></span><span class="op">(</span><span class="fu"><a href="https://scales.r-lib.org/reference/col_numeric.html" class="external-link">col_numeric</a></span><span class="op">(</span><span class="st">"Blues"</span>, domain <span class="op">=</span> <span class="cn">NULL</span><span class="op">)</span><span class="op">(</span><span class="va">mtcars</span><span class="op">$</span><span class="va">mpg</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_fill.html">ax_fill</a></span><span class="op">(</span>opacity <span class="op">=</span> <span class="fl">1</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">0</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_tooltip.html">ax_tooltip</a></span><span class="op">(</span>fillSeriesColor <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-748f89b8da96d55b482e" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-748f89b8da96d55b482e">{"x":{"ax_opts":{"chart":{"type":"polarArea"},"series":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"labels":["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hornet Sportabout","Valiant","Duster 360","Merc 240D","Merc 230","Merc 280","Merc 280C","Merc 450SE","Merc 450SL","Merc 450SLC","Cadillac Fleetwood","Lincoln Continental","Chrysler Imperial","Fiat 128","Honda Civic","Toyota Corolla","Toyota Corona","Dodge Challenger","AMC Javelin","Camaro Z28","Pontiac Firebird","Fiat X1-9","Porsche 914-2","Lotus Europa","Ford Pantera L","Ferrari Dino","Maserati Bora","Volvo 142E"],"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"legend":{"show":false},"colors":["#80B9DA","#80B9DA","#63A8D2","#79B5D9","#A5CDE3","#ADD0E6","#D6E6F4","#4D98CA","#63A8D2","#9ECAE1","#B2D2E8","#C4DAEE","#B8D5EA","#CFE1F2","#F7FBFF","#F7FBFF","#D3E4F3","#094184","#0F57A1","#08306B","#77B4D8","#CCDFF1","#CFE1F2","#DEEBF7","#9ECAE1","#2B79B9","#3988C1","#0F57A1","#CADEF0","#96C5DF","#D0E2F2","#79B5D9"],"fill":{"opacity":1},"stroke":{"width":0},"tooltip":{"fillSeriesColor":false}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"AMC Javelin","max":"Volvo 142E"},"type":"polarArea"},"evals":[],"jsHooks":[]}</script>
2021-07-23 11:19:23 +02:00
</div>
<div id="heatmap" class="section level2">
<h2 class="hasAnchor">
<a href="#heatmap" class="anchor" aria-hidden="true"></a>Heatmap</h2>
<p>Create a heatmap with :</p>
<div class="sourceCode" id="cb18"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="co"># create some data</span>
<span class="va">sales</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/base/expand.grid.html" class="external-link">expand.grid</a></span><span class="op">(</span>year <span class="op">=</span> <span class="fl">2010</span><span class="op">:</span><span class="fl">2020</span>, month <span class="op">=</span> <span class="va">month.name</span><span class="op">)</span>
<span class="va">sales</span><span class="op">$</span><span class="va">value</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/base/sample.html" class="external-link">sample</a></span><span class="op">(</span><span class="op">-</span><span class="fl">10</span><span class="op">:</span><span class="fl">30</span>, <span class="fu"><a href="https://rdrr.io/r/base/nrow.html" class="external-link">nrow</a></span><span class="op">(</span><span class="va">sales</span><span class="op">)</span>, <span class="cn">TRUE</span><span class="op">)</span>
<span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>
data <span class="op">=</span> <span class="va">sales</span>,
type <span class="op">=</span> <span class="st">"heatmap"</span>,
mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">year</span>, y <span class="op">=</span> <span class="va">month</span>, fill <span class="op">=</span> <span class="va">value</span><span class="op">)</span>
<span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_dataLabels.html">ax_dataLabels</a></span><span class="op">(</span>enabled <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_colors.html">ax_colors</a></span><span class="op">(</span><span class="st">"#008FFB"</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-6c28637e1384fd5ca55a" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-6c28637e1384fd5ca55a">{"x":{"ax_opts":{"chart":{"type":"heatmap"},"series":[{"name":"January","data":[{"x":2010,"y":23},{"x":2011,"y":6},{"x":2012,"y":3},{"x":2013,"y":25},{"x":2014,"y":5},{"x":2015,"y":21},{"x":2016,"y":6},{"x":2017,"y":17},{"x":2018,"y":2},{"x":2019,"y":22},{"x":2020,"y":6}]},{"name":"February","data":[{"x":2010,"y":-10},{"x":2011,"y":-9},{"x":2012,"y":2},{"x":2013,"y":26},{"x":2014,"y":-2},{"x":2015,"y":1},{"x":2016,"y":-9},{"x":2017,"y":-4},{"x":2018,"y":-4},{"x":2019,"y":6},{"x":2020,"y":14}]},{"name":"March","data":[{"x":2010,"y":3},{"x":2011,"y":-2},{"x":2012,"y":15},{"x":2013,"y":23},{"x":2014,"y":-10},{"x":2015,"y":1},{"x":2016,"y":11},{"x":2017,"y":-5},{"x":2018,"y":-5},{"x":2019,"y":14},{"x":2020,"y":20}]},{"name":"April","data":[{"x":2010,"y":26},{"x":2011,"y":19},{"x":2012,"y":-8},{"x":2013,"y":-8},{"x":2014,"y":17},{"x":2015,"y":-4},{"x":2016,"y":-7},{"x":2017,"y":9},{"x":2018,"y":-3},{"x":2019,"y":29},{"x":2020,"y":28}]},{"name":"May","data":[{"x":2010,"y":9},{"x":2011,"y":-4},{"x":2012,"y":27},{"x":2013,"y":7},{"x":2014,"y":25},{"x":2015,"y":-2},{"x":2016,"y":1},{"x":2017,"y":26},{"x":2018,"y":-2},{"x":2019,"y":-4},{"x":2020,"y":20}]},{"name":"June","data":[{"x":2010,"y":20},{"x":2011,"y":21},{"x":2012,"y":-5},{"x":2013,"y":11},{"x":2014,"y":14},{"x":2015,"y":15},{"x":2016,"y":11},{"x":2017,"y":19},{"x":2018,"y":-6},{"x":2019,"y":4},{"x":2020,"y":11}]},{"name":"July","data":[{"x":2010,"y":16},{"x":2011,"y":30},{"x":2012,"y":-4},{"x":2013,"y":22},{"x":2014,"y":2},{"x":2015,"y":2},{"x":2016,"y":15},{"x":2017,"y":19},{"x":2018,"y":27},{"x":2019,"y":27},{"x":2020,"y":7}]},{"name":"August","data":[{"x":2010,"y":3},{"x":2011,"y":-7},{"x":2012,"y":5},{"x":2013,"y":5},{"x":2014,"y":7},{"x":2015,"y":0},{"x":2016,"y":5},{"x":2017,"y":7},{"x":2018,"y":9},{"x":2019,"y":-5},{"x":2020,"y":-7}]},{"name":"September","data":[{"x":2010,"y":1},{"x":2011,"y":30},{"x":2012,"y":16},{"x":2013,"y":15},{"x":2014,"y":-4},{"x":2015,"y":-9},{"x":2016,"y":29},{"x":2017,"y":9},{"x":2018,"y":-9},{"x":2019,"y":5},{"x":2020,"y":-2}]},{"name":"October","data":[{"x":2010,"y":-6},{"x":2011,"y":5},{"x":2012,"y":-1},{"x":2013,"y":16},{"x":2014,"y":12},{"x":2015,"y":11},{"x":2016,"y":17},{"x":2017,"y":-2},{"x":2018,"y":30},{"x":2019,"y":25},{"x":2020,"y":9}]},{"name":"November","data":[{"x":2010,"y":-6},{"x":2011,"y":18},{"x":2012,"y":27},{"x":2013,"y":16},{"x":2014,"y":19},{"x":2015,"y":10},{"x":2016,"y":12},{"x":2017,"y":22},{"x":2018,"y":24},{"x":2019,"y":7},{"x":2020,"y":24}]},{"name":"December","data":[{"x":2010,"y":1},{"x":2011,"y":-1},{"x":2012,"y":-3},{"x":2013,"y":15},{"x":2014,"y":29},{"x":2015,"y":13},{"x":2016,"y":-7},{"x":2017,"y":26},{"x":2018,"y":20},{"x":2019,"y":-9},{"x":2020,"y":25}]}],"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"dataLabels":{"enabled":false},"colors":["#008FFB"]},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":2010,"max":2020},"type":"heatmap"},"evals":[],"jsHooks":[]}</script>
2021-07-23 11:19:23 +02:00
</div>
<div id="treemap" class="section level2">
<h2 class="hasAnchor">
<a href="#treemap" class="anchor" aria-hidden="true"></a>Treemap</h2>
<p>Create a treemap with:</p>
<div class="sourceCode" id="cb19"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="https://rdrr.io/r/utils/data.html" class="external-link">data</a></span><span class="op">(</span><span class="st">"mpg"</span>, package <span class="op">=</span> <span class="st">"ggplot2"</span><span class="op">)</span>
<span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span><span class="va">mpg</span>, <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">manufacturer</span><span class="op">)</span>, <span class="st">"treemap"</span><span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-5d54f3d6602291a20b49" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-5d54f3d6602291a20b49">{"x":{"ax_opts":{"chart":{"type":"treemap"},"series":[{"name":[],"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}]}],"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":"treemap"},"evals":[],"jsHooks":[]}</script>
2021-07-23 11:19:23 +02:00
</div>
<div id="candlestick" class="section level2">
<h2 class="hasAnchor">
<a href="#candlestick" class="anchor" aria-hidden="true"></a>Candlestick</h2>
<p>Create a candlestick chart with:</p>
<div class="sourceCode" id="cb20"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="https://rdrr.io/r/utils/data.html" class="external-link">data</a></span><span class="op">(</span><span class="st">"candles"</span>, package <span class="op">=</span> <span class="st">"apexcharter"</span><span class="op">)</span>
<span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>
<span class="va">candles</span>,
<span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">datetime</span>, open <span class="op">=</span> <span class="va">open</span>, close <span class="op">=</span> <span class="va">close</span>, low <span class="op">=</span> <span class="va">low</span>, high <span class="op">=</span> <span class="va">high</span><span class="op">)</span>,
type <span class="op">=</span> <span class="st">"candlestick"</span>
<span class="op">)</span></code></pre></div>
2021-10-20 18:23:29 +02:00
<div id="htmlwidget-3f0730592717b78364fa" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-3f0730592717b78364fa">{"x":{"ax_opts":{"chart":{"type":"candlestick"},"series":[{"type":"candlestick","data":[{"x":1538778600000,"y":[6629.81,6650.5,6623.04,6633.33]},{"x":1538780400000,"y":[6632.01,6643.59,6620,6630.11]},{"x":1538782200000,"y":[6630.71,6648.95,6623.34,6635.65]},{"x":1538784000000,"y":[6635.65,6651,6629.67,6638.24]},{"x":1538785800000,"y":[6638.24,6640,6620,6624.47]},{"x":1538787600000,"y":[6624.53,6636.03,6621.68,6624.31]},{"x":1538789400000,"y":[6624.61,6632.2,6617,6626.02]},{"x":1538791200000,"y":[6627,6627.62,6584.22,6603.02]},{"x":1538793000000,"y":[6605,6608.03,6598.95,6604.01]},{"x":1538794800000,"y":[6604.5,6614.4,6602.26,6608.02]},{"x":1538796600000,"y":[6608.02,6610.68,6601.99,6608.91]},{"x":1538798400000,"y":[6608.91,6618.99,6608.01,6612]},{"x":1538800200000,"y":[6612,6615.13,6605.09,6612]},{"x":1538802000000,"y":[6612,6624.12,6608.43,6622.95]},{"x":1538803800000,"y":[6623.91,6623.91,6615,6615.67]},{"x":1538805600000,"y":[6618.69,6618.74,6610,6610.4]},{"x":1538807400000,"y":[6611,6622.78,6610.4,6614.9]},{"x":1538809200000,"y":[6614.9,6626.2,6613.33,6623.45]},{"x":1538811000000,"y":[6623.48,6627,6618.38,6620.35]},{"x":1538812800000,"y":[6619.43,6620.35,6610.05,6615.53]},{"x":1538814600000,"y":[6615.53,6617.93,6610,6615.19]},{"x":1538816400000,"y":[6615.19,6621.6,6608.2,6620]},{"x":1538818200000,"y":[6619.54,6625.17,6614.15,6620]},{"x":1538820000000,"y":[6620.33,6634.15,6617.24,6624.61]},{"x":1538821800000,"y":[6625.95,6626,6611.66,6617.58]},{"x":1538823600000,"y":[6619,6625.97,6595.27,6598.86]},{"x":1538825400000,"y":[6598.86,6598.88,6570,6587.16]},{"x":1538827200000,"y":[6588.86,6600,6580,6593.4]},{"x":1538829000000,"y":[6593.99,6598.89,6585,6587.81]},{"x":1538830800000,"y":[6587.81,6592.73,6567.14,6578]},{"x":1538832600000,"y":[6578.35,6581.72,6567.39,6579]},{"x":1538834400000,"y":[6579.38,6580.92,6566.77,6575.96]},{"x":1538836200000,"y":[6575.96,6589,6571.77,6588.92]},{"x":1538838000000,"y":[6588.92,6594,6577.55,6589.22]},{"x":1538839800000,"y":[6589.3,6598.89,6589.1,6596.08]},{"x":1538841600000,"y":[6597.5,6600,6588.39,6596.25]},{"x":1538843400000,"y":[6598.03,6600,6588.73,6595.97]},{"x":1538845200000,"y":[6595.97,6602.01,6588.17,6602]},{"x":1538847000000,"y":[6602,6607,6596.51,6599.95]},{"x":1538848800000,"y":[6600.63,6601.21,6590.39,6591.02]},{"x":1538850600000,"y":[6591.02,6603.08,6591,6591]},{"x":1538852400000,"y":[6591,6601.32,6585,6592]},{"x":1538854200000,"y":[6593.13,6596.01,6590,6593.34]},{"x":1538856000000,"y":[6593.34,6604.76,6582.63,6593.86]},{"x":1538857800000,"y":[6593.86,6604.28,6586.57,6600.01]},{"x":1538859600000,"y":[6601.81,6603.21,6592.78,6596.25]},{"x":1538861400000,"y":[6596.25,6604.2,6590,6602.99]},{"x":1538863200000,"y":[6602.99,6606,6584.99,6587.81]},{"x":1538865000000,"y":[6587.81,6595,6583.27,6591.96]},{"x":1538866800000,"y":[6591.97,6596.07,6585,6588.39]},{"x":1538868600000,"y":[6587.6,6598.21,6587.6,6594.27]},{"x":1538870400000,"y":[6596.44,6601,6590,6596.55]},{"x":1538872200000,"y":[6598.91,6605,6596.61,6600.02]},{"x":1538874000000,"y":[6600.55,6605,6589.14,6593.01]},{"x":1538875800000,"y":[6593.15,6605,6592,6603.06]},{"x":1538877600000,"y":[6603.07,6604.5,6599.09,6603.89]},{"x":1538879400000,"y":[6604.44,6604.44,6600,6603.5]},{"x":1538881200000,"y":[6603.5,6603.99,6597.5,6603.86]},{"x":1538883000000,"y":[6603.85,6605,6600,6604.07]},{"x":1538884800000,"y":[6604.98,6606,6604.07,6606]}]}],"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"yaxis":{"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":"2018-10-05T22:30:00Z","max":"2018-10-07T04:00:00Z"},"type":"candlestick"},"evals":[],"jsHooks":[]}</script>
2021-07-23 11:19:23 +02:00
</div>
</div>
<div class="col-md-3 d-none d-md-block" id="pkgdown-sidebar">
<div class="sticky-top">
<nav id="toc"><h2 data-toc-skip>Contents</h2>
</nav>
</div>
</div>
</div>
<footer><div class="pkgdown-footer-left">
<p></p>
<p>Developed by <a href="https://twitter.com/_pvictorr" class="external-link external-link"><img src="https://pbs.twimg.com/profile_images/844237339404722177/E1U61aM8_normal.jpg"> Victor Perrier</a>, <a href="https://twitter.com/_mfaan" class="external-link external-link"><img src="https://pbs.twimg.com/profile_images/912313931326218240/o1-wvA18_normal.jpg"> Fanny Meyer</a>.</p>
</div>
<div class="pkgdown-footer-right">
<p></p>
<p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link external-link">pkgdown</a> 1.6.1.9001.</p>
</div>
</footer>
</div>
</body>
</html>