apexcharter/articles/apexcharter.html

304 lines
256 KiB
HTML
Raw Normal View History

<!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-5.1.0/bootstrap.min.css" rel="stylesheet">
<script src="../deps/bootstrap-5.1.0/bootstrap.bundle.min.js"></script><link href="../deps/_Poppins-0.4.0/font.css" rel="stylesheet">
<!-- 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">
<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 --><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>
<a href="#main" class="visually-hidden-focusable">Skip to contents</a>
<nav class="navbar fixed-top navbar-dark navbar-expand-lg bg-primary"><div class="container">
<a class="navbar-brand me-2" href="../index.html">apexcharter</a>
<small class="nav-text text-muted me-auto" data-bs-toggle="tooltip" data-bs-placement="bottom" title="">0.3.0.9000</small>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse ms-2">
<ul class="navbar-nav me-auto">
<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-bs-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" id="dropdown-articles">Articles</a>
<div class="dropdown-menu" aria-labelledby="dropdown-articles">
<a class="dropdown-item" href="../articles/extra/advanced-configuration.html">Advanced configuration examples</a>
<a class="dropdown-item" href="../articles/extra/chart-options.html">Customize chart options</a>
<a class="dropdown-item" href="../articles/extra/facets.html">Create grid of charts</a>
<a class="dropdown-item" href="../articles/extra/shiny-integration.html">Use in Shiny application</a>
<a class="dropdown-item" href="../articles/extra/spark-box.html">Create boxes with sparklines</a>
<a class="dropdown-item" href="../articles/extra/sync-charts.html">Synchronize charts with each other</a>
</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 me-sm-2" aria-label="Toggle navigation" name="search-input" data-search-index="../search.json" id="search-input" placeholder="Search for" autocomplete="off">
</form>
<ul class="navbar-nav">
<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">
<script src="apexcharter_files/accessible-code-block-0.0.1/empty-anchor.js"></script><script src="apexcharter_files/htmlwidgets-1.5.4/htmlwidgets.js"></script><script src="apexcharter_files/apexcharter-binding-0.3.0.9000/apexcharter.js"></script><div class="row">
<main id="main"><div class="page-header">
<img src="" class="logo" alt=""><h1>Starting with ApexCharts</h1>
<h4 data-toc-skip class="author">Victor Perrier</h4>
<h4 data-toc-skip class="date">2021-12-11</h4>
<small class="dont-index">Source: <a href="https://github.com/dreamRs/apexcharter/blob/HEAD/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 class="section level2">
<h2 id="bar-charts">Bar charts<a class="anchor" aria-label="anchor" href="#bar-charts"></a>
</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>
<div id="htmlwidget-723edf8f353527158fd7" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-723edf8f353527158fd7">{"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>
<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>
<div id="htmlwidget-d2f1cb771ab9ff65939a" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-d2f1cb771ab9ff65939a">{"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>
<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>
<div id="htmlwidget-15c98819cb313861acd0" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-15c98819cb313861acd0">{"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>
<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>
<div id="htmlwidget-14eb1d8d65a8228ddcde" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-14eb1d8d65a8228ddcde">{"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>
</div>
<div class="section level2">
<h2 id="line-charts">Line charts<a class="anchor" aria-label="anchor" href="#line-charts"></a>
</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>
<div id="htmlwidget-2eee2d4a4368b5492a03" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-2eee2d4a4368b5492a03">{"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],[
<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>
<div id="htmlwidget-f76996f52bfc4da4e2ff" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-f76996f52bfc4da4e2ff">{"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
<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>
<div id="htmlwidget-d2cc8e87a3fd9a935fbe" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-d2cc8e87a3fd9a935fbe">{"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
</div>
<div class="section level2">
<h2 id="scatter-charts">Scatter charts<a class="anchor" aria-label="anchor" href="#scatter-charts"></a>
</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>
<div id="htmlwidget-4f39eb10450173e5026c" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-4f39eb10450173e5026c">{"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>
<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>
<div id="htmlwidget-08ba976eed98a0acc2a9" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-08ba976eed98a0acc2a9">{"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>
<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>
<div id="htmlwidget-1142e121c1f35ef6ee3e" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-1142e121c1f35ef6ee3e">{"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>
</div>
<div class="section level2">
<h2 id="pie-charts">Pie charts<a class="anchor" aria-label="anchor" href="#pie-charts"></a>
</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>
<div id="htmlwidget-7ad230fa623f0491b2a0" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-7ad230fa623f0491b2a0">{"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>
</div>
<div class="section level2">
<h2 id="radial-charts">Radial charts<a class="anchor" aria-label="anchor" href="#radial-charts"></a>
</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>
<div id="htmlwidget-964f37d7cd5f7636f323" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-964f37d7cd5f7636f323">{"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>
<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>
<div id="htmlwidget-93132dfc0f4103b62a41" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-93132dfc0f4103b62a41">{"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>
</div>
<div class="section level2">
<h2 id="radar-charts">Radar charts<a class="anchor" aria-label="anchor" href="#radar-charts"></a>
</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>
<div id="htmlwidget-0790aa47522eac6f2ddf" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-0790aa47522eac6f2ddf">{"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>
<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>
<div id="htmlwidget-85a8d35da110118b0ea4" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-85a8d35da110118b0ea4">{"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>
</div>
<div class="section level2">
<h2 id="polar-area">Polar area<a class="anchor" aria-label="anchor" href="#polar-area"></a>
</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>
<div id="htmlwidget-130171cf2ac8b8c0f554" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-130171cf2ac8b8c0f554">{"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>
</div>
<div class="section level2">
<h2 id="heatmap">Heatmap<a class="anchor" aria-label="anchor" href="#heatmap"></a>
</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>
<div id="htmlwidget-e0b592c680254d969d9e" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-e0b592c680254d969d9e">{"x":{"ax_opts":{"chart":{"type":"heatmap"},"series":[{"name":"January","data":[{"x":2010,"y":21},{"x":2011,"y":5},{"x":2012,"y":29},{"x":2013,"y":11},{"x":2014,"y":5},{"x":2015,"y":13},{"x":2016,"y":8},{"x":2017,"y":1},{"x":2018,"y":16},{"x":2019,"y":27},{"x":2020,"y":9}]},{"name":"February","data":[{"x":2010,"y":16},{"x":2011,"y":11},{"x":2012,"y":-1},{"x":2013,"y":-2},{"x":2014,"y":15},{"x":2015,"y":1},{"x":2016,"y":23},{"x":2017,"y":6},{"x":2018,"y":10},{"x":2019,"y":19},{"x":2020,"y":3}]},{"name":"March","data":[{"x":2010,"y":27},{"x":2011,"y":30},{"x":2012,"y":24},{"x":2013,"y":3},{"x":2014,"y":18},{"x":2015,"y":20},{"x":2016,"y":0},{"x":2017,"y":-7},{"x":2018,"y":30},{"x":2019,"y":-1},{"x":2020,"y":-7}]},{"name":"April","data":[{"x":2010,"y":12},{"x":2011,"y":3},{"x":2012,"y":26},{"x":2013,"y":24},{"x":2014,"y":8},{"x":2015,"y":2},{"x":2016,"y":4},{"x":2017,"y":-3},{"x":2018,"y":25},{"x":2019,"y":16},{"x":2020,"y":9}]},{"name":"May","data":[{"x":2010,"y":21},{"x":2011,"y":5},{"x":2012,"y":6},{"x":2013,"y":-5},{"x":2014,"y":-9},{"x":2015,"y":27},{"x":2016,"y":-8},{"x":2017,"y":-2},{"x":2018,"y":13},{"x":2019,"y":14},{"x":2020,"y":22}]},{"name":"June","data":[{"x":2010,"y":-8},{"x":2011,"y":7},{"x":2012,"y":-8},{"x":2013,"y":23},{"x":2014,"y":23},{"x":2015,"y":-9},{"x":2016,"y":20},{"x":2017,"y":8},{"x":2018,"y":24},{"x":2019,"y":-6},{"x":2020,"y":7}]},{"name":"July","data":[{"x":2010,"y":22},{"x":2011,"y":12},{"x":2012,"y":5},{"x":2013,"y":13},{"x":2014,"y":3},{"x":2015,"y":21},{"x":2016,"y":25},{"x":2017,"y":9},{"x":2018,"y":9},{"x":2019,"y":5},{"x":2020,"y":-9}]},{"name":"August","data":[{"x":2010,"y":-7},{"x":2011,"y":-9},{"x":2012,"y":-3},{"x":2013,"y":6},{"x":2014,"y":-3},{"x":2015,"y":8},{"x":2016,"y":21},{"x":2017,"y":-5},{"x":2018,"y":30},{"x":2019,"y":9},{"x":2020,"y":19}]},{"name":"September","data":[{"x":2010,"y":23},{"x":2011,"y":6},{"x":2012,"y":7},{"x":2013,"y":1},{"x":2014,"y":4},{"x":2015,"y":26},{"x":2016,"y":9},{"x":2017,"y":-9},{"x":2018,"y":5},{"x":2019,"y":-2},{"x":2020,"y":-10}]},{"name":"October","data":[{"x":2010,"y":10},{"x":2011,"y":22},{"x":2012,"y":8},{"x":2013,"y":-4},{"x":2014,"y":-10},{"x":2015,"y":27},{"x":2016,"y":3},{"x":2017,"y":12},{"x":2018,"y":19},{"x":2019,"y":20},{"x":2020,"y":1}]},{"name":"November","data":[{"x":2010,"y":-6},{"x":2011,"y":-8},{"x":2012,"y":25},{"x":2013,"y":-1},{"x":2014,"y":17},{"x":2015,"y":13},{"x":2016,"y":1},{"x":2017,"y":23},{"x":2018,"y":-2},{"x":2019,"y":15},{"x":2020,"y":10}]},{"name":"December","data":[{"x":2010,"y":12},{"x":2011,"y":-1},{"x":2012,"y":7},{"x":2013,"y":15},{"x":2014,"y":16},{"x":2015,"y":6},{"x":2016,"y":-3},{"x":2017,"y":3},{"x":2018,"y":19},{"x":2019,"y":29},{"x":2020,"y":11}]}],"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>
</div>
<div class="section level2">
<h2 id="treemap">Treemap<a class="anchor" aria-label="anchor" href="#treemap"></a>
</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>
<div id="htmlwidget-3a0b84c2e36cfd895b57" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-3a0b84c2e36cfd895b57">{"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>
</div>
<div class="section level2">
<h2 id="candlestick">Candlestick<a class="anchor" aria-label="anchor" href="#candlestick"></a>
</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>
<div id="htmlwidget-cb2176f48859d4964973" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-cb2176f48859d4964973">{"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>
</div>
</main><aside class="col-md-3"><nav id="toc"><h2>On this page</h2>
</nav></aside>
</div>
<footer><div class="pkgdown-footer-left">
<p></p>
<p>Developed by <a href="https://twitter.com/_pvictorr" class="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"><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">pkgdown</a> 2.0.1.</p>
</div>
</footer>
</div>
</body>
</html>