apexcharter/articles/extra/advanced-configuration.html

808 lines
209 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>Advanced configuration examples • 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.3.1/bootstrap.min.css" rel="stylesheet">
<script src="../../deps/bootstrap-5.3.1/bootstrap.bundle.min.js"></script><link href="../../deps/Poppins-0.4.9/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.jsdelivr.net/gh/afeld/bootstrap-toc@v1.0.1/dist/bootstrap-toc.min.js" integrity="sha256-4veVQbu7//Lk5TSmc7YV48MxtMy98e26cf5MrgZYnwo=" crossorigin="anonymous"></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="Advanced configuration examples">
<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.4.1.9300</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-3">
<ul class="navbar-nav me-auto">
<li class="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="active 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="advanced-configuration_files/htmlwidgets-1.6.4/htmlwidgets.js"></script><script src="advanced-configuration_files/apexcharter-binding-0.4.1.9300/apexcharter.js"></script><div class="row">
<main id="main" class="col-md-9"><div class="page-header">
<img src="" class="logo" alt=""><h1>Advanced configuration examples</h1>
<small class="dont-index">Source: <a href="https://github.com/dreamRs/apexcharter/blob/HEAD/vignettes/extra/advanced-configuration.Rmd" class="external-link"><code>vignettes/extra/advanced-configuration.Rmd</code></a></small>
<div class="d-none name"><code>advanced-configuration.Rmd</code></div>
</div>
<div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">
<code class="sourceCode R"><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></span>
<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://dplyr.tidyverse.org" class="external-link">dplyr</a></span><span class="op">)</span></span></code></pre></div>
<p>Here some advanced configuration examples to use the full potential
of <a href="https://apexcharts.com/" class="external-link">ApexCharts</a>.</p>
<div class="section level2">
<h2 id="bar-chart">Bar chart<a class="anchor" aria-label="anchor" href="#bar-chart"></a>
</h2>
<p>This example is taken from <a href="https://github.com/hrbrmstr/hrbrthemes" class="external-link">{hrbrthemes}</a> readme,
it use <code>mpg</code> dataset from <a href="https://github.com/tidyverse/ggplot2" class="external-link">{ggplot2}</a>.</p>
<p>Transform data and initialize the chart :</p>
<div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><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>
<span></span>
<span><span class="va">bars</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://dplyr.tidyverse.org/reference/count.html" class="external-link">count</a></span><span class="op">(</span><span class="va">mpg</span>, <span class="va">class</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="https://dplyr.tidyverse.org/reference/mutate.html" class="external-link">mutate</a></span><span class="op">(</span>pct <span class="op">=</span> <span class="va">n</span><span class="op">/</span><span class="fu"><a href="https://rdrr.io/r/base/sum.html" class="external-link">sum</a></span><span class="op">(</span><span class="va">n</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/apex.html">apex</a></span><span class="op">(</span>mapping <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span><span class="va">class</span>, <span class="va">pct</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"column"</span><span class="op">)</span></span></code></pre></div>
<p>Change color used :</p>
<div class="sourceCode" id="cb3"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">bars</span> <span class="op">&lt;-</span> <span class="va">bars</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_colors.html">ax_colors</a></span><span class="op">(</span><span class="st">"#617a89"</span><span class="op">)</span></span></code></pre></div>
<p>Modify the y-axis and add a percent symbol after the labels :</p>
<div class="sourceCode" id="cb4"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">bars</span> <span class="op">&lt;-</span> <span class="va">bars</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span></span>
<span> title <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>text <span class="op">=</span> <span class="st">"Weight (tons)"</span><span class="op">)</span>,</span>
<span> labels <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>
<span> formatter <span class="op">=</span> <span class="fu"><a href="../../reference/format_num.html">format_num</a></span><span class="op">(</span><span class="st">".0%"</span><span class="op">)</span></span>
<span> <span class="op">)</span>, </span>
<span> tickAmount <span class="op">=</span> <span class="fl">6</span>,</span>
<span> max <span class="op">=</span> <span class="fl">0.3</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Add a title to the x-axis :</p>
<div class="sourceCode" id="cb5"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">bars</span> <span class="op">&lt;-</span> <span class="va">bars</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_xaxis.html">ax_xaxis</a></span><span class="op">(</span></span>
<span> title <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>text <span class="op">=</span> <span class="st">"Fuel efficiency (mpg)"</span><span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Modify the tooltip to display “Percentage” instead of the variable
name “pct” :</p>
<div class="sourceCode" id="cb6"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">bars</span> <span class="op">&lt;-</span> <span class="va">bars</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_tooltip.html">ax_tooltip</a></span><span class="op">(</span></span>
<span> y <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>
<span> title <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>
<span> formatter <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">JS</a></span><span class="op">(</span><span class="st">"function() {return 'Percentage';}"</span><span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Add title and subtitle and format them :</p>
<div class="sourceCode" id="cb7"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">bars</span> <span class="op">&lt;-</span> <span class="va">bars</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_labs.html">ax_labs</a></span><span class="op">(</span></span>
<span> title <span class="op">=</span> <span class="st">"Seminal ggplot2 column chart example with percents"</span>,</span>
<span> subtitle <span class="op">=</span> <span class="st">"Example taken from {hrbrthemes} readme"</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_title.html">ax_title</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"22px"</span><span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"16px"</span>, color <span class="op">=</span> <span class="st">"#BDBDBD"</span><span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Final result looks like :</p>
<div class="sourceCode" id="cb8"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">bars</span></span></code></pre></div>
<div class="apexcharter html-widget html-fill-item" id="htmlwidget-d6843bf7897571421d89" style="width:100%;height:350px;"></div>
<script type="application/json" data-for="htmlwidget-d6843bf7897571421d89">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"pct","type":"bar","data":[{"x":"2seater","y":0.02136752136752137},{"x":"compact","y":0.2008547008547009},{"x":"midsize","y":0.1752136752136752},{"x":"minivan","y":0.04700854700854701},{"x":"pickup","y":0.141025641025641},{"x":"subcompact","y":0.1495726495726496},{"x":"suv","y":0.264957264957265}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false,"isDumbbell":false}},"tooltip":{"shared":true,"intersect":false,"followCursor":true,"y":{"title":{"formatter":"function() {return 'Percentage';}"}}},"grid":{"yaxis":{"lines":{"show":true}},"xaxis":{"lines":{"show":false}}},"yaxis":{"labels":{"style":{"colors":"#848484"},"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('.0%')(value) + '';}"},"tickAmount":6,"max":0.3,"title":{"text":"Weight (tons)"}},"xaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Fuel efficiency (mpg)"}},"colors":["#617a89"],"title":{"text":"Seminal ggplot2 column chart example with percents","style":{"fontWeight":700,"fontSize":"22px"}},"subtitle":{"text":"Example taken from {hrbrthemes} readme","style":{"fontWeight":400,"fontSize":"16px","color":"#BDBDBD"}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2seater","max":"suv"},"type":"column"},"evals":["ax_opts.tooltip.y.title.formatter","ax_opts.yaxis.labels.formatter"],"jsHooks":[]}</script><details><summary><span title="View full code">View full code</span>
</summary><div class="sourceCode" id="cb9"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><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>
<span></span>
<span><span class="fu"><a href="https://dplyr.tidyverse.org/reference/count.html" class="external-link">count</a></span><span class="op">(</span><span class="va">mpg</span>, <span class="va">class</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="https://dplyr.tidyverse.org/reference/mutate.html" class="external-link">mutate</a></span><span class="op">(</span>pct <span class="op">=</span> <span class="va">n</span><span class="op">/</span><span class="fu"><a href="https://rdrr.io/r/base/sum.html" class="external-link">sum</a></span><span class="op">(</span><span class="va">n</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/apex.html">apex</a></span><span class="op">(</span>mapping <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span><span class="va">class</span>, <span class="va">pct</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"column"</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_colors.html">ax_colors</a></span><span class="op">(</span><span class="st">"#617a89"</span><span class="op">)</span><span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span></span>
<span> title <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>text <span class="op">=</span> <span class="st">"Weight (tons)"</span><span class="op">)</span>,</span>
<span> labels <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>
<span> formatter <span class="op">=</span> <span class="fu"><a href="../../reference/format_num.html">format_num</a></span><span class="op">(</span><span class="st">".0%"</span><span class="op">)</span></span>
<span> <span class="op">)</span>, </span>
<span> tickAmount <span class="op">=</span> <span class="fl">6</span>,</span>
<span> max <span class="op">=</span> <span class="fl">0.3</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_xaxis.html">ax_xaxis</a></span><span class="op">(</span></span>
<span> title <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>text <span class="op">=</span> <span class="st">"Fuel efficiency (mpg)"</span><span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_tooltip.html">ax_tooltip</a></span><span class="op">(</span></span>
<span> y <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>
<span> title <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>
<span> formatter <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">JS</a></span><span class="op">(</span><span class="st">"function() {return 'Percentage';}"</span><span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_labs.html">ax_labs</a></span><span class="op">(</span></span>
<span> title <span class="op">=</span> <span class="st">"Seminal ggplot2 column chart example with percents"</span>,</span>
<span> subtitle <span class="op">=</span> <span class="st">"Example taken from {hrbrthemes} readme"</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_title.html">ax_title</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"22px"</span><span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"16px"</span>, color <span class="op">=</span> <span class="st">"#BDBDBD"</span><span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
</details><p><br><br></p>
</div>
<div class="section level2">
<h2 id="lines">Lines<a class="anchor" aria-label="anchor" href="#lines"></a>
</h2>
<p>Dataset used is from the UNHCR (The UN Refugee Agency) and contains
data about UNHCRs populations of concern summarised by continent of
origin.</p>
<p>Transform data and initialize the chart :</p>
<div class="sourceCode" id="cb10"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><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">"unhcr_ts"</span><span class="op">)</span></span>
<span></span>
<span><span class="va">lines</span> <span class="op">&lt;-</span> <span class="va">unhcr_ts</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="https://dplyr.tidyverse.org/reference/filter.html" class="external-link">filter</a></span><span class="op">(</span><span class="va">population_type</span> <span class="op">==</span> <span class="st">"Refugees (incl. refugee-like situations)"</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="https://dplyr.tidyverse.org/reference/mutate.html" class="external-link">mutate</a></span><span class="op">(</span>date <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/as.Date.html" class="external-link">as.Date</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/paste.html" class="external-link">paste0</a></span><span class="op">(</span><span class="va">year</span>, <span class="st">"-01-01"</span><span class="op">)</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/apex.html">apex</a></span><span class="op">(</span><span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span><span class="va">date</span>, <span class="va">n</span>, group <span class="op">=</span> <span class="va">continent_origin</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"line"</span><span class="op">)</span></span>
<span><span class="co">#&gt; Warning in make_series(mapdata, mapping, type, serie_name): apex: all groups</span></span>
<span><span class="co">#&gt; must have same length! You can use `tidyr::complete` for this.</span></span></code></pre></div>
<p>Put the legend at the bottom :</p>
<div class="sourceCode" id="cb11"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">lines</span> <span class="op">&lt;-</span> <span class="va">lines</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_legend.html">ax_legend</a></span><span class="op">(</span>position <span class="op">=</span> <span class="st">"bottom"</span><span class="op">)</span></span></code></pre></div>
<p>Change the width of the lines :</p>
<div class="sourceCode" id="cb12"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">lines</span> <span class="op">&lt;-</span> <span class="va">lines</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<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">2</span><span class="op">)</span></span></code></pre></div>
<p>Change the colors (Viridis palette) :</p>
<div class="sourceCode" id="cb13"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">lines</span> <span class="op">&lt;-</span> <span class="va">lines</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_colors.html">ax_colors</a></span><span class="op">(</span><span class="st">"#440154"</span>, <span class="st">"#414487"</span>, <span class="st">"#2A788E"</span>,</span>
<span> <span class="st">"#22A884"</span>, <span class="st">"#7AD151"</span>, <span class="st">"#FDE725"</span><span class="op">)</span></span></code></pre></div>
<p>Data are in million, in the y-axis we divide by <code>1e6</code> to
limit the number of digits :</p>
<div class="sourceCode" id="cb14"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">lines</span> <span class="op">&lt;-</span> <span class="va">lines</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span></span>
<span> labels <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>
<span> formatter <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">JS</a></span><span class="op">(</span><span class="st">"function(val) {return (val/1e6).toFixed(0);}"</span><span class="op">)</span></span>
<span> <span class="op">)</span>,</span>
<span> title <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>text <span class="op">=</span> <span class="st">"Number of refugees (in million)"</span><span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Only display the years in the x-axis labels :</p>
<div class="sourceCode" id="cb15"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">lines</span> <span class="op">&lt;-</span> <span class="va">lines</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_xaxis.html">ax_xaxis</a></span><span class="op">(</span>labels <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>format <span class="op">=</span> <span class="st">"yyyy"</span><span class="op">)</span><span class="op">)</span></span></code></pre></div>
<p>Same in tooltip, and a thousand separator in the value displayed
:</p>
<div class="sourceCode" id="cb16"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">lines</span> <span class="op">&lt;-</span> <span class="va">lines</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_tooltip.html">ax_tooltip</a></span><span class="op">(</span></span>
<span> x <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>format <span class="op">=</span> <span class="st">"yyyy"</span><span class="op">)</span>,</span>
<span> y <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>
<span> formatter <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">JS</a></span><span class="op">(</span></span>
<span> <span class="co"># thousand separator in javascript</span></span>
<span> <span class="st">"function(value) {return value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");}"</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Add an annotation to the chart to identify the <a href="https://en.wikipedia.org/wiki/Great_Lakes_refugee_crisis" class="external-link">Great
Lakes refugee crisis</a> in 1994 :</p>
<div class="sourceCode" id="cb17"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">lines</span> <span class="op">&lt;-</span> <span class="va">lines</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_annotations.html">ax_annotations</a></span><span class="op">(</span></span>
<span> points <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>
<span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> x <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">JS</a></span><span class="op">(</span><span class="st">"new Date('1994').getTime()"</span><span class="op">)</span>,</span>
<span> y <span class="op">=</span> <span class="fl">6935296</span>,</span>
<span> label <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>text <span class="op">=</span> <span class="st">"Great Lakes refugee crisis"</span>, offsetY <span class="op">=</span> <span class="fl">0</span><span class="op">)</span>,</span>
<span> marker <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>size <span class="op">=</span> <span class="fl">6</span><span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Add title and subtitle and format them :</p>
<div class="sourceCode" id="cb18"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">lines</span> <span class="op">&lt;-</span> <span class="va">lines</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_labs.html">ax_labs</a></span><span class="op">(</span></span>
<span> title <span class="op">=</span> <span class="st">"Continent of origin for refugees population"</span>,</span>
<span> subtitle <span class="op">=</span> <span class="st">"Data from the UN Refugee Agency"</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_title.html">ax_title</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"22px"</span><span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"16px"</span>, color <span class="op">=</span> <span class="st">"#BDBDBD"</span><span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Final result looks like :</p>
<div class="sourceCode" id="cb19"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">lines</span></span></code></pre></div>
<div class="apexcharter html-widget html-fill-item" id="htmlwidget-412fd1d4ddf1f4f9c88e" style="width:100%;height:350px;"></div>
<script type="application/json" data-for="htmlwidget-412fd1d4ddf1f4f9c88e">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"Africa","type":"line","data":[[-315619200000,150000],[-283996800000,302000],[-252460800000,322000],[-220924800000,353000],[-189388800000,490300],[-157766400000,579460],[-126230400000,736320],[-94694400000,833690],[-63158400000,963850],[-31536000000,937540],[0,974770],[31536000000,976240],[63072000000,1071850],[94694400000,986220],[126230400000,1070220],[157766400000,1501340],[189302400000,1697590],[220924800000,2064965],[252460800000,2377380],[283996800000,3128940],[315532800000,4222403],[347155200000,3043515],[378691200000,2952215],[410227200000,2881859],[441763200000,3470578],[473385600000,3797764],[504921600000,3595154],[536457600000,3978264],[567993600000,4593524],[599616000000,4824904],[631152000000,5912693],[662688000000,5335460],[694224000000,5577181],[725846400000,6492397],[757382400000,6935296],[788918400000,5811513],[820454400000,4543635],[852076800000,3722238],[883612800000,3593405],[915148800000,3798915],[946684800000,3951187],[978307200000,3646853],[1009843200000,3715548],[1041379200000,3501590],[1072915200000,3409723],[1104537600000,3213525],[1136073600000,3156132],[1167609600000,2891309],[1199145600000,2769104],[1230768000000,2805162],[1262304000000,2947809],[1293840000000,3511640],[1325376000000,3677797],[1356998400000,3842504],[1388534400000,4623635],[1420070400000,5382290],[1451606400000,6165089],[1483228800000,7373420]]},{"name":"Asia","type":"line","data":[[-189388800000,1261170],[-157766400000,1397000],[-126230400000,1395810],[-94694400000,151180],[-63158400000,158830],[-31536000000,155240],[0,150760],[31536000000,195180],[63072000000,205130],[94694400000,101840],[126230400000,68000],[157766400000,84650],[189302400000,95420],[220924800000,264670],[252460800000,676850],[283996800000,1222020],[315532800000,2524154],[347155200000,4584803],[378691200000,5249822],[410227200000,5476427],[441763200000,5166666],[473385600000,5819892],[504921600000,6326541],[536457600000,6574797],[567993600000,7066582],[599616000000,7084483],[631152000000,8494046],[662688000000,8793297],[694224000000,7956380],[725846400000,6251694],[757382400000,5564747],[788918400000,5344395],[820454400000,5570972],[852076800000,5497379],[883612800000,5375832],[915148800000,5328517],[946684800000,5889397],[978307200000,6278879],[1009843200000,5208529],[1041379200000,4566604],[1072915200000,4752246],[1104537600000,4430665],[1136073600000,5523929],[1167609600000,7146281],[1199145600000,6525128],[1230768000000,6393200],[1262304000000,6441865],[1293840000000,5772713],[1325376000000,5713324],[1356998400000,6992887],[1388534400000,8718891],[1420070400000,9609536],[1451606400000,10000250],[1483228800000,11681576]]},{"name":"Europe","type":"line","data":[[-189388800000,220],[-157766400000,25820],[-126230400000,33190],[-94694400000,30950],[-63158400000,29210],[-31536000000,29460],[0,30730],[31536000000,3680],[63072000000,10690],[94694400000,9380],[126230400000,2010],[157766400000,1840],[189302400000,1120],[220924800000,2460],[252460800000,7130],[283996800000,1970],[315532800000,15846],[347155200000,16546],[378691200000,17155],[410227200000,17451],[441763200000,16592],[473385600000,18785],[504921600000,13467],[536457600000,13131],[567993600000,88047],[599616000000,149036],[631152000000,212051],[662688000000,265736],[694224000000,964362],[725846400000,1157164],[757382400000,1253868],[788918400000,1389346],[820454400000,1653932],[852076800000,1564757],[883612800000,1307240],[915148800000,1199074],[946684800000,1079134],[978307200000,998238],[1009843200000,1269077],[1041379200000,1097853],[1072915200000,948400],[1104537600000,698304],[1136073600000,772309],[1167609600000,516416],[1199145600000,539452],[1230768000000,528245],[1262304000000,500063],[1293840000000,467387],[1325376000000,456821],[1356998400000,233539],[1388534400000,444471],[1420070400000,507447],[1451606400000,412142],[1483228800000,308707]]},{"name":"North America","type":"line","data":[[-31536000000,14500],[0,16700],[31536000000,54500],[63072000000,17070]
</summary><div class="sourceCode" id="cb20"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><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">"unhcr_ts"</span><span class="op">)</span></span>
<span></span>
<span><span class="va">unhcr_ts</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="https://dplyr.tidyverse.org/reference/filter.html" class="external-link">filter</a></span><span class="op">(</span><span class="va">population_type</span> <span class="op">==</span> <span class="st">"Refugees (incl. refugee-like situations)"</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="https://dplyr.tidyverse.org/reference/mutate.html" class="external-link">mutate</a></span><span class="op">(</span>date <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/as.Date.html" class="external-link">as.Date</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/paste.html" class="external-link">paste0</a></span><span class="op">(</span><span class="va">year</span>, <span class="st">"-01-01"</span><span class="op">)</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/apex.html">apex</a></span><span class="op">(</span><span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span><span class="va">date</span>, <span class="va">n</span>, group <span class="op">=</span> <span class="va">continent_origin</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"line"</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_legend.html">ax_legend</a></span><span class="op">(</span>position <span class="op">=</span> <span class="st">"bottom"</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<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">2</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_colors.html">ax_colors</a></span><span class="op">(</span><span class="st">"#440154"</span>, <span class="st">"#414487"</span>, <span class="st">"#2A788E"</span>,</span>
<span> <span class="st">"#22A884"</span>, <span class="st">"#7AD151"</span>, <span class="st">"#FDE725"</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span></span>
<span> <span class="fu"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span></span>
<span> labels <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>
<span> formatter <span class="op">=</span> <span class="fu">htmlwidgets</span><span class="fu">::</span><span class="fu"><a href="https://rdrr.io/pkg/htmlwidgets/man/JS.html" class="external-link">JS</a></span><span class="op">(</span><span class="st">"function(val) {return (val/1e6).toFixed(0);}"</span><span class="op">)</span></span>
<span> <span class="op">)</span>,</span>
<span> title <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>text <span class="op">=</span> <span class="st">"Number of refugees (in million)"</span><span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_xaxis.html">ax_xaxis</a></span><span class="op">(</span>labels <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>format <span class="op">=</span> <span class="st">"yyyy"</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_tooltip.html">ax_tooltip</a></span><span class="op">(</span></span>
<span> x <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>format <span class="op">=</span> <span class="st">"yyyy"</span><span class="op">)</span>,</span>
<span> y <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>
<span> formatter <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">JS</a></span><span class="op">(</span></span>
<span> <span class="co"># thousand separator in javascript</span></span>
<span> <span class="st">"function(value) {return value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");}"</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_annotations.html">ax_annotations</a></span><span class="op">(</span></span>
<span> points <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>
<span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> x <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">JS</a></span><span class="op">(</span><span class="st">"new Date('1994').getTime()"</span><span class="op">)</span>,</span>
<span> y <span class="op">=</span> <span class="fl">6935296</span>,</span>
<span> label <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>text <span class="op">=</span> <span class="st">"Great Lakes refugee crisis"</span>, offsetY <span class="op">=</span> <span class="fl">0</span><span class="op">)</span>,</span>
<span> marker <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>size <span class="op">=</span> <span class="fl">6</span><span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_labs.html">ax_labs</a></span><span class="op">(</span></span>
<span> title <span class="op">=</span> <span class="st">"Continent of origin for refugees population"</span>,</span>
<span> subtitle <span class="op">=</span> <span class="st">"Data from the UN Refugee Agency"</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_title.html">ax_title</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"22px"</span><span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"16px"</span>, color <span class="op">=</span> <span class="st">"#BDBDBD"</span><span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
</details><p><br><br></p>
</div>
<div class="section level2">
<h2 id="scatter-plot">Scatter plot<a class="anchor" aria-label="anchor" href="#scatter-plot"></a>
</h2>
<p>Dataset used is from <a href="https://github.com/jennybc/gapminder" class="external-link">{gapminder}</a>.</p>
<p>Transform data and initialize the chart :</p>
<div class="sourceCode" id="cb21"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><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">"gapminder"</span>, package <span class="op">=</span> <span class="st">"gapminder"</span><span class="op">)</span></span>
<span></span>
<span><span class="va">scatter</span> <span class="op">&lt;-</span> <span class="va">gapminder</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="https://dplyr.tidyverse.org/reference/filter.html" class="external-link">filter</a></span><span class="op">(</span><span class="va">year</span> <span class="op">==</span> <span class="fl">2007</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="https://dplyr.tidyverse.org/reference/mutate.html" class="external-link">mutate</a></span><span class="op">(</span></span>
<span> gdpPercap <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/Log.html" class="external-link">log</a></span><span class="op">(</span><span class="va">gdpPercap</span><span class="op">)</span>,</span>
<span> pop <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/MathFun.html" class="external-link">sqrt</a></span><span class="op">(</span><span class="va">pop</span> <span class="op">/</span> <span class="va">pi</span><span class="op">)</span> <span class="op">/</span> <span class="fl">1500</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/apex.html">apex</a></span><span class="op">(</span></span>
<span> mapping <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span><span class="va">gdpPercap</span>, </span>
<span> <span class="va">lifeExp</span>, </span>
<span> z <span class="op">=</span> <span class="va">pop</span>, </span>
<span> group <span class="op">=</span> <span class="va">continent</span>, </span>
<span> label <span class="op">=</span> <span class="va">country</span><span class="op">)</span>, </span>
<span> type <span class="op">=</span> <span class="st">"scatter"</span>, </span>
<span> height <span class="op">=</span> <span class="st">"500px"</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Enable zoom on both axis :</p>
<div class="sourceCode" id="cb22"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">scatter</span> <span class="op">&lt;-</span> <span class="va">scatter</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_chart.html">ax_chart</a></span><span class="op">(</span>zoom <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>
<span> enabled <span class="op">=</span> <span class="cn">TRUE</span>, type <span class="op">=</span> <span class="st">"xy"</span></span>
<span> <span class="op">)</span><span class="op">)</span></span></code></pre></div>
<p>Show y-axis border and ticks, no decimals in labels :</p>
<div class="sourceCode" id="cb23"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">scatter</span> <span class="op">&lt;-</span> <span class="va">scatter</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span></span>
<span> decimalsInFloat <span class="op">=</span> <span class="fl">0</span>, </span>
<span> axisBorder <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>show <span class="op">=</span> <span class="cn">TRUE</span><span class="op">)</span>,</span>
<span> axisTicks <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>show <span class="op">=</span> <span class="cn">TRUE</span><span class="op">)</span>,</span>
<span> title <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>text <span class="op">=</span> <span class="st">"life expectancy at birth (in years)"</span><span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Configuration for x-axis, hide the tooltip displayed on the axis
itself (not the main tooltip), display two decimals in the labels
(useful when zooming, since values are logarithm theres a lot of
decimals) :</p>
<div class="sourceCode" id="cb24"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">scatter</span> <span class="op">&lt;-</span> <span class="va">scatter</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_xaxis.html">ax_xaxis</a></span><span class="op">(</span></span>
<span> tickAmount <span class="op">=</span> <span class="fl">8</span>,</span>
<span> labels <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>
<span> formatter <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">JS</a></span><span class="op">(</span><span class="st">"function(val) {return val.toFixed(2);}"</span><span class="op">)</span></span>
<span> <span class="op">)</span>, </span>
<span> tooltip <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>enabled <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span>,</span>
<span> title <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>text <span class="op">=</span> <span class="st">"GDP per capita (log-scale)"</span><span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Display vertical grid lines (on the x-axis, those on the y-axis are
enabled by default) :</p>
<div class="sourceCode" id="cb25"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">scatter</span> <span class="op">&lt;-</span> <span class="va">scatter</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_grid.html">ax_grid</a></span><span class="op">(</span>xaxis <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>lines <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>show <span class="op">=</span> <span class="cn">TRUE</span><span class="op">)</span><span class="op">)</span><span class="op">)</span></span></code></pre></div>
<p>Legend on the right and slightly offset downwards :</p>
<div class="sourceCode" id="cb26"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">scatter</span> <span class="op">&lt;-</span> <span class="va">scatter</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_legend.html">ax_legend</a></span><span class="op">(</span>position <span class="op">=</span> <span class="st">"right"</span>, offsetY <span class="op">=</span> <span class="fl">70</span><span class="op">)</span></span></code></pre></div>
<p>Add a custom tooltip with an HTML string, data used in aesthetic can
be accessed in JavaScript with
<code>w.config.series[seriesIndex].data[dataPointIndex].x</code> (x is
the variable <code>gdpPercap</code>), or
<code>w.config.series[seriesIndex].data[dataPointIndex].label</code>
(the country), its possible to use custom aesthetics to include more
data in the chart configuration script.</p>
<div class="sourceCode" id="cb27"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">scatter</span> <span class="op">&lt;-</span> <span class="va">scatter</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_tooltip.html">ax_tooltip</a></span><span class="op">(</span>custom <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">JS</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/paste.html" class="external-link">paste</a></span><span class="op">(</span></span>
<span> <span class="st">"function({ series, seriesIndex, dataPointIndex, w }) {"</span>,</span>
<span> <span class="st">"console.log(w); return ("</span>,</span>
<span> <span class="st">"'&lt;div&gt;' +"</span>,</span>
<span> </span>
<span> <span class="st">"'&lt;div class = \"apexcharts-tooltip-title\"&gt;' +"</span>,</span>
<span> <span class="st">"w.config.series[seriesIndex].data[dataPointIndex].label"</span>,</span>
<span> <span class="st">"+ '&lt;/div&gt;' +"</span>,</span>
<span> <span class="st">"'&lt;div style = \"padding: 5px;\"&gt;' +"</span>,</span>
<span> <span class="st">"'&lt;div class = \"apexcharts-tooltip-y-group\"&gt;' +"</span>,</span>
<span> </span>
<span> <span class="st">"'&lt;span class = \"apexcharts-tooltip-text-label\"&gt;' +"</span>,</span>
<span> <span class="st">"'Population: ' +"</span>, </span>
<span> <span class="st">"'&lt;/span&gt;' +"</span>,</span>
<span> <span class="st">"'&lt;span class = \"apexcharts-tooltip-text-value\"&gt;' +"</span>,</span>
<span> <span class="st">"Math.round(Math.pow(w.config.series[seriesIndex].data[dataPointIndex].z * 1500, 2) * Math.PI).</span></span>
<span><span class="st"> toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\") +"</span>,</span>
<span> <span class="st">"'&lt;/span&gt;' +"</span>,</span>
<span> </span>
<span> <span class="st">"'&lt;/br&gt;' +"</span>,</span>
<span> </span>
<span> <span class="st">"'&lt;span class = \"apexcharts-tooltip-text-label\"&gt;' +"</span>,</span>
<span> <span class="st">"'GDP per capita: ' +"</span>, </span>
<span> <span class="st">"'&lt;/span&gt;' +"</span>,</span>
<span> <span class="st">"'&lt;span class = \"apexcharts-tooltip-text-value\"&gt;' +"</span>,</span>
<span> <span class="st">"Math.round(Math.exp(w.config.series[seriesIndex].data[dataPointIndex].x)) +"</span>,</span>
<span> <span class="st">"'&lt;/span&gt;' +"</span>,</span>
<span> </span>
<span> <span class="st">"'&lt;/br&gt;' +"</span>,</span>
<span> </span>
<span> <span class="st">"'&lt;span class = \"apexcharts-tooltip-text-label\"&gt;' +"</span>,</span>
<span> <span class="st">"'Life expectancy: ' +"</span>, </span>
<span> <span class="st">"'&lt;/span&gt;' +"</span>,</span>
<span> <span class="st">"'&lt;span class = \"apexcharts-tooltip-text-value\"&gt;' +"</span>,</span>
<span> <span class="st">"w.config.series[seriesIndex].data[dataPointIndex].y +"</span>,</span>
<span> <span class="st">"'&lt;/span&gt;' +"</span>,</span>
<span> </span>
<span> </span>
<span> <span class="st">"'&lt;/div&gt;' +"</span>,</span>
<span> <span class="st">"'&lt;/div&gt;' +"</span>,</span>
<span> </span>
<span> <span class="st">"'&lt;/div&gt;'"</span>,</span>
<span> <span class="st">");"</span>,</span>
<span> <span class="st">"}"</span>, sep <span class="op">=</span> <span class="st">"\n"</span></span>
<span> <span class="op">)</span><span class="op">)</span><span class="op">)</span></span></code></pre></div>
<p>Add title and subtitle and format them :</p>
<div class="sourceCode" id="cb28"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">scatter</span> <span class="op">&lt;-</span> <span class="va">scatter</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_labs.html">ax_labs</a></span><span class="op">(</span></span>
<span> title <span class="op">=</span> <span class="st">"Life expectancy, GDP and population"</span>,</span>
<span> subtitle <span class="op">=</span> <span class="st">"gapminder dataset from {gapminder}"</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_title.html">ax_title</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"22px"</span><span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"16px"</span>, color <span class="op">=</span> <span class="st">"#BDBDBD"</span><span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Final result looks like :</p>
<div class="sourceCode" id="cb29"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">scatter</span></span></code></pre></div>
<div id="htmlwidget-cc2243ada303e2b206d9" style="width:100%;height:500px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-cc2243ada303e2b206d9">{"x":{"ax_opts":{"chart":{"type":"bubble","zoom":{"enabled":true,"type":"xy"}},"series":[{"name":"Asia","type":"bubble","data":[{"x":6.882006956185797,"y":43.828,"z":2.12402947882241,"label":"Afghanistan"},{"x":10.30213105766027,"y":75.63500000000001,"z":0.3166110765121475,"label":"Bahrain"},{"x":7.237960628192509,"y":64.062,"z":4.613467900909749,"label":"Bangladesh"},{"x":7.446455969467286,"y":59.723,"z":1.413947997086407,"label":"Cambodia"},{"x":8.508982546938816,"y":72.961,"z":13.65853198879731,"label":"China"},{"x":10.5897354544633,"y":82.208,"z":0.9937435728342189,"label":"Hong Kong, China"},{"x":7.804745103733494,"y":64.69799999999999,"z":12.5335129373569,"label":"India"},{"x":8.172066046818411,"y":70.65000000000001,"z":5.623649274931235,"label":"Indonesia"},{"x":9.359252884241174,"y":70.964,"z":3.134592510235701,"label":"Iran"},{"x":8.40538122225756,"y":59.545,"z":1.97241044205932,"label":"Iraq"},{"x":10.14734614222389,"y":80.745,"z":0.9535140763465443,"label":"Israel"},{"x":10.36268513305031,"y":82.60299999999999,"z":4.246531429526331,"label":"Japan"},{"x":8.416148055764452,"y":72.535,"z":0.9253926913907098,"label":"Jordan"},{"x":7.373415413898915,"y":67.297,"z":1.815632051886675,"label":"Korea, Dem. Rep."},{"x":10.05827259097255,"y":78.623,"z":2.634087784144882,"label":"Korea, Rep."},{"x":10.76441333903799,"y":77.58799999999999,"z":0.5953688679640444,"label":"Kuwait"},{"x":9.255414944734394,"y":71.99299999999999,"z":0.7448136392936012,"label":"Lebanon"},{"x":9.429608889033608,"y":74.241,"z":1.873897983894097,"label":"Malaysia"},{"x":8.037792676125699,"y":66.803,"z":0.6376564865009859,"label":"Mongolia"},{"x":6.8501261661455,"y":62.069,"z":2.599411080115604,"label":"Myanmar"},{"x":6.995179700490467,"y":63.785,"z":2.022069949928408,"label":"Nepal"},{"x":10.01306783160597,"y":75.64,"z":0.6733499665604877,"label":"Oman"},{"x":7.865551642363522,"y":65.483,"z":4.893556345123885,"label":"Pakistan"},{"x":8.067926973126148,"y":71.688,"z":3.589540413720486,"label":"Philippines"},{"x":9.982983892824338,"y":72.777,"z":1.976043551514488,"label":"Saudi Arabia"},{"x":10.76094462521244,"y":79.97199999999999,"z":0.8025702535074489,"label":"Singapore"},{"x":8.286545405382396,"y":72.396,"z":1.697919633841639,"label":"Sri Lanka"},{"x":8.339153993580391,"y":74.143,"z":1.653020792937546,"label":"Syria"},{"x":10.26528902275493,"y":78.40000000000001,"z":1.810660638862046,"label":"Taiwan"},{"x":8.917095700517491,"y":70.616,"z":3.034017146540572,"label":"Thailand"},{"x":7.800399176888787,"y":74.249,"z":3.47306146307208,"label":"Vietnam"},{"x":8.014781999482128,"y":73.422,"z":0.753974594788234,"label":"West Bank and Gaza"},{"x":7.732268343018254,"y":62.698,"z":1.772658692005832,"label":"Yemen, Rep."}]},{"name":"Europe","type":"bubble","data":[{"x":8.688964207477106,"y":76.423,"z":0.7137014832958667,"label":"Albania"},{"x":10.49478174497629,"y":79.82899999999999,"z":1.077047815602504,"label":"Austria"},{"x":10.42503365843343,"y":79.441,"z":1.212517725003315,"label":"Belgium"},{"x":8.915472382958686,"y":74.852,"z":0.8024987718276734,"label":"Bosnia and Herzegovina"},{"x":9.276202343841369,"y":73.005,"z":1.017827336704143,"label":"Bulgaria"},{"x":9.590092566363756,"y":75.748,"z":0.7972914234549263,"label":"Croatia"},{"x":10.03597564842833,"y":76.486,"z":1.202942750728513,"label":"Czech Republic"},{"x":10.47102668882148,"y":78.33199999999999,"z":0.8795343856178323,"label":"Denmark"},{"x":10.41051851768329,"y":79.313,"z":0.8608661288049999,"label":"Finland"},{"x":10.32449842005968,"y":80.657,"z":2.939660929020385,"label":"France"},{"x":10.37880125895925,"y":79.40600000000001,"z":3.414287084082024,"label":"Germany"},{"x":10.22333710467945,"y":79.483,"z":1.230703132603591,"label":"Greece"},{"x":9.79862382679109,"y":73.33799999999999,"z":1.186802914334423,"label":"Hungary"},{"x":10.49628357159143,"y":81.75700000000001,"z":0.2066748624669065,"label":"Iceland"},{"x":10.61339342717752,"y":78.88500000000001,"z":0.762441311979532,"label":"Ireland"},{"x":10.26010268418614,"y":8
</summary><div class="sourceCode" id="cb30"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><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">"gapminder"</span>, package <span class="op">=</span> <span class="st">"gapminder"</span><span class="op">)</span></span>
<span></span>
<span><span class="va">gapminder</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="https://dplyr.tidyverse.org/reference/filter.html" class="external-link">filter</a></span><span class="op">(</span><span class="va">year</span> <span class="op">==</span> <span class="fl">2007</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="https://dplyr.tidyverse.org/reference/mutate.html" class="external-link">mutate</a></span><span class="op">(</span></span>
<span> gdpPercap <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/Log.html" class="external-link">log</a></span><span class="op">(</span><span class="va">gdpPercap</span><span class="op">)</span>,</span>
<span> pop <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/MathFun.html" class="external-link">sqrt</a></span><span class="op">(</span><span class="va">pop</span> <span class="op">/</span> <span class="va">pi</span><span class="op">)</span> <span class="op">/</span> <span class="fl">1500</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/apex.html">apex</a></span><span class="op">(</span>mapping <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span><span class="va">gdpPercap</span>, <span class="va">lifeExp</span>, z <span class="op">=</span> <span class="va">pop</span>, group <span class="op">=</span> <span class="va">continent</span>, label <span class="op">=</span> <span class="va">country</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"scatter"</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_chart.html">ax_chart</a></span><span class="op">(</span>zoom <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>
<span> enabled <span class="op">=</span> <span class="cn">TRUE</span>, type <span class="op">=</span> <span class="st">"xy"</span></span>
<span> <span class="op">)</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span></span>
<span> decimalsInFloat <span class="op">=</span> <span class="fl">0</span>, </span>
<span> axisBorder <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>show <span class="op">=</span> <span class="cn">TRUE</span><span class="op">)</span>,</span>
<span> axisTicks <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>show <span class="op">=</span> <span class="cn">TRUE</span><span class="op">)</span>,</span>
<span> title <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>text <span class="op">=</span> <span class="st">"life expectancy at birth (in years)"</span><span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_xaxis.html">ax_xaxis</a></span><span class="op">(</span></span>
<span> tickAmount <span class="op">=</span> <span class="fl">8</span>, </span>
<span> labels <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>
<span> formatter <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">JS</a></span><span class="op">(</span><span class="st">"function(val) {return val.toFixed(2);}"</span><span class="op">)</span></span>
<span> <span class="op">)</span>,</span>
<span> tooltip <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>enabled <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span>,</span>
<span> title <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>text <span class="op">=</span> <span class="st">"GDP per capita (log-scale)"</span><span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_grid.html">ax_grid</a></span><span class="op">(</span>xaxis <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>lines <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>show <span class="op">=</span> <span class="cn">TRUE</span><span class="op">)</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_legend.html">ax_legend</a></span><span class="op">(</span>position <span class="op">=</span> <span class="st">"right"</span>, offsetY <span class="op">=</span> <span class="fl">70</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_tooltip.html">ax_tooltip</a></span><span class="op">(</span>custom <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">JS</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/paste.html" class="external-link">paste</a></span><span class="op">(</span></span>
<span> <span class="st">"function({ series, seriesIndex, dataPointIndex, w }) {"</span>,</span>
<span> <span class="st">"console.log(w); return ("</span>,</span>
<span> <span class="st">"'&lt;div&gt;' +"</span>,</span>
<span> </span>
<span> <span class="st">"'&lt;div class = \"apexcharts-tooltip-title\"&gt;' +"</span>,</span>
<span> <span class="st">"w.config.series[seriesIndex].data[dataPointIndex].label"</span>,</span>
<span> <span class="st">"+ '&lt;/div&gt;' +"</span>,</span>
<span> <span class="st">"'&lt;div style = \"padding: 5px;\"&gt;' +"</span>,</span>
<span> <span class="st">"'&lt;div class = \"apexcharts-tooltip-y-group\"&gt;' +"</span>,</span>
<span> </span>
<span> <span class="st">"'&lt;span class = \"apexcharts-tooltip-text-label\"&gt;' +"</span>,</span>
<span> <span class="st">"'Population: ' +"</span>, </span>
<span> <span class="st">"'&lt;/span&gt;' +"</span>,</span>
<span> <span class="st">"'&lt;span class = \"apexcharts-tooltip-text-value\"&gt;' +"</span>,</span>
<span> <span class="st">"Math.round(Math.pow(w.config.series[seriesIndex].data[dataPointIndex].z * 1500, 2) * Math.PI).</span></span>
<span><span class="st"> toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\") +"</span>,</span>
<span> <span class="st">"'&lt;/span&gt;' +"</span>,</span>
<span> </span>
<span> <span class="st">"'&lt;/br&gt;' +"</span>,</span>
<span> </span>
<span> <span class="st">"'&lt;span class = \"apexcharts-tooltip-text-label\"&gt;' +"</span>,</span>
<span> <span class="st">"'GDP per capita: ' +"</span>, </span>
<span> <span class="st">"'&lt;/span&gt;' +"</span>,</span>
<span> <span class="st">"'&lt;span class = \"apexcharts-tooltip-text-value\"&gt;' +"</span>,</span>
<span> <span class="st">"Math.round(Math.exp(w.config.series[seriesIndex].data[dataPointIndex].x)) +"</span>,</span>
<span> <span class="st">"'&lt;/span&gt;' +"</span>,</span>
<span> </span>
<span> <span class="st">"'&lt;/br&gt;' +"</span>,</span>
<span> </span>
<span> <span class="st">"'&lt;span class = \"apexcharts-tooltip-text-label\"&gt;' +"</span>,</span>
<span> <span class="st">"'Life expectancy: ' +"</span>, </span>
<span> <span class="st">"'&lt;/span&gt;' +"</span>,</span>
<span> <span class="st">"'&lt;span class = \"apexcharts-tooltip-text-value\"&gt;' +"</span>,</span>
<span> <span class="st">"w.config.series[seriesIndex].data[dataPointIndex].y +"</span>,</span>
<span> <span class="st">"'&lt;/span&gt;' +"</span>,</span>
<span> </span>
<span> </span>
<span> <span class="st">"'&lt;/div&gt;' +"</span>,</span>
<span> <span class="st">"'&lt;/div&gt;' +"</span>,</span>
<span> </span>
<span> <span class="st">"'&lt;/div&gt;'"</span>,</span>
<span> <span class="st">");"</span>,</span>
<span> <span class="st">"}"</span>, sep <span class="op">=</span> <span class="st">"\n"</span></span>
<span> <span class="op">)</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_labs.html">ax_labs</a></span><span class="op">(</span></span>
<span> title <span class="op">=</span> <span class="st">"Life expectancy, GDP and population"</span>,</span>
<span> subtitle <span class="op">=</span> <span class="st">"gapminder dataset from {gapminder}"</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_title.html">ax_title</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"22px"</span><span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"16px"</span>, color <span class="op">=</span> <span class="st">"#BDBDBD"</span><span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
</details><p><br><br></p>
</div>
<div class="section level2">
<h2 id="heatmap">Heatmap<a class="anchor" aria-label="anchor" href="#heatmap"></a>
</h2>
<p>This is an adaption of this fancy <a href="http://jkunst.com/highcharter/showcase.html" class="external-link">{highcharter}
example</a>, based from this <a href="http://graphics.wsj.com/infectious-diseases-and-vaccines/" class="external-link">WSJ
visualization</a>.</p>
<div class="sourceCode" id="cb31"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><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">"vaccines"</span>, package <span class="op">=</span> <span class="st">"highcharter"</span><span class="op">)</span></span>
<span></span>
<span><span class="va">heatmap</span> <span class="op">&lt;-</span> <span class="fu"><a href="../../reference/apex.html">apex</a></span><span class="op">(</span></span>
<span> <span class="va">vaccines</span>, </span>
<span> <span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span><span class="va">year</span>, <span class="va">state</span>, fill <span class="op">=</span> <span class="va">count</span><span class="op">)</span>, </span>
<span> type <span class="op">=</span> <span class="st">"heatmap"</span>, </span>
<span> height <span class="op">=</span> <span class="st">"800px"</span></span>
<span><span class="op">)</span></span></code></pre></div>
<p>Remove the animations (little slow otherwise) :</p>
<div class="sourceCode" id="cb32"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">heatmap</span> <span class="op">&lt;-</span> <span class="va">heatmap</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_chart.html">ax_chart</a></span><span class="op">(</span>animations <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>enabled <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span><span class="op">)</span></span></code></pre></div>
<p>Remove values displayed in the heatmap :</p>
<div class="sourceCode" id="cb33"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">heatmap</span> <span class="op">&lt;-</span> <span class="va">heatmap</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<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></code></pre></div>
<p>Remove space between squared of the heatmap :</p>
<div class="sourceCode" id="cb34"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">heatmap</span> <span class="op">&lt;-</span> <span class="va">heatmap</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<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></code></pre></div>
<p>Thats not possible to make a continuous scale in the legend (like
with highcharter), so we use breakpoints :</p>
<div class="sourceCode" id="cb35"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">heatmap</span> <span class="op">&lt;-</span> <span class="va">heatmap</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_plotOptions.html">ax_plotOptions</a></span><span class="op">(</span></span>
<span> heatmap <span class="op">=</span> <span class="fu"><a href="../../reference/heatmap_opts.html">heatmap_opts</a></span><span class="op">(</span></span>
<span> radius <span class="op">=</span> <span class="fl">0</span>,</span>
<span> enableShades <span class="op">=</span> <span class="cn">FALSE</span>,</span>
<span> colorScale <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>
<span> ranges <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>
<span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> from <span class="op">=</span> <span class="fl">0</span>,</span>
<span> to <span class="op">=</span> <span class="fl">0.001</span>,</span>
<span> name <span class="op">=</span> <span class="st">"Missing"</span>,</span>
<span> color <span class="op">=</span> <span class="st">"#FFF"</span></span>
<span> <span class="op">)</span>,</span>
<span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> from <span class="op">=</span> <span class="fl">0.001</span>,</span>
<span> to <span class="op">=</span> <span class="fl">4</span>,</span>
<span> name <span class="op">=</span> <span class="st">"low"</span>,</span>
<span> <span class="co"># color = "#000004"</span></span>
<span> color <span class="op">=</span> <span class="st">"#FDE725"</span></span>
<span> <span class="op">)</span>,</span>
<span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> from <span class="op">=</span> <span class="fl">4</span>,</span>
<span> to <span class="op">=</span> <span class="fl">70</span>,</span>
<span> name <span class="op">=</span> <span class="st">"mid-low"</span>,</span>
<span> <span class="co"># color = "#781C6D",</span></span>
<span> color <span class="op">=</span> <span class="st">"#35B779"</span></span>
<span> <span class="op">)</span>,</span>
<span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> from <span class="op">=</span> <span class="fl">70</span>,</span>
<span> to <span class="op">=</span> <span class="fl">290</span>,</span>
<span> name <span class="op">=</span> <span class="st">"mid-high"</span>,</span>
<span> <span class="co"># color = "#ED6925",</span></span>
<span> color <span class="op">=</span> <span class="st">"#31688E"</span></span>
<span> <span class="op">)</span>,</span>
<span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> from <span class="op">=</span> <span class="fl">290</span>,</span>
<span> to <span class="op">=</span> <span class="fl">3000</span>,</span>
<span> name <span class="op">=</span> <span class="st">"high"</span>,</span>
<span> <span class="co"># color = "#FCFFA4",</span></span>
<span> color <span class="op">=</span> <span class="st">"#440154"</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Missing values are colored by default, above we set them to be
displayed in white, and now we hide the corresponding legend :</p>
<div class="sourceCode" id="cb36"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">heatmap</span> <span class="op">&lt;-</span> <span class="va">heatmap</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_legend.html">ax_legend</a></span><span class="op">(</span></span>
<span> formatter <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">JS</a></span><span class="op">(</span></span>
<span> <span class="st">"function(seriesName, opts) {</span></span>
<span><span class="st"> if (seriesName == 'Missing') return null; else return seriesName;</span></span>
<span><span class="st"> }"</span></span>
<span> <span class="op">)</span>,</span>
<span> offsetY <span class="op">=</span> <span class="op">-</span><span class="fl">15</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Set size of the y-axis labels :</p>
<div class="sourceCode" id="cb37"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">heatmap</span> <span class="op">&lt;-</span> <span class="va">heatmap</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span></span>
<span> labels <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>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"8px"</span><span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Add a vertical line to identify the year when the vaccine was
introduced :</p>
<div class="sourceCode" id="cb38"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">heatmap</span> <span class="op">&lt;-</span> <span class="va">heatmap</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_annotations.html">ax_annotations</a></span><span class="op">(</span></span>
<span> xaxis <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>
<span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> x <span class="op">=</span> <span class="fl">1963</span>, x2 <span class="op">=</span> <span class="fl">1963.1</span>,</span>
<span> strokeDashArray <span class="op">=</span> <span class="fl">0</span>, </span>
<span> opacity <span class="op">=</span> <span class="fl">1</span>, </span>
<span> borderColor <span class="op">=</span> <span class="st">"firebrick"</span>,</span>
<span> fillColor <span class="op">=</span> <span class="st">"firebrick"</span>,</span>
<span> label <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>
<span> borderColor <span class="op">=</span> <span class="st">"firebrick"</span>,</span>
<span> style <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>color <span class="op">=</span> <span class="st">"#FFF"</span>, background <span class="op">=</span> <span class="st">"firebrick"</span><span class="op">)</span>,</span>
<span> text <span class="op">=</span> <span class="st">"Vaccine Introduced"</span>, </span>
<span> orientation <span class="op">=</span> <span class="st">"horizontal"</span>,</span>
<span> position <span class="op">=</span> <span class="st">"bottom"</span>,</span>
<span> offsetY <span class="op">=</span> <span class="fl">0</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>As usual, add title and subtitle and format them :</p>
<div class="sourceCode" id="cb39"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">heatmap</span> <span class="op">&lt;-</span> <span class="va">heatmap</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_labs.html">ax_labs</a></span><span class="op">(</span></span>
<span> title <span class="op">=</span> <span class="st">"Infectious Diseases and Vaccines"</span>,</span>
<span> subtitle <span class="op">=</span> <span class="st">"vaccines dataset from {highcharter}"</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_title.html">ax_title</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"22px"</span><span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"16px"</span>, color <span class="op">=</span> <span class="st">"#BDBDBD"</span><span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
<p>Final result looks like :</p>
<div class="sourceCode" id="cb40"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="va">heatmap</span></span></code></pre></div>
<div id="htmlwidget-ca5fb111be956e855c33" style="width:100%;height:800px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-ca5fb111be956e855c33">{"x":{"ax_opts":{"chart":{"type":"heatmap","animations":{"enabled":false}},"series":[{"name":"Alabama","data":[{"x":"1928","y":334.99},{"x":"1929","y":111.93},{"x":"1930","y":157},{"x":"1931","y":337.29},{"x":"1932","y":10.21},{"x":"1933","y":65.22},{"x":"1934","y":590.27},{"x":"1935","y":265.34},{"x":"1936","y":20.78},{"x":"1937","y":22.46},{"x":"1938","y":496.44},{"x":"1939","y":182.64},{"x":"1940","y":115.12},{"x":"1941","y":297.47},{"x":"1942","y":126.15},{"x":"1943","y":130.82},{"x":"1944","y":252.87},{"x":"1945","y":27.33},{"x":"1946","y":126.75},{"x":"1947","y":127.26},{"x":"1948","y":69.09},{"x":"1949","y":368.8},{"x":"1950","y":50.9},{"x":"1951","y":103.24},{"x":"1952","y":351.72},{"x":"1953","y":93.98999999999999},{"x":"1954","y":280.39},{"x":"1955","y":69.68000000000001},{"x":"1956","y":231.75},{"x":"1957","y":299.79},{"x":"1958","y":242.34},{"x":"1959","y":108.19},{"x":"1960","y":63.33},{"x":"1961","y":78.01000000000001},{"x":"1962","y":71.58},{"x":"1963","y":34.74},{"x":"1964","y":533.6799999999999},{"x":"1965","y":68.2},{"x":"1966","y":52.38},{"x":"1967","y":38.98},{"x":"1968","y":4.65},{"x":"1969","y":0.36},{"x":"1970","y":13.94},{"x":"1971","y":55.24},{"x":"1972","y":4.02},{"x":"1973","y":0.42},{"x":"1974","y":0.58},{"x":"1975","y":0.13},{"x":"1976","y":null},{"x":"1977","y":2.06},{"x":"1978","y":3.43},{"x":"1979","y":3.35},{"x":"1980","y":0.57},{"x":"1981","y":null},{"x":"1982","y":0.05},{"x":"1983","y":0.03},{"x":"1984","y":null},{"x":"1985","y":null},{"x":"1986","y":0.02},{"x":"1987","y":0.09000000000000001},{"x":"1988","y":0.02},{"x":"1989","y":1.46},{"x":"1990","y":0.65},{"x":"1991","y":0.02},{"x":"1992","y":null},{"x":"1993","y":0.02},{"x":"1994","y":null},{"x":"1995","y":null},{"x":"1996","y":null},{"x":"1997","y":0.14},{"x":"1998","y":null},{"x":"1999","y":null},{"x":"2000","y":null},{"x":"2001","y":null},{"x":"2002","y":0.16},{"x":"2003","y":null}]},{"name":"Alaska","data":[{"x":"1928","y":null},{"x":"1929","y":null},{"x":"1930","y":null},{"x":"1931","y":null},{"x":"1932","y":null},{"x":"1933","y":null},{"x":"1934","y":null},{"x":"1935","y":null},{"x":"1936","y":null},{"x":"1937","y":null},{"x":"1938","y":null},{"x":"1939","y":null},{"x":"1940","y":null},{"x":"1941","y":null},{"x":"1942","y":null},{"x":"1943","y":null},{"x":"1944","y":null},{"x":"1945","y":null},{"x":"1946","y":null},{"x":"1947","y":null},{"x":"1948","y":null},{"x":"1949","y":null},{"x":"1950","y":null},{"x":"1951","y":null},{"x":"1952","y":null},{"x":"1953","y":null},{"x":"1954","y":691.67},{"x":"1955","y":241.87},{"x":"1956","y":1120.98},{"x":"1957","y":414.7},{"x":"1958","y":562.0600000000001},{"x":"1959","y":816.55},{"x":"1960","y":635.79},{"x":"1961","y":420.96},{"x":"1962","y":571.54},{"x":"1963","y":722.27},{"x":"1964","y":439.89},{"x":"1965","y":79.38},{"x":"1966","y":236.57},{"x":"1967","y":53.27},{"x":"1968","y":3.86},{"x":"1969","y":6.77},{"x":"1970","y":33.61},{"x":"1971","y":19.42},{"x":"1972","y":3.94},{"x":"1973","y":1.47},{"x":"1974","y":0.27},{"x":"1975","y":null},{"x":"1976","y":2.73},{"x":"1977","y":15.07},{"x":"1978","y":0.5},{"x":"1979","y":4.48},{"x":"1980","y":1.44},{"x":"1981","y":null},{"x":"1982","y":0.2},{"x":"1983","y":null},{"x":"1984","y":null},{"x":"1985","y":null},{"x":"1986","y":null},{"x":"1987","y":null},{"x":"1988","y":0.18},{"x":"1989","y":null},{"x":"1990","y":4.86},{"x":"1991","y":0.18},{"x":"1992","y":0.68},{"x":"1993","y":null},{"x":"1994","y":2.67},{"x":"1995","y":null},{"x":"1996","y":11.16},{"x":"1997","y":0.16},{"x":"1998","y":2.58},{"x":"1999","y":null},{"x":"2000","y":0.16},{"x":"2001","y":null},{"x":"2002","y":null},{"x":"2003","y":null}]},{"name":"Arizona","data":[{"x":"1928","y":200.75},{"x":"1929","y":54.88},{"x":"1930","y":466.31},{"x":"1931","y":497.69},{"x":"1932","y":20.11},{"x":"1933","y":296.01},{"x":"1934","y":238.81},{"x":"1935","y":135.02},{"x":"1936","y":525.5},{"x":"1937","y":837.3},{"x":"1938","y":149.34},{"x":"1939","y":144.02},{"x":"1940","y":339.06},{"x":"1941","y":615.29},{"x":"1942","y":7
</summary><div class="sourceCode" id="cb41"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><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">"vaccines"</span>, package <span class="op">=</span> <span class="st">"highcharter"</span><span class="op">)</span></span>
<span></span>
<span><span class="fu"><a href="../../reference/apex.html">apex</a></span><span class="op">(</span><span class="va">vaccines</span>, <span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span><span class="va">year</span>, <span class="va">state</span>, fill <span class="op">=</span> <span class="va">count</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"heatmap"</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_chart.html">ax_chart</a></span><span class="op">(</span>animations <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>enabled <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<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>
<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>
<span> <span class="fu"><a href="../../reference/ax_plotOptions.html">ax_plotOptions</a></span><span class="op">(</span></span>
<span> heatmap <span class="op">=</span> <span class="fu"><a href="../../reference/heatmap_opts.html">heatmap_opts</a></span><span class="op">(</span></span>
<span> radius <span class="op">=</span> <span class="fl">0</span>,</span>
<span> enableShades <span class="op">=</span> <span class="cn">FALSE</span>,</span>
<span> colorScale <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>
<span> ranges <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>
<span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> from <span class="op">=</span> <span class="fl">0</span>,</span>
<span> to <span class="op">=</span> <span class="fl">0.001</span>,</span>
<span> name <span class="op">=</span> <span class="st">"Missing"</span>,</span>
<span> color <span class="op">=</span> <span class="st">"#FFF"</span></span>
<span> <span class="op">)</span>,</span>
<span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> from <span class="op">=</span> <span class="fl">0.001</span>,</span>
<span> to <span class="op">=</span> <span class="fl">4</span>,</span>
<span> name <span class="op">=</span> <span class="st">"low"</span>,</span>
<span> <span class="co"># color = "#000004"</span></span>
<span> color <span class="op">=</span> <span class="st">"#FDE725"</span></span>
<span> <span class="op">)</span>,</span>
<span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> from <span class="op">=</span> <span class="fl">4</span>,</span>
<span> to <span class="op">=</span> <span class="fl">70</span>,</span>
<span> name <span class="op">=</span> <span class="st">"mid-low"</span>,</span>
<span> <span class="co"># color = "#781C6D",</span></span>
<span> color <span class="op">=</span> <span class="st">"#35B779"</span></span>
<span> <span class="op">)</span>,</span>
<span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> from <span class="op">=</span> <span class="fl">70</span>,</span>
<span> to <span class="op">=</span> <span class="fl">290</span>,</span>
<span> name <span class="op">=</span> <span class="st">"mid-high"</span>,</span>
<span> <span class="co"># color = "#ED6925",</span></span>
<span> color <span class="op">=</span> <span class="st">"#31688E"</span></span>
<span> <span class="op">)</span>,</span>
<span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> from <span class="op">=</span> <span class="fl">290</span>,</span>
<span> to <span class="op">=</span> <span class="fl">3000</span>,</span>
<span> name <span class="op">=</span> <span class="st">"high"</span>,</span>
<span> <span class="co"># color = "#FCFFA4",</span></span>
<span> color <span class="op">=</span> <span class="st">"#440154"</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_legend.html">ax_legend</a></span><span class="op">(</span></span>
<span> formatter <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">JS</a></span><span class="op">(</span></span>
<span> <span class="st">"function(seriesName, opts) {</span></span>
<span><span class="st"> if (seriesName == 'Missing') return null; else return seriesName;</span></span>
<span><span class="st"> }"</span></span>
<span> <span class="op">)</span>,</span>
<span> offsetY <span class="op">=</span> <span class="op">-</span><span class="fl">15</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span></span>
<span> labels <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>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"8px"</span><span class="op">)</span>,</span>
<span> offsetY <span class="op">=</span> <span class="op">-</span><span class="fl">20</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_annotations.html">ax_annotations</a></span><span class="op">(</span></span>
<span> xaxis <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>
<span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> x <span class="op">=</span> <span class="fl">1963</span>, x2 <span class="op">=</span> <span class="fl">1963.1</span>,</span>
<span> strokeDashArray <span class="op">=</span> <span class="fl">0</span>, </span>
<span> opacity <span class="op">=</span> <span class="fl">1</span>, </span>
<span> borderColor <span class="op">=</span> <span class="st">"firebrick"</span>,</span>
<span> fillColor <span class="op">=</span> <span class="st">"firebrick"</span>,</span>
<span> label <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>
<span> borderColor <span class="op">=</span> <span class="st">"firebrick"</span>,</span>
<span> style <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>color <span class="op">=</span> <span class="st">"#FFF"</span>, background <span class="op">=</span> <span class="st">"firebrick"</span><span class="op">)</span>,</span>
<span> text <span class="op">=</span> <span class="st">"Vaccine Introduced"</span>, </span>
<span> orientation <span class="op">=</span> <span class="st">"horizontal"</span>,</span>
<span> position <span class="op">=</span> <span class="st">"bottom"</span>,</span>
<span> offsetY <span class="op">=</span> <span class="fl">0</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_labs.html">ax_labs</a></span><span class="op">(</span></span>
<span> title <span class="op">=</span> <span class="st">"Infectious Diseases and Vaccines"</span>,</span>
<span> subtitle <span class="op">=</span> <span class="st">"vaccines dataset from {highcharter}"</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_title.html">ax_title</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"22px"</span><span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span><span class="op">(</span></span>
<span> style <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>fontSize <span class="op">=</span> <span class="st">"16px"</span>, color <span class="op">=</span> <span class="st">"#BDBDBD"</span><span class="op">)</span></span>
<span> <span class="op">)</span></span></code></pre></div>
</details>
</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.7.</p>
</div>
</footer>
</div>
</body>
</html>