apexcharter/articles/extra/facets.html

275 lines
112 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>Create grid of charts • 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.2.2/bootstrap.min.css" rel="stylesheet">
<script src="../../deps/bootstrap-5.2.2/bootstrap.bundle.min.js"></script><link href="../../deps/Poppins-0.4.7/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="Create grid of charts">
<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.9000</small>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse ms-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="facets_files/htmlwidgets-1.6.2/htmlwidgets.js"></script><script src="facets_files/apexcharter-binding-0.4.1.9000/apexcharter.js"></script><div class="row">
<main id="main" class="col-md-9"><div class="page-header">
<img src="" class="logo" alt=""><h1>Create grid of charts</h1>
<small class="dont-index">Source: <a href="https://github.com/dreamRs/apexcharter/blob/HEAD/vignettes/extra/facets.Rmd" class="external-link"><code>vignettes/extra/facets.Rmd</code></a></small>
<div class="d-none name"><code>facets.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></code></pre></div>
<p>Create grid of charts with ApexCharts, currently its possible
to:</p>
<ul>
<li>create grids according to one or more variables</li>
<li>define number of columns and rows</li>
<li>define type of scale for x-axis and y-axis (fixed or free)</li>
<li>synchronize charts within the grid</li>
</ul>
<p>Current limitations are :</p>
<ul>
<li>need specific render and output function in Shiny
(<code><a href="../../reference/apexcharter-shiny-facets.html">apexfacetOutput()</a></code> and <code><a href="../../reference/apexcharter-shiny-facets.html">renderApexfacet()</a></code>)</li>
<li>x-axis always appear for scatter and line charts</li>
<li>x-axis labels can differ between charts even with fixed scale
depending on the width of the chart and the formatter applied to
labels</li>
<li>when scale on an axis is fixed, the chart with the axis dont have
the exact same size than the other since the axis take space in the
plotting area</li>
<li>if legend is needed, it will appear on each charts</li>
</ul>
<div class="section level2">
<h2 id="facet-wrap">Facet wrap<a class="anchor" aria-label="anchor" href="#facet-wrap"></a>
</h2>
<p>Create a grid of charts according to a variable of the data with
<code><a href="../../reference/apex-facets.html">ax_facet_wrap()</a></code> :</p>
<div class="sourceCode" id="cb2"><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="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="../../reference/apex.html">apex</a></span><span class="op">(</span><span class="va">mpg</span>, <span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span><span class="va">displ</span>, <span class="va">cty</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_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>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">".0f"</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">"Facet wrap example"</span>,</span>
<span> subtitle <span class="op">=</span> <span class="st">"mpg data from ggplot2"</span>,</span>
<span> x <span class="op">=</span> <span class="st">"engine displacement, in litres"</span>,</span>
<span> y <span class="op">=</span> <span class="st">"city miles per gallon"</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-facets.html">ax_facet_wrap</a></span><span class="op">(</span><span class="fu"><a href="../../reference/apexcharter-exports.html">vars</a></span><span class="op">(</span><span class="va">drv</span><span class="op">)</span>, ncol <span class="op">=</span> <span class="fl">2</span><span class="op">)</span></span></code></pre></div>
<div style="width:100%;" class="apexcharter-facet">
<div class="apexcharter-facet-title" style="font-weight: 700; font-size: 16px;">Facet wrap example</div>
<div class="apexcharter-facet-subtitle" style="font-weight: 400; font-size: 14px;">mpg data from ggplot2</div>
<div class="apexcharter-grid-container" style="display: grid; grid-template-columns: 30px repeat(2, 1fr) ; grid-template-rows: repeat(2, 1fr) 30px ; grid-column-gap: 0px; grid-row-gap: 5px;">
<div id="htmlwidget-c8c953354cc5dbbe4324" style="width:100%;height:300px;" class="apexcharter html-widget "></div>
<script type="application/json" data-for="htmlwidget-c8c953354cc5dbbe4324">{"x":{"ax_opts":{"chart":{"type":"scatter"},"series":[{"name":"cty","type":"scatter","data":[{"x":1.8,"y":18},{"x":1.8,"y":16},{"x":2,"y":20},{"x":2,"y":19},{"x":2.8,"y":15},{"x":2.8,"y":17},{"x":3.1,"y":17},{"x":3.1,"y":15},{"x":2.8,"y":15},{"x":3.1,"y":17},{"x":4.2,"y":16},{"x":5.3,"y":14},{"x":5.3,"y":11},{"x":5.7,"y":11},{"x":6.5,"y":14},{"x":3.7,"y":15},{"x":3.7,"y":14},{"x":3.9,"y":13},{"x":3.9,"y":14},{"x":4.7,"y":14},{"x":4.7,"y":14},{"x":4.7,"y":9},{"x":5.2,"y":11},{"x":5.2,"y":11},{"x":3.9,"y":13},{"x":4.7,"y":13},{"x":4.7,"y":9},{"x":4.7,"y":13},{"x":5.2,"y":11},{"x":5.7,"y":13},{"x":5.9,"y":11},{"x":4.7,"y":12},{"x":4.7,"y":9},{"x":4.7,"y":13},{"x":4.7,"y":13},{"x":4.7,"y":12},{"x":4.7,"y":9},{"x":5.2,"y":11},{"x":5.2,"y":11},{"x":5.7,"y":13},{"x":5.9,"y":11},{"x":4,"y":14},{"x":4,"y":15},{"x":4,"y":14},{"x":4,"y":13},{"x":4.6,"y":13},{"x":5,"y":13},{"x":4.2,"y":14},{"x":4.2,"y":14},{"x":4.6,"y":13},{"x":4.6,"y":13},{"x":4.6,"y":13},{"x":5.4,"y":11},{"x":5.4,"y":13},{"x":3,"y":17},{"x":3.7,"y":15},{"x":4,"y":15},{"x":4.7,"y":14},{"x":4.7,"y":9},{"x":4.7,"y":14},{"x":5.7,"y":13},{"x":6.1,"y":11},{"x":4,"y":11},{"x":4.2,"y":12},{"x":4.4,"y":12},{"x":4.6,"y":11},{"x":4,"y":14},{"x":4,"y":13},{"x":4.6,"y":13},{"x":5,"y":13},{"x":3.3,"y":14},{"x":3.3,"y":15},{"x":4,"y":14},{"x":5.6,"y":12},{"x":2.5,"y":18},{"x":2.5,"y":18},{"x":2.5,"y":20},{"x":2.5,"y":19},{"x":2.5,"y":20},{"x":2.5,"y":18},{"x":2.2,"y":21},{"x":2.2,"y":19},{"x":2.5,"y":19},{"x":2.5,"y":19},{"x":2.5,"y":20},{"x":2.5,"y":20},{"x":2.5,"y":19},{"x":2.5,"y":20},{"x":2.7,"y":15},{"x":2.7,"y":16},{"x":3.4,"y":15},{"x":3.4,"y":15},{"x":4,"y":16},{"x":4.7,"y":14},{"x":4.7,"y":11},{"x":5.7,"y":13},{"x":2.7,"y":15},{"x":2.7,"y":16},{"x":2.7,"y":17},{"x":3.4,"y":15},{"x":3.4,"y":15},{"x":4,"y":15},{"x":4,"y":16}]}],"dataLabels":{"enabled":false},"xaxis":{"type":"numeric","min":1,"max":7,"tickAmount":6,"crosshairs":{"show":true,"stroke":{"dashArray":0}},"labels":{"style":{"colors":"#848484"},"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('.0f')(value) + '';}"}},"yaxis":{"min":5,"max":35,"tickAmount":6,"labels":{"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~r')(value) + '';}","style":{"colors":"#848484"}},"tooltip":{"enabled":true},"show":true},"grid":{"xaxis":{"lines":{"show":true}}},"title":{"text":["4"],"margin":0,"floating":true}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":1.6,"max":7},"type":"scatter"},"evals":["ax_opts.xaxis.labels.formatter","ax_opts.yaxis.labels.formatter"],"jsHooks":[]}</script><div id="htmlwidget-eabcbeba6740510f2ff6" style="width:100%;height:300px;" class="apexcharter html-widget "></div>
<script type="application/json" data-for="htmlwidget-eabcbeba6740510f2ff6">{"x":{"ax_opts":{"chart":{"type":"scatter"},"series":[{"name":"cty","type":"scatter","data":[{"x":1.8,"y":18},{"x":1.8,"y":21},{"x":2,"y":20},{"x":2,"y":21},{"x":2.8,"y":16},{"x":2.8,"y":18},{"x":3.1,"y":18},{"x":2.4,"y":19},{"x":2.4,"y":22},{"x":3.1,"y":18},{"x":3.5,"y":18},{"x":3.6,"y":17},{"x":2.4,"y":18},{"x":3,"y":17},{"x":3.3,"y":16},{"x":3.3,"y":16},{"x":3.3,"y":17},{"x":3.3,"y":17},{"x":3.3,"y":11},{"x":3.8,"y":15},{"x":3.8,"y":15},{"x":3.8,"y":16},{"x":4,"y":16},{"x":1.6,"y":28},{"x":1.6,"y":24},{"x":1.6,"y":25},{"x":1.6,"y":23},{"x":1.6,"y":24},{"x":1.8,"y":26},{"x":1.8,"y":25},{"x":1.8,"y":24},{"x":2,"y":21},{"x":2.4,"y":18},{"x":2.4,"y":18},{"x":2.4,"y":21},{"x":2.4,"y":21},{"x":2.5,"y":18},{"x":2.5,"y":18},{"x":3.3,"y":19},{"x":2,"y":19},{"x":2,"y":19},{"x":2,"y":20},{"x":2,"y":20},{"x":2.7,"y":17},{"x":2.7,"y":16},{"x":2.7,"y":17},{"x":2.4,"y":21},{"x":2.4,"y":19},{"x":2.5,"y":23},{"x":2.5,"y":23},{"x":3.5,"y":19},{"x":3.5,"y":19},{"x":3,"y":18},{"x":3,"y":19},{"x":3.5,"y":19},{"x":3.1,"y":18},{"x":3.8,"y":16},{"x":3.8,"y":17},{"x":3.8,"y":18},{"x":5.3,"y":16},{"x":2.2,"y":21},{"x":2.2,"y":21},{"x":2.4,"y":21},{"x":2.4,"y":21},{"x":3,"y":18},{"x":3,"y":18},{"x":3.5,"y":19},{"x":2.2,"y":21},{"x":2.2,"y":21},{"x":2.4,"y":21},{"x":2.4,"y":22},{"x":3,"y":18},{"x":3,"y":18},{"x":3.3,"y":18},{"x":1.8,"y":24},{"x":1.8,"y":24},{"x":1.8,"y":26},{"x":1.8,"y":28},{"x":1.8,"y":26},{"x":2,"y":21},{"x":2,"y":19},{"x":2,"y":21},{"x":2,"y":22},{"x":2.8,"y":17},{"x":1.9,"y":33},{"x":2,"y":21},{"x":2,"y":19},{"x":2,"y":22},{"x":2,"y":21},{"x":2.5,"y":21},{"x":2.5,"y":21},{"x":2.8,"y":16},{"x":2.8,"y":17},{"x":1.9,"y":35},{"x":1.9,"y":29},{"x":2,"y":21},{"x":2,"y":19},{"x":2.5,"y":20},{"x":2.5,"y":20},{"x":1.8,"y":21},{"x":1.8,"y":18},{"x":2,"y":19},{"x":2,"y":21},{"x":2.8,"y":16},{"x":2.8,"y":18},{"x":3.6,"y":17}]}],"dataLabels":{"enabled":false},"xaxis":{"type":"numeric","min":1,"max":7,"tickAmount":6,"crosshairs":{"show":true,"stroke":{"dashArray":0}},"labels":{"style":{"colors":"#848484"},"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('.0f')(value) + '';}"}},"yaxis":{"min":5,"max":35,"tickAmount":6,"labels":{"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~r')(value) + '';}","style":{"colors":"#848484"}},"tooltip":{"enabled":true},"show":false},"grid":{"xaxis":{"lines":{"show":true}}},"title":{"text":["f"],"margin":0,"floating":true}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":1.6,"max":7},"type":"scatter"},"evals":["ax_opts.xaxis.labels.formatter","ax_opts.yaxis.labels.formatter"],"jsHooks":[]}</script><div id="htmlwidget-b31228e0d1d69c5e3500" style="width:100%;height:300px;" class="apexcharter html-widget "></div>
<script type="application/json" data-for="htmlwidget-b31228e0d1d69c5e3500">{"x":{"ax_opts":{"chart":{"type":"scatter"},"series":[{"name":"cty","type":"scatter","data":[{"x":5.3,"y":14},{"x":5.3,"y":11},{"x":5.3,"y":14},{"x":5.7,"y":13},{"x":6,"y":12},{"x":5.7,"y":16},{"x":5.7,"y":15},{"x":6.2,"y":16},{"x":6.2,"y":15},{"x":7,"y":15},{"x":4.6,"y":11},{"x":5.4,"y":11},{"x":5.4,"y":12},{"x":3.8,"y":18},{"x":3.8,"y":18},{"x":4,"y":17},{"x":4,"y":16},{"x":4.6,"y":15},{"x":4.6,"y":15},{"x":4.6,"y":15},{"x":4.6,"y":15},{"x":5.4,"y":14},{"x":5.4,"y":11},{"x":5.4,"y":11},{"x":5.4,"y":12}]}],"dataLabels":{"enabled":false},"xaxis":{"type":"numeric","min":1,"max":7,"tickAmount":6,"crosshairs":{"show":true,"stroke":{"dashArray":0}},"labels":{"style":{"colors":"#848484"},"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('.0f')(value) + '';}"}},"yaxis":{"min":5,"max":35,"tickAmount":6,"labels":{"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~r')(value) + '';}","style":{"colors":"#848484"}},"tooltip":{"enabled":true},"show":true},"grid":{"xaxis":{"lines":{"show":true}}},"title":{"text":["r"],"margin":0,"floating":true}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":1.6,"max":7},"type":"scatter"},"evals":["ax_opts.xaxis.labels.formatter","ax_opts.yaxis.labels.formatter"],"jsHooks":[]}</script><div class="apexcharter-facet-xaxis-title" style="font-weight: 400; font-size: 14px; grid-area: 3 / 1 / 3 / 4 ;">engine displacement, in litres</div>
<div class="apexcharter-facet-yaxis-title apexcharter-facet-rotate180" style="font-weight: 400; font-size: 14px; grid-area: 1 / 1 / 3 / 2 ;">city miles per gallon</div>
</div>
</div>
<p>Synchronized line charts with free y-axis :</p>
<div class="sourceCode" id="cb3"><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="fu"><a href="https://rdrr.io/r/utils/data.html" class="external-link">data</a></span><span class="op">(</span><span class="st">"economics_long"</span>, package <span class="op">=</span> <span class="st">"ggplot2"</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">economics_long</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">value</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"line"</span>, synchronize <span class="op">=</span> <span class="st">"sync-it"</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> 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">"~s"</span><span class="op">)</span>,</span>
<span> minWidth <span class="op">=</span> <span class="fl">40</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_tooltip.html">ax_tooltip</a></span><span class="op">(</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 class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/apex-facets.html">ax_facet_wrap</a></span><span class="op">(</span><span class="fu"><a href="../../reference/apexcharter-exports.html">vars</a></span><span class="op">(</span><span class="va">variable</span><span class="op">)</span>, scales <span class="op">=</span> <span class="st">"free_y"</span><span class="op">)</span></span></code></pre></div>
<div style="width:100%;" class="apexcharter-facet">
<div class="apexcharter-grid-container" style="display: grid; grid-template-columns: repeat(2, 1fr) ; grid-template-rows: repeat(3, 1fr) ; grid-column-gap: 0px; grid-row-gap: 5px;">
<div id="htmlwidget-caa70e5a4eaed460fb62" style="width:100%;height:300px;" class="apexcharter html-widget "></div>
<script type="application/json" data-for="htmlwidget-caa70e5a4eaed460fb62">{"x":{"ax_opts":{"chart":{"type":"line","group":"sync-it"},"series":[{"name":"value","type":"line","data":[[-79056000000,506.7],[-76377600000,509.8],[-73699200000,515.6],[-71107200000,512.2],[-68428800000,517.4],[-65836800000,525.1],[-63158400000,530.9],[-60480000000,533.6],[-57974400000,544.3],[-55296000000,544],[-52704000000,549.8],[-50025600000,556.3],[-47433600000,563.2],[-44755200000,567],[-42076800000,568.2],[-39484800000,571.6],[-36806400000,576.7],[-34214400000,576.5],[-31536000000,583.5],[-28857600000,588.7],[-26438400000,588.9],[-23760000000,593.9],[-21168000000,600.3],[-18489600000,600.9],[-15897600000,602.7],[-13219200000,609.9],[-10540800000,613.2],[-7948800000,618.5],[-5270400000,620.5],[-2678400000,622.8],[0,628.7],[2678400000,634],[5097600000,632.3],[7776000000,636],[10368000000,642.4],[13046400000,646.3],[15638400000,648.5],[18316800000,652.9],[20995200000,659.1],[23587200000,658.3],[26265600000,656.6],[28857600000,665.6],[31536000000,676.1],[34214400000,679.4],[36633600000,682],[39312000000,688.8],[41904000000,691.1],[44582400000,699.8],[47174400000,698.9],[49852800000,704.9],[52531200000,713],[55123200000,715.8],[57801600000,720.9],[60393600000,728.4],[63072000000,731.5],[65750400000,736.2],[68256000000,749.2],[70934400000,752.5],[73526400000,758],[76204800000,761.6],[78796800000,769.9],[81475200000,776.3],[84153600000,781.1],[86745600000,794.9],[89424000000,800.5],[92016000000,806.1],[94694400000,816.5],[97372800000,825.8],[99792000000,832.8],[102470400000,835.7],[105062400000,841.6],[107740800000,844.3],[110332800000,854.1],[113011200000,853.3],[115689600000,869.2],[118281600000,868.2],[120960000000,876.9],[123552000000,876.6],[126230400000,884.5],[128908800000,889.7],[131328000000,901.4],[134006400000,910.8],[136598400000,922.4],[139276800000,928],[141868800000,937.9],[144547200000,954.8],[147225600000,955.1],[149817600000,959.2],[152496000000,956.2],[155088000000,961.8],[157766400000,975.6],[160444800000,989.4],[162864000000,990.6],[165542400000,995],[168134400000,1018.9],[170812800000,1026.8],[173404800000,1039.8],[176083200000,1047],[178761600000,1054.8],[181353600000,1060.9],[184032000000,1075.8],[186624000000,1092.1],[189302400000,1107.1],[191980800000,1107.7],[194486400000,1114.9],[197164800000,1125.4],[199756800000,1122.7],[202435200000,1140.5],[205027200000,1149.6],[207705600000,1158],[210384000000,1168.8],[212976000000,1176.8],[215654400000,1189],[218246400000,1211.5],[220924800000,1215],[223603200000,1231.3],[226022400000,1238.3],[228700800000,1247.3],[231292800000,1257.1],[233971200000,1263.6],[236563200000,1280.5],[239241600000,1285.7],[241920000000,1294.5],[244512000000,1311.4],[247190400000,1327],[249782400000,1336],[252460800000,1329.5],[255139200000,1355.1],[257558400000,1377.5],[260236800000,1396.4],[262828800000,1412],[265507200000,1425.8],[268099200000,1426.8],[270777600000,1447],[273456000000,1452.9],[276048000000,1466.9],[278726400000,1480.6],[281318400000,1496.5],[283996800000,1502.4],[286675200000,1517.8],[289094400000,1531.2],[291772800000,1538.4],[294364800000,1558.8],[297043200000,1575.7],[299635200000,1586.1],[302313600000,1615.6],[304992000000,1633.9],[307584000000,1641.6],[310262400000,1657.3],[312854400000,1666.3],[315532800000,1697.3],[318211200000,1701.4],[320716800000,1708.2],[323395200000,1695.2],[325987200000,1700.1],[328665600000,1718.8],[331257600000,1747.1],[333936000000,1763.8],[336614400000,1780.5],[339206400000,1817.1],[341884800000,1826.8],[344476800000,1851.7],[347155200000,1870],[349833600000,1884.2],[352252800000,1902.9],[354931200000,1904.4],[357523200000,1913.8],[360201600000,1934.5],[362793600000,1942.1],[365472000000,1966.6],[368150400000,1965.5],[370742400000,1963.9],[373420800000,1970.6],[376012800000,1988.8],[378691200000,1997.1],[381369600000,2021.2],[383788800000,2024.1],[386467200000,2026.3],[389059200000,2044.5],[391737600000,2048.1],[394329600000,2072.2],[397008000000,2080.1],[399686400000,2104.6],[402278400000,2125.8],[404956800000,2149.3],[407548800000,2161.6],[41022
<script type="application/json" data-for="htmlwidget-8f396c911e9f9b1a93e1">{"x":{"ax_opts":{"chart":{"type":"line","group":"sync-it"},"series":[{"name":"value","type":"line","data":[[-79056000000,198712],[-76377600000,198911],[-73699200000,199113],[-71107200000,199311],[-68428800000,199498],[-65836800000,199657],[-63158400000,199808],[-60480000000,199920],[-57974400000,200056],[-55296000000,200208],[-52704000000,200361],[-50025600000,200536],[-47433600000,200706],[-44755200000,200898],[-42076800000,201095],[-39484800000,201290],[-36806400000,201466],[-34214400000,201621],[-31536000000,201760],[-28857600000,201881],[-26438400000,202023],[-23760000000,202161],[-21168000000,202331],[-18489600000,202507],[-15897600000,202677],[-13219200000,202877],[-10540800000,203090],[-7948800000,203302],[-5270400000,203500],[-2678400000,203675],[0,203849],[2678400000,204008],[5097600000,204156],[7776000000,204401],[10368000000,204607],[13046400000,204830],[15638400000,205052],[18316800000,205295],[20995200000,205540],[23587200000,205788],[26265600000,206024],[28857600000,206238],[31536000000,206466],[34214400000,206668],[36633600000,206855],[39312000000,207065],[41904000000,207260],[44582400000,207462],[47174400000,207661],[49852800000,207881],[52531200000,208114],[55123200000,208345],[57801600000,208555],[60393600000,208740],[63072000000,208917],[65750400000,209061],[68256000000,209212],[70934400000,209386],[73526400000,209545],[76204800000,209725],[78796800000,209896],[81475200000,210075],[84153600000,210278],[86745600000,210479],[89424000000,210656],[92016000000,210821],[94694400000,210985],[97372800000,211120],[99792000000,211254],[102470400000,211420],[105062400000,211577],[107740800000,211746],[110332800000,211909],[113011200000,212092],[115689600000,212289],[118281600000,212475],[120960000000,212634],[123552000000,212785],[126230400000,212932],[128908800000,213074],[131328000000,213211],[134006400000,213361],[136598400000,213513],[139276800000,213686],[141868800000,213854],[144547200000,214042],[147225600000,214246],[149817600000,214451],[152496000000,214625],[155088000000,214782],[157766400000,214931],[160444800000,215065],[162864000000,215198],[165542400000,215353],[168134400000,215523],[170812800000,215768],[173404800000,215973],[176083200000,216195],[178761600000,216393],[181353600000,216587],[184032000000,216771],[186624000000,216931],[189302400000,217095],[191980800000,217249],[194486400000,217381],[197164800000,217528],[199756800000,217685],[202435200000,217861],[205027200000,218035],[207705600000,218233],[210384000000,218440],[212976000000,218644],[215654400000,218834],[218246400000,219006],[220924800000,219179],[223603200000,219344],[226022400000,219504],[228700800000,219684],[231292800000,219859],[233971200000,220046],[236563200000,220239],[239241600000,220458],[241920000000,220688],[244512000000,220904],[247190400000,221109],[249782400000,221303],[252460800000,221477],[255139200000,221629],[257558400000,221792],[260236800000,221991],[262828800000,222176],[265507200000,222379],[268099200000,222585],[270777600000,222805],[273456000000,223053],[276048000000,223271],[278726400000,223477],[281318400000,223670],[283996800000,223865],[286675200000,224053],[289094400000,224235],[291772800000,224438],[294364800000,224632],[297043200000,224843],[299635200000,225055],[302313600000,225295],[304992000000,225547],[307584000000,225801],[310262400000,226027],[312854400000,226243],[315532800000,226451],[318211200000,226656],[320716800000,226849],[323395200000,227061],[325987200000,227251],[328665600000,227522],[331257600000,227726],[333936000000,227953],[336614400000,228186],[339206400000,228417],[341884800000,228612],[344476800000,228779],[347155200000,228937],[349833600000,229071],[352252800000,229224],[354931200000,229403],[357523200000,229575],[360201600000,229761],[362793600000,229966],[365472000000,230187],[368150400000,230412],[370742400000,230641],[373420800000,230822],[376012800000,230989],[378691200000,231157],[381369600000,231313],[383788800000,231470],[386467200000,231645],[389059200000,231809],[391737600000,231992],[3943296
<script type="application/json" data-for="htmlwidget-cd3544da1db624ce874e">{"x":{"ax_opts":{"chart":{"type":"line","group":"sync-it"},"series":[{"name":"value","type":"line","data":[[-79056000000,12.6],[-76377600000,12.6],[-73699200000,11.9],[-71107200000,12.9],[-68428800000,12.8],[-65836800000,11.8],[-63158400000,11.7],[-60480000000,12.3],[-57974400000,11.7],[-55296000000,12.3],[-52704000000,12],[-50025600000,11.7],[-47433600000,10.7],[-44755200000,10.5],[-42076800000,10.6],[-39484800000,10.8],[-36806400000,10.6],[-34214400000,11.1],[-31536000000,10.3],[-28857600000,9.699999999999999],[-26438400000,10.2],[-23760000000,9.699999999999999],[-21168000000,10.1],[-18489600000,11.1],[-15897600000,11.8],[-13219200000,11.5],[-10540800000,11.6],[-7948800000,11.4],[-5270400000,11.6],[-2678400000,11.8],[0,11.8],[2678400000,11.7],[5097600000,12.4],[7776000000,13.3],[10368000000,12.4],[13046400000,12.3],[15638400000,13.5],[18316800000,13.4],[20995200000,12.9],[23587200000,13.1],[26265600000,13.6],[28857600000,13.2],[31536000000,13.3],[34214400000,13.3],[36633600000,13.5],[39312000000,13.2],[41904000000,13.6],[44582400000,14.7],[47174400000,13.8],[49852800000,13.6],[52531200000,13.3],[55123200000,13.3],[57801600000,13.1],[60393600000,13],[63072000000,12.5],[65750400000,12.8],[68256000000,11.8],[70934400000,11.5],[73526400000,11.7],[76204800000,11.7],[78796800000,11.7],[81475200000,12],[84153600000,12.2],[86745600000,13],[89424000000,13.6],[92016000000,13.7],[94694400000,12.4],[97372800000,12.5],[99792000000,12.7],[102470400000,13.2],[105062400000,13.2],[107740800000,13.6],[110332800000,13.2],[113011200000,13.9],[115689600000,13.1],[118281600000,14.4],[120960000000,14.4],[123552000000,14.8],[126230400000,14.3],[128908800000,14.2],[131328000000,13.4],[134006400000,13.1],[136598400000,12.8],[139276800000,12.8],[141868800000,12.8],[144547200000,12.1],[147225600000,12.9],[149817600000,13.4],[152496000000,13.8],[155088000000,14],[157766400000,13.2],[160444800000,12.5],[162864000000,12.7],[165542400000,14.2],[168134400000,17.3],[170812800000,14.3],[173404800000,12.6],[176083200000,13],[178761600000,13],[181353600000,13.4],[184032000000,12.7],[186624000000,12],[189302400000,11.7],[191980800000,12.3],[194486400000,12.2],[197164800000,11.7],[199756800000,12.3],[202435200000,11.4],[205027200000,11.7],[207705600000,11.7],[210384000000,11.4],[212976000000,11.1],[215654400000,11.4],[218246400000,10.6],[220924800000,10.6],[223603200000,9.300000000000001],[226022400000,10.5],[228700800000,10.5],[231292800000,10.3],[233971200000,10.6],[236563200000,10.5],[239241600000,10.9],[241920000000,11.1],[244512000000,11],[247190400000,11.2],[249782400000,11.4],[252460800000,11.9],[255139200000,11.1],[257558400000,11],[260236800000,10.8],[262828800000,10.3],[265507200000,10],[268099200000,10.9],[270777600000,10.5],[273456000000,10.6],[276048000000,10.7],[278726400000,10.5],[281318400000,10.4],[283996800000,11.1],[286675200000,11.1],[289094400000,11.2],[291772800000,11],[294364800000,10.3],[297043200000,9.9],[299635200000,10.6],[302313600000,9.699999999999999],[304992000000,9.4],[307584000000,9.699999999999999],[310262400000,9.699999999999999],[312854400000,10.1],[315532800000,9.9],[318211200000,10.1],[320716800000,10.2],[323395200000,11.3],[325987200000,11.4],[328665600000,11.2],[331257600000,11.3],[333936000000,11.3],[336614400000,11.7],[339206400000,11.3],[341884800000,11.6],[344476800000,11.4],[347155200000,10.9],[349833600000,10.8],[352252800000,10.8],[354931200000,10.9],[357523200000,11],[360201600000,10.8],[362793600000,12.3],[365472000000,12],[368150400000,12.4],[370742400000,13],[373420800000,13.2],[376012800000,12.5],[378691200000,12.7],[381369600000,12.1],[383788800000,12.2],[386467200000,12.9],[389059200000,12.3],[391737600000,12.3],[394329600000,12.5],[397008000000,12.6],[399686400000,11.8],[402278400000,11.3],[404956800000,10.9],[407548800000,10.9],[410227200000,11.1],[412905600000,11.1],[415324800000,10.6],[418003200000,10.3],[420595200000,9.9],[423273600000,9.1],[425865600000,9.6],[428544000000,9.199999999999999],[431222400000,9.6],[433814400000,
<script type="application/json" data-for="htmlwidget-ff55878433f0d38a9537">{"x":{"ax_opts":{"chart":{"type":"line","group":"sync-it"},"series":[{"name":"value","type":"line","data":[[-79056000000,4.5],[-76377600000,4.7],[-73699200000,4.6],[-71107200000,4.9],[-68428800000,4.7],[-65836800000,4.8],[-63158400000,5.1],[-60480000000,4.5],[-57974400000,4.1],[-55296000000,4.6],[-52704000000,4.4],[-50025600000,4.4],[-47433600000,4.5],[-44755200000,4.2],[-42076800000,4.6],[-39484800000,4.8],[-36806400000,4.4],[-34214400000,4.4],[-31536000000,4.4],[-28857600000,4.9],[-26438400000,4],[-23760000000,4],[-21168000000,4.2],[-18489600000,4.4],[-15897600000,4.4],[-13219200000,4.4],[-10540800000,4.7],[-7948800000,4.5],[-5270400000,4.8],[-2678400000,4.6],[0,4.6],[2678400000,4.5],[5097600000,4.6],[7776000000,4.1],[10368000000,4.7],[13046400000,4.9],[15638400000,5.1],[18316800000,5.4],[20995200000,5.2],[23587200000,5.2],[26265600000,5.6],[28857600000,5.9],[31536000000,6.2],[34214400000,6.3],[36633600000,6.4],[39312000000,6.5],[41904000000,6.7],[44582400000,5.7],[47174400000,6.2],[49852800000,6.4],[52531200000,5.8],[55123200000,6.5],[57801600000,6.4],[60393600000,6.2],[63072000000,6.2],[65750400000,6.6],[68256000000,6.6],[70934400000,6.7],[73526400000,6.6],[76204800000,5.4],[78796800000,6.1],[81475200000,6],[84153600000,5.6],[86745600000,5.7],[89424000000,5.7],[92016000000,6.1],[94694400000,5.7],[97372800000,5.2],[99792000000,5.5],[102470400000,5],[105062400000,4.9],[107740800000,5],[110332800000,5.2],[113011200000,4.9],[115689600000,5.4],[118281600000,5.5],[120960000000,5.1],[123552000000,4.7],[126230400000,5],[128908800000,5.1],[131328000000,4.8],[134006400000,5],[136598400000,4.6],[139276800000,5.3],[141868800000,5.7],[144547200000,5],[147225600000,5.3],[149817600000,5.5],[152496000000,5.2],[155088000000,5.7],[157766400000,6.3],[160444800000,7.1],[162864000000,7.2],[165542400000,8.699999999999999],[168134400000,9.4],[170812800000,8.800000000000001],[173404800000,8.6],[176083200000,9.199999999999999],[178761600000,9.199999999999999],[181353600000,8.6],[184032000000,9.5],[186624000000,9],[189302400000,9],[191980800000,8.199999999999999],[194486400000,8.699999999999999],[197164800000,8.199999999999999],[199756800000,8.300000000000001],[202435200000,7.8],[205027200000,7.7],[207705600000,7.9],[210384000000,7.8],[212976000000,7.7],[215654400000,8.4],[218246400000,8],[220924800000,7.5],[223603200000,7.2],[226022400000,7.2],[228700800000,7.3],[231292800000,7.9],[233971200000,6.2],[236563200000,7.1],[239241600000,7],[241920000000,6.7],[244512000000,6.9],[247190400000,7],[249782400000,6.8],[252460800000,6.5],[255139200000,6.7],[257558400000,6.2],[260236800000,6.1],[262828800000,5.7],[265507200000,6],[268099200000,5.8],[270777600000,5.8],[273456000000,5.6],[276048000000,5.9],[278726400000,5.5],[281318400000,5.6],[283996800000,5.9],[286675200000,5.9],[289094400000,5.9],[291772800000,5.4],[294364800000,5.6],[297043200000,5.6],[299635200000,5.9],[302313600000,4.8],[304992000000,5.5],[307584000000,5.5],[310262400000,5.3],[312854400000,5.7],[315532800000,5.3],[318211200000,5.8],[320716800000,6],[323395200000,5.8],[325987200000,5.7],[328665600000,6.4],[331257600000,7],[333936000000,7.5],[336614400000,7.7],[339206400000,7.5],[341884800000,7.7],[344476800000,7.5],[347155200000,7.4],[349833600000,7.1],[352252800000,7.1],[354931200000,7.4],[357523200000,6.9],[360201600000,6.6],[362793600000,7.1],[365472000000,7.2],[368150400000,6.8],[370742400000,6.8],[373420800000,6.9],[376012800000,6.9],[378691200000,7.1],[381369600000,7.5],[383788800000,7.7],[386467200000,8.1],[389059200000,8.5],[391737600000,9.5],[394329600000,8.5],[397008000000,8.699999999999999],[399686400000,9.5],[402278400000,9.699999999999999],[404956800000,10],[407548800000,10.2],[410227200000,11.1],[412905600000,9.800000000000001],[415324800000,10.4],[418003200000,10.9],[420595200000,12.3],[423273600000,11.3],[425865600000,10.1],[428544000000,9.300000000000001],[431222400000,9.300000000000001],[433814400000,9.4],[436492800000,9.300000000000001],[439084800000,8.699999999999999],[441763200000,9.1],[44
<script type="application/json" data-for="htmlwidget-bbf76e734bae35d1771c">{"x":{"ax_opts":{"chart":{"type":"line","group":"sync-it"},"series":[{"name":"value","type":"line","data":[[-79056000000,2944],[-76377600000,2945],[-73699200000,2958],[-71107200000,3143],[-68428800000,3066],[-65836800000,3018],[-63158400000,2878],[-60480000000,3001],[-57974400000,2877],[-55296000000,2709],[-52704000000,2740],[-50025600000,2938],[-47433600000,2883],[-44755200000,2768],[-42076800000,2686],[-39484800000,2689],[-36806400000,2715],[-34214400000,2685],[-31536000000,2718],[-28857600000,2692],[-26438400000,2712],[-23760000000,2758],[-21168000000,2713],[-18489600000,2816],[-15897600000,2868],[-13219200000,2856],[-10540800000,3040],[-7948800000,3049],[-5270400000,2856],[-2678400000,2884],[0,3201],[2678400000,3453],[5097600000,3635],[7776000000,3797],[10368000000,3919],[13046400000,4071],[15638400000,4175],[18316800000,4256],[20995200000,4456],[23587200000,4591],[26265600000,4898],[28857600000,5076],[31536000000,4986],[34214400000,4903],[36633600000,4987],[39312000000,4959],[41904000000,4996],[44582400000,4949],[47174400000,5035],[49852800000,5134],[52531200000,5042],[55123200000,4954],[57801600000,5161],[60393600000,5154],[63072000000,5019],[65750400000,4928],[68256000000,5038],[70934400000,4959],[73526400000,4922],[76204800000,4923],[78796800000,4913],[81475200000,4939],[84153600000,4849],[86745600000,4875],[89424000000,4602],[92016000000,4543],[94694400000,4326],[97372800000,4452],[99792000000,4394],[102470400000,4459],[105062400000,4329],[107740800000,4363],[110332800000,4305],[113011200000,4305],[115689600000,4350],[118281600000,4144],[120960000000,4396],[123552000000,4489],[126230400000,4644],[128908800000,4731],[131328000000,4634],[134006400000,4618],[136598400000,4705],[139276800000,4927],[141868800000,5063],[144547200000,5022],[147225600000,5437],[149817600000,5523],[152496000000,6140],[155088000000,6636],[157766400000,7501],[160444800000,7520],[162864000000,7978],[165542400000,8210],[168134400000,8433],[170812800000,8220],[173404800000,8127],[176083200000,7928],[178761600000,7923],[181353600000,7897],[184032000000,7794],[186624000000,7744],[189302400000,7534],[191980800000,7326],[194486400000,7230],[197164800000,7330],[199756800000,7053],[202435200000,7322],[205027200000,7490],[207705600000,7518],[210384000000,7380],[212976000000,7430],[215654400000,7620],[218246400000,7545],[220924800000,7280],[223603200000,7443],[226022400000,7307],[228700800000,7059],[231292800000,6911],[233971200000,7134],[236563200000,6829],[239241600000,6925],[241920000000,6751],[244512000000,6763],[247190400000,6815],[249782400000,6386],[252460800000,6489],[255139200000,6318],[257558400000,6337],[260236800000,6180],[262828800000,6127],[265507200000,6028],[268099200000,6309],[270777600000,6080],[273456000000,6125],[276048000000,5947],[278726400000,6077],[281318400000,6228],[283996800000,6109],[286675200000,6173],[289094400000,6109],[291772800000,6069],[294364800000,5840],[297043200000,5959],[299635200000,5996],[302313600000,6320],[304992000000,6190],[307584000000,6296],[310262400000,6238],[312854400000,6325],[315532800000,6683],[318211200000,6702],[320716800000,6729],[323395200000,7358],[325987200000,7984],[328665600000,8098],[331257600000,8363],[333936000000,8281],[336614400000,8021],[339206400000,8088],[341884800000,8023],[344476800000,7718],[347155200000,8071],[349833600000,8051],[352252800000,7982],[354931200000,7869],[357523200000,8174],[360201600000,8098],[362793600000,7863],[365472000000,8036],[368150400000,8230],[370742400000,8646],[373420800000,9029],[376012800000,9267],[378691200000,9397],[381369600000,9705],[383788800000,9895],[386467200000,10244],[389059200000,10335],[391737600000,10538],[394329600000,10849],[397008000000,10881],[399686400000,11217],[402278400000,11529],[404956800000,11938],[407548800000,12051],[410227200000,11534],[412905600000,11545],[415324800000,11408],[418003200000,11268],[420595200000,11154],[423273600000,11246],[425865600000,10548],[428544000000,10623],[431222400000,10282],[433814400000,9887],[436492800000,9499],[439084800
</div>
</div>
<p>Dont forget to set a <code>minWidth</code> for y axis labels when
synchronizing charts, otherwise unexpected results can occurs.</p>
</div>
<div class="section level2">
<h2 id="facet-grid">Facet grid<a class="anchor" aria-label="anchor" href="#facet-grid"></a>
</h2>
<p>Create a matrix of charts defined by row and column faceting
variables with <code><a href="../../reference/apex-facets.html">ax_facet_grid()</a></code> :</p>
<div class="sourceCode" id="cb4"><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="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="../../reference/apex.html">apex</a></span><span class="op">(</span><span class="va">mpg</span>, <span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span><span class="va">displ</span>, <span class="va">cty</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_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>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">".0f"</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">"Facet grid example"</span>,</span>
<span> subtitle <span class="op">=</span> <span class="st">"mpg data from ggplot2"</span>,</span>
<span> x <span class="op">=</span> <span class="st">"engine displacement, in litres"</span>,</span>
<span> y <span class="op">=</span> <span class="st">"city miles per gallon"</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-facets.html">ax_facet_grid</a></span><span class="op">(</span>rows <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">vars</a></span><span class="op">(</span><span class="va">drv</span><span class="op">)</span>, cols <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">vars</a></span><span class="op">(</span><span class="va">year</span><span class="op">)</span><span class="op">)</span></span></code></pre></div>
<div style="width:100%;" class="apexcharter-facet">
<div class="apexcharter-facet-title" style="font-weight: 700; font-size: 16px;">Facet grid example</div>
<div class="apexcharter-facet-subtitle" style="font-weight: 400; font-size: 14px;">mpg data from ggplot2</div>
<div class="apexcharter-grid-container" style="display: grid; grid-template-columns: 30px repeat(2, 1fr) 30px ; grid-template-rows: 30px repeat(3, 1fr) 30px ; grid-column-gap: 3px; grid-row-gap: 3px;">
<div class="apexcharter-facet-col-label">1999</div>
<div class="apexcharter-facet-col-label">2008</div>
<div></div>
<div id="htmlwidget-91f30776228def1e5c26" style="width:100%;height:300px;" class="apexcharter html-widget "></div>
<script type="application/json" data-for="htmlwidget-91f30776228def1e5c26">{"x":{"ax_opts":{"chart":{"type":"scatter"},"series":[{"name":"cty","type":"scatter","data":[{"x":1.8,"y":18},{"x":1.8,"y":16},{"x":2.8,"y":15},{"x":2.8,"y":17},{"x":2.8,"y":15},{"x":5.7,"y":11},{"x":6.5,"y":14},{"x":3.9,"y":13},{"x":3.9,"y":14},{"x":5.2,"y":11},{"x":5.2,"y":11},{"x":3.9,"y":13},{"x":5.2,"y":11},{"x":5.9,"y":11},{"x":5.2,"y":11},{"x":5.2,"y":11},{"x":5.9,"y":11},{"x":4,"y":14},{"x":4,"y":15},{"x":4,"y":14},{"x":5,"y":13},{"x":4.2,"y":14},{"x":4.2,"y":14},{"x":4.6,"y":13},{"x":4.6,"y":13},{"x":5.4,"y":11},{"x":4,"y":15},{"x":4.7,"y":14},{"x":4,"y":11},{"x":4.6,"y":11},{"x":4,"y":14},{"x":5,"y":13},{"x":3.3,"y":14},{"x":3.3,"y":15},{"x":2.5,"y":18},{"x":2.5,"y":18},{"x":2.2,"y":21},{"x":2.2,"y":19},{"x":2.5,"y":19},{"x":2.5,"y":19},{"x":2.7,"y":15},{"x":2.7,"y":16},{"x":3.4,"y":15},{"x":3.4,"y":15},{"x":4.7,"y":11},{"x":2.7,"y":15},{"x":2.7,"y":16},{"x":3.4,"y":15},{"x":3.4,"y":15}]}],"dataLabels":{"enabled":false},"xaxis":{"type":"numeric","min":1,"max":7,"tickAmount":6,"crosshairs":{"show":true,"stroke":{"dashArray":0}},"labels":{"style":{"colors":"#848484"},"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('.0f')(value) + '';}"}},"yaxis":{"min":5,"max":35,"tickAmount":6,"labels":{"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~r')(value) + '';}","style":{"colors":"#848484"}},"tooltip":{"enabled":true},"show":true},"grid":{"xaxis":{"lines":{"show":true}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":1.6,"max":7},"type":"scatter"},"evals":["ax_opts.xaxis.labels.formatter","ax_opts.yaxis.labels.formatter"],"jsHooks":[]}</script><div id="htmlwidget-e5aea324456ce31edab1" style="width:100%;height:300px;" class="apexcharter html-widget "></div>
<script type="application/json" data-for="htmlwidget-e5aea324456ce31edab1">{"x":{"ax_opts":{"chart":{"type":"scatter"},"series":[{"name":"cty","type":"scatter","data":[{"x":2,"y":20},{"x":2,"y":19},{"x":3.1,"y":17},{"x":3.1,"y":15},{"x":3.1,"y":17},{"x":4.2,"y":16},{"x":5.3,"y":14},{"x":5.3,"y":11},{"x":3.7,"y":15},{"x":3.7,"y":14},{"x":4.7,"y":14},{"x":4.7,"y":14},{"x":4.7,"y":9},{"x":4.7,"y":13},{"x":4.7,"y":9},{"x":4.7,"y":13},{"x":5.7,"y":13},{"x":4.7,"y":12},{"x":4.7,"y":9},{"x":4.7,"y":13},{"x":4.7,"y":13},{"x":4.7,"y":12},{"x":4.7,"y":9},{"x":5.7,"y":13},{"x":4,"y":13},{"x":4.6,"y":13},{"x":4.6,"y":13},{"x":5.4,"y":13},{"x":3,"y":17},{"x":3.7,"y":15},{"x":4.7,"y":9},{"x":4.7,"y":14},{"x":5.7,"y":13},{"x":6.1,"y":11},{"x":4.2,"y":12},{"x":4.4,"y":12},{"x":4,"y":13},{"x":4.6,"y":13},{"x":4,"y":14},{"x":5.6,"y":12},{"x":2.5,"y":20},{"x":2.5,"y":19},{"x":2.5,"y":20},{"x":2.5,"y":18},{"x":2.5,"y":20},{"x":2.5,"y":20},{"x":2.5,"y":19},{"x":2.5,"y":20},{"x":4,"y":16},{"x":4.7,"y":14},{"x":5.7,"y":13},{"x":2.7,"y":17},{"x":4,"y":15},{"x":4,"y":16}]}],"dataLabels":{"enabled":false},"xaxis":{"type":"numeric","min":1,"max":7,"tickAmount":6,"crosshairs":{"show":true,"stroke":{"dashArray":0}},"labels":{"style":{"colors":"#848484"},"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('.0f')(value) + '';}"}},"yaxis":{"min":5,"max":35,"tickAmount":6,"labels":{"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~r')(value) + '';}","style":{"colors":"#848484"}},"tooltip":{"enabled":true},"show":false},"grid":{"xaxis":{"lines":{"show":true}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":1.6,"max":7},"type":"scatter"},"evals":["ax_opts.xaxis.labels.formatter","ax_opts.yaxis.labels.formatter"],"jsHooks":[]}</script><div class="apexcharter-facet-row-label">4</div>
<div id="htmlwidget-f407727ac8fd9e7476cd" style="width:100%;height:300px;" class="apexcharter html-widget "></div>
<script type="application/json" data-for="htmlwidget-f407727ac8fd9e7476cd">{"x":{"ax_opts":{"chart":{"type":"scatter"},"series":[{"name":"cty","type":"scatter","data":[{"x":1.8,"y":18},{"x":1.8,"y":21},{"x":2.8,"y":16},{"x":2.8,"y":18},{"x":2.4,"y":19},{"x":3.1,"y":18},{"x":2.4,"y":18},{"x":3,"y":17},{"x":3.3,"y":16},{"x":3.3,"y":16},{"x":3.8,"y":15},{"x":3.8,"y":15},{"x":1.6,"y":28},{"x":1.6,"y":24},{"x":1.6,"y":25},{"x":1.6,"y":23},{"x":1.6,"y":24},{"x":2.4,"y":18},{"x":2.4,"y":18},{"x":2.5,"y":18},{"x":2.5,"y":18},{"x":2,"y":19},{"x":2,"y":19},{"x":2.4,"y":21},{"x":2.4,"y":19},{"x":3,"y":18},{"x":3,"y":19},{"x":3.1,"y":18},{"x":3.8,"y":16},{"x":3.8,"y":17},{"x":2.2,"y":21},{"x":2.2,"y":21},{"x":3,"y":18},{"x":3,"y":18},{"x":2.2,"y":21},{"x":2.2,"y":21},{"x":3,"y":18},{"x":3,"y":18},{"x":1.8,"y":24},{"x":1.8,"y":24},{"x":1.8,"y":26},{"x":2,"y":21},{"x":2,"y":19},{"x":2.8,"y":17},{"x":1.9,"y":33},{"x":2,"y":21},{"x":2,"y":19},{"x":2.8,"y":16},{"x":2.8,"y":17},{"x":1.9,"y":35},{"x":1.9,"y":29},{"x":2,"y":21},{"x":2,"y":19},{"x":1.8,"y":21},{"x":1.8,"y":18},{"x":2.8,"y":16},{"x":2.8,"y":18}]}],"dataLabels":{"enabled":false},"xaxis":{"type":"numeric","min":1,"max":7,"tickAmount":6,"crosshairs":{"show":true,"stroke":{"dashArray":0}},"labels":{"style":{"colors":"#848484"},"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('.0f')(value) + '';}"}},"yaxis":{"min":5,"max":35,"tickAmount":6,"labels":{"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~r')(value) + '';}","style":{"colors":"#848484"}},"tooltip":{"enabled":true},"show":true},"grid":{"xaxis":{"lines":{"show":true}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":1.6,"max":7},"type":"scatter"},"evals":["ax_opts.xaxis.labels.formatter","ax_opts.yaxis.labels.formatter"],"jsHooks":[]}</script><div id="htmlwidget-f17fce88a59ff422054d" style="width:100%;height:300px;" class="apexcharter html-widget "></div>
<script type="application/json" data-for="htmlwidget-f17fce88a59ff422054d">{"x":{"ax_opts":{"chart":{"type":"scatter"},"series":[{"name":"cty","type":"scatter","data":[{"x":2,"y":20},{"x":2,"y":21},{"x":3.1,"y":18},{"x":2.4,"y":22},{"x":3.5,"y":18},{"x":3.6,"y":17},{"x":3.3,"y":17},{"x":3.3,"y":17},{"x":3.3,"y":11},{"x":3.8,"y":16},{"x":4,"y":16},{"x":1.8,"y":26},{"x":1.8,"y":25},{"x":1.8,"y":24},{"x":2,"y":21},{"x":2.4,"y":21},{"x":2.4,"y":21},{"x":3.3,"y":19},{"x":2,"y":20},{"x":2,"y":20},{"x":2.7,"y":17},{"x":2.7,"y":16},{"x":2.7,"y":17},{"x":2.5,"y":23},{"x":2.5,"y":23},{"x":3.5,"y":19},{"x":3.5,"y":19},{"x":3.5,"y":19},{"x":3.8,"y":18},{"x":5.3,"y":16},{"x":2.4,"y":21},{"x":2.4,"y":21},{"x":3.5,"y":19},{"x":2.4,"y":21},{"x":2.4,"y":22},{"x":3.3,"y":18},{"x":1.8,"y":28},{"x":1.8,"y":26},{"x":2,"y":21},{"x":2,"y":22},{"x":2,"y":22},{"x":2,"y":21},{"x":2.5,"y":21},{"x":2.5,"y":21},{"x":2.5,"y":20},{"x":2.5,"y":20},{"x":2,"y":19},{"x":2,"y":21},{"x":3.6,"y":17}]}],"dataLabels":{"enabled":false},"xaxis":{"type":"numeric","min":1,"max":7,"tickAmount":6,"crosshairs":{"show":true,"stroke":{"dashArray":0}},"labels":{"style":{"colors":"#848484"},"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('.0f')(value) + '';}"}},"yaxis":{"min":5,"max":35,"tickAmount":6,"labels":{"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~r')(value) + '';}","style":{"colors":"#848484"}},"tooltip":{"enabled":true},"show":false},"grid":{"xaxis":{"lines":{"show":true}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":1.6,"max":7},"type":"scatter"},"evals":["ax_opts.xaxis.labels.formatter","ax_opts.yaxis.labels.formatter"],"jsHooks":[]}</script><div class="apexcharter-facet-row-label">f</div>
<div id="htmlwidget-a27b8dccf42b012999e0" style="width:100%;height:300px;" class="apexcharter html-widget "></div>
<script type="application/json" data-for="htmlwidget-a27b8dccf42b012999e0">{"x":{"ax_opts":{"chart":{"type":"scatter"},"series":[{"name":"cty","type":"scatter","data":[{"x":5.7,"y":13},{"x":5.7,"y":16},{"x":5.7,"y":15},{"x":4.6,"y":11},{"x":5.4,"y":11},{"x":3.8,"y":18},{"x":3.8,"y":18},{"x":4.6,"y":15},{"x":4.6,"y":15},{"x":5.4,"y":11},{"x":5.4,"y":11}]}],"dataLabels":{"enabled":false},"xaxis":{"type":"numeric","min":1,"max":7,"tickAmount":6,"crosshairs":{"show":true,"stroke":{"dashArray":0}},"labels":{"style":{"colors":"#848484"},"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('.0f')(value) + '';}"}},"yaxis":{"min":5,"max":35,"tickAmount":6,"labels":{"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~r')(value) + '';}","style":{"colors":"#848484"}},"tooltip":{"enabled":true},"show":true},"grid":{"xaxis":{"lines":{"show":true}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":1.6,"max":7},"type":"scatter"},"evals":["ax_opts.xaxis.labels.formatter","ax_opts.yaxis.labels.formatter"],"jsHooks":[]}</script><div id="htmlwidget-fa136f5693b7ae45e5a5" style="width:100%;height:300px;" class="apexcharter html-widget "></div>
<script type="application/json" data-for="htmlwidget-fa136f5693b7ae45e5a5">{"x":{"ax_opts":{"chart":{"type":"scatter"},"series":[{"name":"cty","type":"scatter","data":[{"x":5.3,"y":14},{"x":5.3,"y":11},{"x":5.3,"y":14},{"x":6,"y":12},{"x":6.2,"y":16},{"x":6.2,"y":15},{"x":7,"y":15},{"x":5.4,"y":12},{"x":4,"y":17},{"x":4,"y":16},{"x":4.6,"y":15},{"x":4.6,"y":15},{"x":5.4,"y":14},{"x":5.4,"y":12}]}],"dataLabels":{"enabled":false},"xaxis":{"type":"numeric","min":1,"max":7,"tickAmount":6,"crosshairs":{"show":true,"stroke":{"dashArray":0}},"labels":{"style":{"colors":"#848484"},"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('.0f')(value) + '';}"}},"yaxis":{"min":5,"max":35,"tickAmount":6,"labels":{"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~r')(value) + '';}","style":{"colors":"#848484"}},"tooltip":{"enabled":true},"show":false},"grid":{"xaxis":{"lines":{"show":true}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":1.6,"max":7},"type":"scatter"},"evals":["ax_opts.xaxis.labels.formatter","ax_opts.yaxis.labels.formatter"],"jsHooks":[]}</script><div class="apexcharter-facet-row-label">r</div>
<div class="apexcharter-facet-xaxis-title" style="font-weight: 400; font-size: 14px; grid-area: 5 / 1 / 5 / 4 ;">engine displacement, in litres</div>
<div class="apexcharter-facet-yaxis-title apexcharter-facet-rotate180" style="font-weight: 400; font-size: 14px; grid-area: 1 / 1 / 5 / 2 ;">city miles per gallon</div>
</div>
</div>
</div>
<div class="section level2">
<h2 id="grid">Grid<a class="anchor" aria-label="anchor" href="#grid"></a>
</h2>
<p>You can construct a grid of (unrelated) charts with
<code><a href="../../reference/apex_grid.html">apex_grid()</a></code>, construct your charts independently then
assemble them in the grid:</p>
<div class="sourceCode" id="cb5"><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="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="co"># Construct 3 charts</span></span>
<span><span class="va">a1</span> <span class="op">&lt;-</span> <span class="fu"><a href="../../reference/apex.html">apex</a></span><span class="op">(</span><span class="va">mpg</span>, <span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span><span class="va">manufacturer</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"bar"</span><span class="op">)</span></span>
<span><span class="va">a2</span> <span class="op">&lt;-</span> <span class="fu"><a href="../../reference/apex.html">apex</a></span><span class="op">(</span><span class="va">mpg</span>, <span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span><span class="va">trans</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"column"</span><span class="op">)</span></span>
<span><span class="va">a3</span> <span class="op">&lt;-</span> <span class="fu"><a href="../../reference/apex.html">apex</a></span><span class="op">(</span><span class="va">mpg</span>, <span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span><span class="va">drv</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"pie"</span><span class="op">)</span></span>
<span></span>
<span><span class="co"># Assemble them in a grid</span></span>
<span><span class="fu"><a href="../../reference/apex_grid.html">apex_grid</a></span><span class="op">(</span></span>
<span> <span class="va">a1</span>, <span class="va">a2</span>, <span class="va">a3</span>, </span>
<span> grid_area <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span><span class="st">"1 / 1 / 3 / 2"</span>, <span class="st">"1 / 2 / 2 / 4"</span>, <span class="st">"2 / 2 / 3 / 4"</span><span class="op">)</span>,</span>
<span> ncol <span class="op">=</span> <span class="fl">3</span>, </span>
<span> nrow <span class="op">=</span> <span class="fl">2</span>,</span>
<span> height <span class="op">=</span> <span class="st">"600px"</span></span>
<span><span class="op">)</span></span></code></pre></div>
<div class="apexcharter-grid-container" style="height:600px; display: grid; grid-template-columns: repeat(3, 1fr) ; grid-template-rows: repeat(2, 1fr) ; grid-column-gap: 0px; grid-row-gap: 10px;">
<div style="grid-area:1 / 1 / 3 / 2">
<div class="apexcharter html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-3431f99102692534537e" style="width:100%;height:100%;"></div>
<script type="application/json" data-for="htmlwidget-3431f99102692534537e">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":[],"data":[{"x":"audi","y":18},{"x":"chevrolet","y":19},{"x":"dodge","y":37},{"x":"ford","y":25},{"x":"honda","y":9},{"x":"hyundai","y":14},{"x":"jeep","y":8},{"x":"land rover","y":4},{"x":"lincoln","y":3},{"x":"mercury","y":4},{"x":"nissan","y":13},{"x":"pontiac","y":5},{"x":"subaru","y":14},{"x":"toyota","y":34},{"x":"volkswagen","y":27}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":true,"isDumbbell":false}},"tooltip":{"shared":true,"intersect":false,"followCursor":true},"grid":{"yaxis":{"lines":{"show":false}},"xaxis":{"lines":{"show":true}}},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"audi","max":"volkswagen"},"type":"bar"},"evals":[],"jsHooks":[]}</script>
</div>
<div style="grid-area:1 / 2 / 2 / 4">
<div class="apexcharter html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-77d052581484c086f6a6" style="width:100%;height:100%;"></div>
<script type="application/json" data-for="htmlwidget-77d052581484c086f6a6">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":[],"type":"bar","data":[{"x":"auto(av)","y":5},{"x":"auto(l3)","y":2},{"x":"auto(l4)","y":83},{"x":"auto(l5)","y":39},{"x":"auto(l6)","y":6},{"x":"auto(s4)","y":3},{"x":"auto(s5)","y":3},{"x":"auto(s6)","y":16},{"x":"manual(m5)","y":58},{"x":"manual(m6)","y":19}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false,"isDumbbell":false}},"tooltip":{"shared":true,"intersect":false,"followCursor":true},"grid":{"yaxis":{"lines":{"show":true}},"xaxis":{"lines":{"show":false}}},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"auto(av)","max":"manual(m6)"},"type":"column"},"evals":[],"jsHooks":[]}</script>
</div>
<div style="grid-area:2 / 2 / 3 / 4">
<div class="apexcharter html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-84bfffa1897d3d713613" style="width:100%;height:100%;"></div>
<script type="application/json" data-for="htmlwidget-84bfffa1897d3d713613">{"x":{"ax_opts":{"chart":{"type":"pie"},"series":[103,106,25],"labels":["4","f","r"],"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"4","max":"r"},"type":"pie"},"evals":[],"jsHooks":[]}</script>
</div>
</div>
<p><code>grid_area</code> argument allow to specify space occupied by
each chart, you can generate interactively your grid template <a href="https://cssgrid-generator.netlify.app/" class="external-link">here</a>.</p>
</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>