apexcharter/articles/extra/sync-charts.html

212 lines
50 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>Synchronize charts with each other • apexcharter</title>
<script src="../../deps/jquery-3.6.0/jquery-3.6.0.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="../../deps/bootstrap-5.1.3/bootstrap.min.css" rel="stylesheet">
<script src="../../deps/bootstrap-5.1.3/bootstrap.bundle.min.js"></script><link href="../../deps/Poppins-0.4.4/font.css" rel="stylesheet">
<!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous">
<!-- bootstrap-toc --><script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.js"></script><!-- headroom.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script><!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script><!-- search --><script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/6.4.6/fuse.js" integrity="sha512-zv6Ywkjyktsohkbp9bb45V6tEMoWhzFzXis+LrMehmJZZSys19Yxf1dopHx7WzIKxr5tK2dVcYmaCk2uqdjF4A==" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/autocomplete.js/0.38.0/autocomplete.jquery.min.js" integrity="sha512-GU9ayf+66Xx2TmpxqJpliWbT5PiGYxpaG8rfnBEk1LL8l1KGkRShhngwdXK1UgqhAzWpZHSiYPc09/NwDQIGyg==" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js" integrity="sha512-5CYOlHXGh6QpOFA/TeTylKLWfB3ftPsde7AnmhuitiTX4K5SqCLBeKro6sPS8ilsz1Q4NRx3v8Ko2IBiszzdww==" crossorigin="anonymous"></script><!-- pkgdown --><script src="../../pkgdown.js"></script><meta property="og:title" content="Synchronize charts with each other">
<meta property="og:description" content="apexcharter">
<!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<a href="#main" class="visually-hidden-focusable">Skip to contents</a>
<nav class="navbar fixed-top navbar-dark navbar-expand-lg bg-primary"><div class="container">
<a class="navbar-brand me-2" href="../../index.html">apexcharter</a>
<small class="nav-text text-muted me-auto" data-bs-toggle="tooltip" data-bs-placement="bottom" title="">0.3.1.9200</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="sync-charts_files/htmlwidgets-1.5.4/htmlwidgets.js"></script><script src="sync-charts_files/apexcharter-binding-0.3.1.9200/apexcharter.js"></script><div class="row">
<main id="main" class="col-md-9"><div class="page-header">
<img src="" class="logo" alt=""><h1>Synchronize charts with each other</h1>
<small class="dont-index">Source: <a href="https://github.com/dreamRs/apexcharter/blob/HEAD/vignettes/extra/sync-charts.Rmd" class="external-link"><code>vignettes/extra/sync-charts.Rmd</code></a></small>
<div class="d-none name"><code>sync-charts.Rmd</code></div>
</div>
<div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/dreamRs/apexcharter" class="external-link">apexcharter</a></span><span class="op">)</span></span>
<span><span class="fu"><a href="https://rdrr.io/r/utils/data.html" class="external-link">data</a></span><span class="op">(</span><span class="st">"economics"</span>, package <span class="op">=</span> <span class="st">"ggplot2"</span><span class="op">)</span></span></code></pre></div>
<div class="section level2">
<h2 id="synchronize-charts">Synchronize charts<a class="anchor" aria-label="anchor" href="#synchronize-charts"></a>
</h2>
<p>With <a href="https://apexcharts.com" class="external-link">Apexcharts</a> you can sync
(tooltip, zoom) several charts together by providing a common id in
<code>synchronize</code> argument. This works in Shiny and Markdown.
Here an example where we create two charts, tooltip will be displayed on
both charts when you hover one, and if you zoom on one, the other one
will be synced :</p>
<div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="fu"><a href="../../reference/apex.html">apex</a></span><span class="op">(</span></span>
<span> data <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/utils/head.html" class="external-link">tail</a></span><span class="op">(</span><span class="va">economics</span>, <span class="fl">150</span><span class="op">)</span>, </span>
<span> mapping <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">pce</span><span class="op">)</span>,</span>
<span> type <span class="op">=</span> <span class="st">"line"</span>, </span>
<span> synchronize <span class="op">=</span> <span class="st">"economics"</span></span>
<span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span></span>
<span> 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>
<span></span>
<span><span class="fu"><a href="../../reference/apex.html">apex</a></span><span class="op">(</span></span>
<span> data <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/utils/head.html" class="external-link">tail</a></span><span class="op">(</span><span class="va">economics</span>, <span class="fl">150</span><span class="op">)</span>, </span>
<span> mapping <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">psavert</span><span class="op">)</span>,</span>
<span> type <span class="op">=</span> <span class="st">"line"</span>, </span>
<span> synchronize <span class="op">=</span> <span class="st">"economics"</span></span>
<span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span></span>
<span> 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></code></pre></div>
<div id="htmlwidget-c57bfa62dca6202beb6e" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-c57bfa62dca6202beb6e">{"x":{"ax_opts":{"chart":{"type":"line","group":"economics"},"series":[{"name":"pce","type":"line","data":[[1036108800000,7459.7],[1038700800000,7512.8],[1041379200000,7533.1],[1044057600000,7535.9],[1046476800000,7598.4],[1049155200000,7621],[1051747200000,7628.1],[1054425600000,7678.6],[1057017600000,7738.2],[1059696000000,7834.5],[1062374400000,7835],[1064966400000,7845.7],[1067644800000,7899.6],[1070236800000,7929.2],[1072915200000,7987.4],[1075593600000,8019.8],[1078099200000,8076],[1080777600000,8088.6],[1083369600000,8163.2],[1086048000000,8147.2],[1088640000000,8218.9],[1091318400000,8253.1],[1093996800000,8321.1],[1096588800000,8374.6],[1099267200000,8420.6],[1101859200000,8481.5],[1104537600000,8470.2],[1107216000000,8529.2],[1109635200000,8569.5],[1112313600000,8645.6],[1114905600000,8643.9],[1117584000000,8724.8],[1120176000000,8829.5],[1122854400000,8832.4],[1125532800000,8885.8],[1128124800000,8926.6],[1130803200000,8938.5],[1133395200000,8969.6],[1136073600000,9059.8],[1138752000000,9090.1],[1141171200000,9122.1],[1143849600000,9174.8],[1146441600000,9215.1],[1149120000000,9240.8],[1151712000000,9322.6],[1154390400000,9321.8],[1157068800000,9354.7],[1159660800000,9373.2],[1162339200000,9380.2],[1164931200000,9469],[1167609600000,9516.3],[1170288000000,9546.8],[1172707200000,9585.1],[1175385600000,9615.7],[1177977600000,9651.3],[1180656000000,9667.3],[1183248000000,9709.6],[1185926400000,9753.9],[1188604800000,9797.9],[1191196800000,9827],[1193875200000,9897.8],[1196467200000,9908.4],[1199145600000,9930],[1201824000000,9913.4],[1204329600000,9959.4],[1207008000000,9996.8],[1209600000000,10053.8],[1212278400000,10107.9],[1214870400000,10104.7],[1217548800000,10094.7],[1220227200000,10043.5],[1222819200000,9960.3],[1225497600000,9820.8],[1228089600000,9730.7],[1230768000000,9783.8],[1233446400000,9766],[1235865600000,9718.5],[1238544000000,9724.8],[1241136000000,9748.9],[1243814400000,9806.9],[1246406400000,9841.7],[1249084800000,9961],[1251763200000,9883.4],[1254355200000,9931.9],[1257033600000,9940.5],[1259625600000,9998.9],[1262304000000,10001.8],[1264982400000,10030.6],[1267401600000,10089.1],[1270080000000,10112.9],[1272672000000,10131],[1275350400000,10151.4],[1277942400000,10184.7],[1280620800000,10228.2],[1283299200000,10249],[1285891200000,10304.7],[1288569600000,10354.7],[1291161600000,10392.1],[1293840000000,10435.5],[1296518400000,10470.1],[1298937600000,10550.5],[1301616000000,10587.6],[1304208000000,10612],[1306886400000,10636.8],[1309478400000,10677.5],[1312156800000,10700.6],[1314835200000,10738.1],[1317427200000,10753.1],[1320105600000,10759.5],[1322697600000,10772.2],[1325376000000,10862.1],[1328054400000,10953.5],[1330560000000,10951.8],[1333238400000,10979.7],[1335830400000,10968.6],[1338508800000,10946.3],[1341100800000,10977.2],[1343779200000,11004.1],[1346457600000,11061.5],[1349049600000,11099.8],[1351728000000,11136.8],[1354320000000,11140.5],[1356998400000,11202.8],[1359676800000,11239.6],[1362096000000,11227.1],[1364774400000,11205.4],[1367366400000,11244.6],[1370044800000,11268.8],[1372636800000,11296.7],[1375315200000,11329.2],[1377993600000,11366.9],[1380585600000,11419.8],[1383264000000,11487.6],[1385856000000,11517.9],[1388534400000,11512.5],[1391212800000,11566.2],[1393632000000,11643],[1396310400000,11702.6],[1398902400000,11748.4],[1401580800000,11817],[1404172800000,11860.5],[1406851200000,11944.3],[1409529600000,11957.4],[1412121600000,12023],[1414800000000,12051.4],[1417392000000,12062],[1420070400000,12046],[1422748800000,12082.4],[1425168000000,12158.3],[1427846400000,12193.8]]}],"yaxis":{"labels":{"minWidth":40,"style":{"colors":"#848484"},"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~s')(value) + '';}"},"decimalsInFloat":0},"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"xaxis":{"type":"datetime","labels":{"style":{"colors
<script type="application/json" data-for="htmlwidget-50bb2dfe9ccf427eb6e6">{"x":{"ax_opts":{"chart":{"type":"line","group":"economics"},"series":[{"name":"psavert","type":"line","data":[[1036108800000,5.7],[1038700800000,5.5],[1041379200000,5.5],[1044057600000,5.6],[1046476800000,5.3],[1049155200000,5.3],[1051747200000,5.8],[1054425600000,5.6],[1057017600000,6.3],[1059696000000,6],[1062374400000,5.2],[1064966400000,5.3],[1067644800000,5.4],[1070236800000,5.4],[1072915200000,5],[1075593600000,5],[1078099200000,4.9],[1080777600000,5.3],[1083369600000,5.3],[1086048000000,5.8],[1088640000000,5.3],[1091318400000,5.2],[1093996800000,4.6],[1096588800000,4.5],[1099267200000,4.1],[1101859200000,6.9],[1104537600000,3.7],[1107216000000,3.4],[1109635200000,3.6],[1112313600000,3.1],[1114905600000,3.5],[1117584000000,2.9],[1120176000000,2.2],[1122854400000,2.7],[1125532800000,2.7],[1128124800000,3.1],[1130803200000,3.5],[1133395200000,3.7],[1136073600000,4.2],[1138752000000,4.2],[1141171200000,4.2],[1143849600000,4],[1146441600000,3.8],[1149120000000,4],[1151712000000,3.4],[1154390400000,3.6],[1157068800000,3.6],[1159660800000,3.6],[1162339200000,3.9],[1164931200000,3.7],[1167609600000,3.7],[1170288000000,4.1],[1172707200000,4.4],[1175385600000,4.2],[1177977600000,4],[1180656000000,3.8],[1183248000000,3.7],[1185926400000,3.4],[1188604800000,3.5],[1191196800000,3.4],[1193875200000,3.1],[1196467200000,3.6],[1199145600000,3.7],[1201824000000,4.1],[1204329600000,4],[1207008000000,3.4],[1209600000000,7.8],[1212278400000,5.5],[1214870400000,4.4],[1217548800000,3.8],[1220227200000,4.7],[1222819200000,5.5],[1225497600000,6.4],[1228089600000,6.4],[1230768000000,6.2],[1233446400000,5.5],[1235865600000,5.9],[1238544000000,6.8],[1241136000000,8.2],[1243814400000,6.7],[1246406400000,6],[1249084800000,4.9],[1251763200000,5.9],[1254355200000,5.4],[1257033600000,5.9],[1259625600000,5.9],[1262304000000,6.1],[1264982400000,5.8],[1267401600000,5.7],[1270080000000,6.4],[1272672000000,7],[1275350400000,6.9],[1277942400000,6.8],[1280620800000,6.9],[1283299200000,6.7],[1285891200000,6.6],[1288569600000,6.6],[1291161600000,7.1],[1293840000000,7.4],[1296518400000,7.6],[1298937600000,7],[1301616000000,6.9],[1304208000000,6.9],[1306886400000,7.2],[1309478400000,7.3],[1312156800000,7.2],[1314835200000,6.8],[1317427200000,6.8],[1320105600000,7],[1322697600000,7.8],[1325376000000,8],[1328054400000,8],[1330560000000,8.5],[1333238400000,8.7],[1335830400000,8.8],[1338508800000,9.1],[1341100800000,8.2],[1343779200000,8],[1346457600000,8.2],[1349049600000,8.8],[1351728000000,9.7],[1354320000000,12],[1356998400000,6.3],[1359676800000,5.8],[1362096000000,5.9],[1364774400000,6.4],[1367366400000,6.7],[1370044800000,6.8],[1372636800000,6.6],[1375315200000,6.7],[1377993600000,6.8],[1380585600000,6.3],[1383264000000,6.2],[1385856000000,6.4],[1388534400000,7.1],[1391212800000,7.3],[1393632000000,7.4],[1396310400000,7.4],[1398902400000,7.4],[1401580800000,7.4],[1404172800000,7.5],[1406851200000,7.2],[1409529600000,7.4],[1412121600000,7.2],[1414800000000,7.3],[1417392000000,7.6],[1420070400000,7.7],[1422748800000,7.9],[1425168000000,7.4],[1427846400000,7.6]]}],"yaxis":{"labels":{"minWidth":40,"style":{"colors":"#848484"},"formatter":"function(value) {var locale = formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('~s')(value) + '';}"},"decimalsInFloat":0},"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"tooltip":{"x":{"format":"yyyy"}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2002-11-01","max":"2015-04-01"},"type":"line"},"evals":["ax_opts.yaxis.labels.formatter"],"jsHooks":[]}</script><p>Note that you have to set a common <code>minWidth</code> for y axis
labels. Different width yaxis in different charts will produce incorrect
results when hovering or interacting.</p>
<p>For an example in Shiny, you can run:</p>
<div class="sourceCode" id="cb3"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="fu">run_sync_demo</span><span class="op">(</span><span class="op">)</span></span></code></pre></div>
</div>
<div class="section level2">
<h2 id="brush-chart">Brush chart<a class="anchor" aria-label="anchor" href="#brush-chart"></a>
</h2>
<p>Create a brush chart to navigate into a synced chart : use the chart
below to navigate in the chart above.</p>
<div class="sourceCode" id="cb4"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="fu"><a href="../../reference/apex.html">apex</a></span><span class="op">(</span></span>
<span> data <span class="op">=</span> <span class="va">economics</span>, </span>
<span> mapping <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">psavert</span><span class="op">)</span>,</span>
<span> type <span class="op">=</span> <span class="st">"line"</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_chart.html">ax_chart</a></span><span class="op">(</span></span>
<span> id <span class="op">=</span> <span class="st">"target-chart"</span>, <span class="co"># &lt;-- define target id here</span></span>
<span> toolbar <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> autoSelected <span class="op">=</span> <span class="st">"pan"</span>,</span>
<span> show <span class="op">=</span> <span class="cn">FALSE</span></span>
<span> <span class="op">)</span></span>
<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>
<span> data <span class="op">=</span> <span class="va">economics</span>, </span>
<span> mapping <span class="op">=</span> <span class="fu"><a href="../../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">psavert</span><span class="op">)</span>,</span>
<span> type <span class="op">=</span> <span class="st">"line"</span>, </span>
<span> height <span class="op">=</span> <span class="st">"130px"</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_chart.html">ax_chart</a></span><span class="op">(</span></span>
<span> brush <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> target <span class="op">=</span> <span class="st">"target-chart"</span>, <span class="co"># &lt;-- use target id here</span></span>
<span> enabled <span class="op">=</span> <span class="cn">TRUE</span></span>
<span> <span class="op">)</span>,</span>
<span> offsetY <span class="op">=</span> <span class="op">-</span><span class="fl">20</span>,</span>
<span> selection <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> enabled <span class="op">=</span> <span class="cn">TRUE</span>, <span class="co"># &lt;-- enable selection and define starting range</span></span>
<span> xaxis <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>
<span> min <span class="op">=</span> <span class="fu"><a href="../../reference/format_date.html">format_date</a></span><span class="op">(</span><span class="va">economics</span><span class="op">$</span><span class="va">date</span><span class="op">[</span><span class="fl">1</span><span class="op">]</span><span class="op">)</span>,</span>
<span> max <span class="op">=</span> <span class="fu"><a href="../../reference/format_date.html">format_date</a></span><span class="op">(</span><span class="va">economics</span><span class="op">$</span><span class="va">date</span><span class="op">[</span><span class="fl">100</span><span class="op">]</span><span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span></span>
<span> <span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_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>show <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../../reference/apexcharter-exports.html">%&gt;%</a></span> </span>
<span> <span class="fu"><a href="../../reference/ax_yaxis.html">ax_yaxis</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>show <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span><span class="op">)</span></span></code></pre></div>
<div id="htmlwidget-185465564ba7dfcc0407" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-185465564ba7dfcc0407">{"x":{"ax_opts":{"chart":{"type":"line","toolbar":{"autoSelected":"pan","show":false},"id":"target-chart"},"series":[{"name":"psavert","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],[44
<script type="application/json" data-for="htmlwidget-5d03ee5ed6c686e2a5f4">{"x":{"ax_opts":{"chart":{"type":"line","offsetY":-20,"selection":{"enabled":true,"xaxis":{"min":"new Date('1967-07-01').getTime()","max":"new Date('1975-10-01').getTime()"}},"brush":{"target":"target-chart","enabled":true}},"series":[{"name":"psavert","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],[
</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.6.</p>
</div>
</footer>
</div>
</body>
</html>