apexcharter/docs/articles/facets.html

357 lines
111 KiB
HTML
Raw Normal View History

2020-12-15 11:14:28 +01:00
<!DOCTYPE html>
<!-- Generated by pkgdown: do not edit by hand --><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facets: grid of charts • apexcharter</title>
<!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><!-- Bootstrap --><link href="../css/theme.css" rel="stylesheet">
<style>
#pkgdown-sidebar {
z-index: 100;
background: #FFF;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4=" crossorigin="anonymous"></script><!-- Font --><link href="../css/montserrat.css" rel="stylesheet">
<style>body {font-family: 'Montserrat', sans-serif;}</style>
<!-- bootstrap-toc --><link rel="stylesheet" href="../bootstrap-toc.css">
<script src="../bootstrap-toc.js"></script><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous">
<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">
<!-- 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><!-- 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><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet">
<script src="../pkgdown.js"></script><!-- Particles --><script src="../js/particles.min.js"></script><style>
html,
body {
margin: 0;
padding: 0;
}
.contents {
opacity: 1;
background-color: #FFF;
z-index: 1;
}
#sidebar {
opacity: 1;
background-color: #FFF;
z-index: 1;
}
footer {
z-index: 1;
}
#particles {
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
.background {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 0;
}
</style>
<!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css" integrity="sha256-nAmazAk6vS34Xqo0BSrTb+abbtFlgsFK7NKSi6o7Y78=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/v4-shims.min.css" integrity="sha256-6qHlizsOWFskGlwVOKuns+D1nB6ssZrHQrNj1wGplHc=" crossorigin="anonymous">
<!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" integrity="sha256-FiZwavyI2V6+EXO1U+xzLG3IKldpiTFf3153ea9zikQ=" crossorigin="anonymous"></script><!-- headroom.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.4/headroom.min.js" integrity="sha256-DJFC1kqIhelURkuza0AvYal5RxMtpzLjFhsnVIeuk+U=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.4/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet">
<script src="../pkgdown.js"></script><meta property="og:title" content="Facets: grid of charts">
<meta property="og:description" content="apexcharter">
<meta name="twitter:card" content="summary">
<!-- 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 id="body">
<div class="container template-article">
<header><div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;"><a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8.900</span>
</span>
<span class="navbar-brand hidden-md hidden-lg">
<a class="navbar-link" href="../index.html">apexcharter</a>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.8.900</span>
</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="../index.html">
<span class="fas fa fas fa-home fa-lg"></span>
</a>
</li>
<li>
<a href="../articles/apexcharter.html">Get started</a>
</li>
<li>
<a href="../reference/index.html">Reference</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Articles
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="../articles/articles/advanced-configuration.html">Advanced configuration examples</a>
</li>
<li>
<a href="../articles/chart-options.html">Chart options</a>
</li>
<li>
<a href="../articles/facets.html">Facets: grid of charts</a>
</li>
<li>
<a href="../articles/shiny-integration.html">Shiny integration</a>
</li>
<li>
<a href="../articles/spark-box.html">Spark boxes</a>
</li>
<li>
<a href="../articles/sync-charts.html">Syncing charts</a>
</li>
</ul>
</li>
<li>
<a href="../news/index.html">Changelog</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="https://github.com/dreamRs/apexcharter/">
<span class="fab fa fab fa-github fa-lg"></span>
</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</div>
<!--/.navbar -->
</header><script src="facets_files/accessible-code-block-0.0.1/empty-anchor.js"></script><link href="facets_files/anchor-sections-1.0/anchor-sections.css" rel="stylesheet">
2021-01-06 10:49:04 +01:00
<script src="facets_files/anchor-sections-1.0/anchor-sections.js"></script><script src="facets_files/htmlwidgets-1.5.2/htmlwidgets.js"></script><script src="facets_files/apexcharts-3.23.1/apexcharts.min.js"></script><link href="facets_files/apexcharter-css-0.1.0/apexcharter.css" rel="stylesheet">
2020-12-15 11:14:28 +01:00
<script src="facets_files/d3-format-1.4.2/d3-format.min.js"></script><script src="facets_files/apexcharter-binding-0.1.8.900/apexcharter.js"></script><div class="row">
<div class="col-md-9 contents">
<div class="page-header toc-ignore">
<h1>Facets: grid of charts</h1>
<small class="dont-index">Source: <a href="https://github.com/dreamRs/apexcharter/blob/master/vignettes/facets.Rmd"><code>vignettes/facets.Rmd</code></a></small>
<div class="hidden name"><code>facets.Rmd</code></div>
</div>
<div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/dreamRs/apexcharter">apexcharter</a></span><span class="op">)</span></code></pre></div>
<p><a href="https://www.tidyverse.org/lifecycle/#experimental"><img src="https://img.shields.io/badge/lifecycle-experimental-orange.svg" alt="Lifecycle: experimental"></a></p>
<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>
2021-01-08 15:51:12 +01:00
<li>if legend is needed, it will appear on each charts</li>
2020-12-15 11:14:28 +01:00
</ul>
<div id="facet-wrap" class="section level2">
<h2 class="hasAnchor">
<a href="#facet-wrap" class="anchor"></a>Facet wrap</h2>
2021-01-06 10:49:04 +01:00
<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>
2020-12-15 11:14:28 +01:00
<div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">
2021-01-08 15:51:12 +01:00
<code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/dreamRs/apexcharter">apexcharter</a></span><span class="op">)</span>
<span class="fu"><a href="https://rdrr.io/r/utils/data.html">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>
2021-01-06 10:49:04 +01:00
2020-12-15 11:14:28 +01:00
<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">%&gt;%</span>
2021-01-08 15:51:12 +01:00
<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">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">%&gt;%</span>
<span class="fu"><a href="../reference/ax_labs.html">ax_labs</a></span><span class="op">(</span>
title <span class="op">=</span> <span class="st">"Facet wrap example"</span>,
subtitle <span class="op">=</span> <span class="st">"mpg data from ggplot2"</span>,
x <span class="op">=</span> <span class="st">"engine displacement, in litres"</span>,
y <span class="op">=</span> <span class="st">"city miles per gallon"</span>
<span class="op">)</span> <span class="op">%&gt;%</span>
2021-01-06 10:49:04 +01:00
<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></code></pre></div>
2021-01-08 15:51:12 +01:00
<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-7f392a3bd203222581eb" style="width:100%;height:300px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-7f392a3bd203222581eb">{"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 = d3.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 = d3.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-06cc321785368d0b8f7d" style="width:100%;height:300px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-06cc321785368d0b8f7d">{"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 = d3.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 = d3.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-50cc82519e7d3bea60b8" style="width:100%;height:300px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-50cc82519e7d3bea60b8">{"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 = d3.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 = d3.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>
2020-12-15 11:14:28 +01:00
</div>
<p>Synchronized line charts with free y-axis :</p>
<div class="sourceCode" id="cb3"><pre class="downlit sourceCode r">
2021-01-08 15:51:12 +01:00
<code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/dreamRs/apexcharter">apexcharter</a></span><span class="op">)</span>
<span class="fu"><a href="https://rdrr.io/r/utils/data.html">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>
2020-12-15 11:14:28 +01:00
2021-01-06 10:49:04 +01:00
<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">%&gt;%</span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span>
decimalsInFloat <span class="op">=</span> <span class="fl">0</span>,
labels <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">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">"~s"</span><span class="op">)</span>,
minWidth <span class="op">=</span> <span class="fl">40</span>
<span class="op">)</span>
<span class="op">)</span> <span class="op">%&gt;%</span>
2020-12-15 11:14:28 +01:00
<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">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">%&gt;%</span>
2021-01-06 10:49:04 +01:00
<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></code></pre></div>
2021-01-08 15:51:12 +01:00
<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-f695f79f01017a132224" style="width:100%;height:300px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-f695f79f01017a132224">{"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-e9a6caaab58f3d5a5d7a">{"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-e979a66b255ee14b2f85">{"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.7],[-26438400000,10.2],[-23760000000,9.7],[-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.3],[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.7],[304992000000,9.4],[307584000000,9.7],[310262400000,9.7],[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.2],[431222400000,9.6],[433814400000,9.7],[436492800000,10.3],[439084800000,10.1],[441763200000,10],[444441600000,11.7],[446947200000,1
<script type="application/json" data-for="htmlwidget-af6763d06bc5afc2f8a5">{"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.7],[168134400000,9.4],[170812800000,8.8],[173404800000,8.6],[176083200000,9.2],[178761600000,9.2],[181353600000,8.6],[184032000000,9.5],[186624000000,9],[189302400000,9],[191980800000,8.2],[194486400000,8.7],[197164800000,8.2],[199756800000,8.3],[202435200000,7.8],[205027200000,7.7],[207705600000,7.9],[210384000000,7.8],[212976000000,7.7],[215654400000,8.4],[218246400000,8],[220924800000,7.5],[223603200000,7.2],[226022400000,7.2],[228700800000,7.3],[231292800000,7.9],[233971200000,6.2],[236563200000,7.1],[239241600000,7],[241920000000,6.7],[244512000000,6.9],[247190400000,7],[249782400000,6.8],[252460800000,6.5],[255139200000,6.7],[257558400000,6.2],[260236800000,6.1],[262828800000,5.7],[265507200000,6],[268099200000,5.8],[270777600000,5.8],[273456000000,5.6],[276048000000,5.9],[278726400000,5.5],[281318400000,5.6],[283996800000,5.9],[286675200000,5.9],[289094400000,5.9],[291772800000,5.4],[294364800000,5.6],[297043200000,5.6],[299635200000,5.9],[302313600000,4.8],[304992000000,5.5],[307584000000,5.5],[310262400000,5.3],[312854400000,5.7],[315532800000,5.3],[318211200000,5.8],[320716800000,6],[323395200000,5.8],[325987200000,5.7],[328665600000,6.4],[331257600000,7],[333936000000,7.5],[336614400000,7.7],[339206400000,7.5],[341884800000,7.7],[344476800000,7.5],[347155200000,7.4],[349833600000,7.1],[352252800000,7.1],[354931200000,7.4],[357523200000,6.9],[360201600000,6.6],[362793600000,7.1],[365472000000,7.2],[368150400000,6.8],[370742400000,6.8],[373420800000,6.9],[376012800000,6.9],[378691200000,7.1],[381369600000,7.5],[383788800000,7.7],[386467200000,8.1],[389059200000,8.5],[391737600000,9.5],[394329600000,8.5],[397008000000,8.7],[399686400000,9.5],[402278400000,9.7],[404956800000,10],[407548800000,10.2],[410227200000,11.1],[412905600000,9.8],[415324800000,10.4],[418003200000,10.9],[420595200000,12.3],[423273600000,11.3],[425865600000,10.1],[428544000000,9.3],[431222400000,9.3],[433814400000,9.4],[436492800000,9.3],[439084800000,8.7],[441763200000,9.1],[444441600000,8.3],[446947200000,8.3],[449625600000,8.2],[452217600000,9.1],[454896000000,7.5],[457488000000,7.5],[460166400000,7.3],[462844800000,7.6],[465436800000,7.2],[468115200000,7.2],[470707200000,7.3],[473
<script type="application/json" data-for="htmlwidget-1280b80f4f578dd0fa55">{"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
2021-01-06 10:49:04 +01:00
</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 id="facet-grid" class="section level2">
<h2 class="hasAnchor">
<a href="#facet-grid" class="anchor"></a>Facet grid</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">
2021-01-08 15:51:12 +01:00
<code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/dreamRs/apexcharter">apexcharter</a></span><span class="op">)</span>
<span class="fu"><a href="https://rdrr.io/r/utils/data.html">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>
2021-01-06 10:49:04 +01:00
<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">%&gt;%</span>
2021-01-08 15:51:12 +01:00
<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">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">%&gt;%</span>
<span class="fu"><a href="../reference/ax_labs.html">ax_labs</a></span><span class="op">(</span>
title <span class="op">=</span> <span class="st">"Facet grid example"</span>,
subtitle <span class="op">=</span> <span class="st">"mpg data from ggplot2"</span>,
x <span class="op">=</span> <span class="st">"engine displacement, in litres"</span>,
y <span class="op">=</span> <span class="st">"city miles per gallon"</span>
<span class="op">)</span> <span class="op">%&gt;%</span>
2021-01-06 10:49:04 +01:00
<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></code></pre></div>
2021-01-08 15:51:12 +01:00
<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;">
2021-01-06 10:49:04 +01:00
<div class="apexcharter-facet-col-label">1999</div>
<div class="apexcharter-facet-col-label">2008</div>
<div></div>
2021-01-08 15:51:12 +01:00
<div id="htmlwidget-ec84202d891c00ba3004" style="width:100%;height:300px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-ec84202d891c00ba3004">{"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 = d3.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 = d3.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-920fbe1edce3bf26ef52" style="width:100%;height:300px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-920fbe1edce3bf26ef52">{"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 = d3.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 = d3.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-89d9e73332dd2ff00fb0" style="width:100%;height:300px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-89d9e73332dd2ff00fb0">{"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 = d3.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 = d3.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-af1dcd20695b61c36b80" style="width:100%;height:300px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-af1dcd20695b61c36b80">{"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 = d3.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 = d3.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-7096d5dd354190187a9d" style="width:100%;height:300px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-7096d5dd354190187a9d">{"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 = d3.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 = d3.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-ccbd56d7bc2eaf8a2614" style="width:100%;height:300px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-ccbd56d7bc2eaf8a2614">{"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 = d3.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 = d3.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>
2021-01-06 10:49:04 +01:00
</div>
</div>
<div id="grid" class="section level2">
<h2 class="hasAnchor">
<a href="#grid" class="anchor"></a>Grid</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">
2021-01-08 15:51:12 +01:00
<code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/dreamRs/apexcharter">apexcharter</a></span><span class="op">)</span>
<span class="fu"><a href="https://rdrr.io/r/utils/data.html">data</a></span><span class="op">(</span><span class="st">"mpg"</span>, package <span class="op">=</span> <span class="st">"ggplot2"</span><span class="op">)</span>
<span class="co"># Construct 3 charts</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>
2021-01-06 10:49:04 +01:00
<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 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>
2021-01-08 15:51:12 +01:00
<span class="co"># Assemble them in a grid</span>
2021-01-06 10:49:04 +01:00
<span class="fu"><a href="../reference/apex_grid.html">apex_grid</a></span><span class="op">(</span>
<span class="va">a1</span>, <span class="va">a2</span>, <span class="va">a3</span>,
grid_area <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">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>,
ncol <span class="op">=</span> <span class="fl">3</span>,
nrow <span class="op">=</span> <span class="fl">2</span>,
height <span class="op">=</span> <span class="st">"600px"</span>
<span class="op">)</span></code></pre></div>
2021-01-08 15:51:12 +01:00
<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;">
2021-01-06 10:49:04 +01:00
<div style="grid-area:1 / 1 / 3 / 2">
2021-01-08 15:51:12 +01:00
<div id="htmlwidget-e7c4dcb95180c26a1d1f" style="width:100%;height:100%;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-e7c4dcb95180c26a1d1f">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"data":[{"x":"audi","y":18},{"x":"chevrolet","y":19},{"x":"dodge","y":37},{"x":"ford","y":25},{"x":"honda","y":9},{"x":"hyundai","y":14},{"x":"jeep","y":8},{"x":"land rover","y":4},{"x":"lincoln","y":3},{"x":"mercury","y":4},{"x":"nissan","y":13},{"x":"pontiac","y":5},{"x":"subaru","y":14},{"x":"toyota","y":34},{"x":"volkswagen","y":27}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":true}},"tooltip":{"shared":true,"followCursor":true},"grid":{"yaxis":{"lines":{"show":false}},"xaxis":{"lines":{"show":true}}},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"audi","max":"volkswagen"},"type":"bar"},"evals":[],"jsHooks":[]}</script>
2021-01-06 10:49:04 +01:00
</div>
<div style="grid-area:1 / 2 / 2 / 4">
2021-01-08 15:51:12 +01:00
<div id="htmlwidget-4c9b84e8a2dab1f98f74" style="width:100%;height:100%;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-4c9b84e8a2dab1f98f74">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"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}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"auto(av)","max":"manual(m6)"},"type":"column"},"evals":[],"jsHooks":[]}</script>
2021-01-06 10:49:04 +01:00
</div>
<div style="grid-area:2 / 2 / 3 / 4">
2021-01-08 15:51:12 +01:00
<div id="htmlwidget-905c61c2bb60671771c1" style="width:100%;height:100%;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-905c61c2bb60671771c1">{"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>
2021-01-06 10:49:04 +01:00
</div>
2020-12-15 11:14:28 +01:00
</div>
2021-01-06 10:49:04 +01:00
<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/">here</a>.</p>
2020-12-15 11:14:28 +01:00
</div>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="pkgdown-sidebar">
<div id="tocnav">
<h2 class="hasAnchor">
<a href="#tocnav" class="anchor"></a>Contents</h2>
<ul class="nav nav-pills nav-stacked">
<li><a href="#facet-wrap">Facet wrap</a></li>
2021-01-06 10:49:04 +01:00
<li><a href="#facet-grid">Facet grid</a></li>
<li><a href="#grid">Grid</a></li>
2020-12-15 11:14:28 +01:00
</ul>
</div>
</div>
</div>
<footer><div class="copyright">
<p>Developed by <a href="https://twitter.com/_pvictorr"><img src="https://pbs.twimg.com/profile_images/844237339404722177/E1U61aM8_normal.jpg"> Victor Perrier</a>, <a href="https://twitter.com/_mfaan"><img src="https://pbs.twimg.com/profile_images/912313931326218240/o1-wvA18_normal.jpg"> Fanny Meyer</a>.</p>
</div>
<div class="pkgdown">
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>
</div>
</footer>
</div>
<div id="particles"></div>
<script>
window.onload = function() {
var config = {"particles":{"number":{"value":90,"density":{"enable":true,"value_area":1200}},"color":{"value":"#112446"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.8,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#112446","opacity":0.6,"width":1},"move":{"enable":true,"speed":5,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true}},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}},"retina_detect":true} ;
particlesJS("particles", config);
};
</script>
</body>
</html>