Robot
/
apexcharter
mirror of https://github.com/dreamRs/apexcharter.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
apexcharter/docs/articles/chart-options.html

307 lines
80 KiB
HTML
Raw Normal View History

updated pkgdown
2021-07-23 11:19:23 +02: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, shrink-to-fit=no">
<meta name="description" content="apexcharter">
<title>Chart options • 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-4.6.0/bootstrap.min.css" rel="stylesheet">
<script src="../deps/bootstrap-4.6.0/bootstrap.bundle.min.js"></script><script src="../deps/bs3compat-0.2.5.1/tabs.js"></script><script src="../deps/bs3compat-0.2.5.1/bs3compat.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">
<!-- 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 --><link href="../pkgdown.css" rel="stylesheet">
<link href="../syntax-highlighting.css" rel="stylesheet">
<script src="../pkgdown.js"></script><meta property="og:title" content="Chart options">
<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 data-spy="scroll" data-target="#toc" data-headroom>
<nav class="navbar fixed-top navbar-dark navbar-expand-lg bg-primary"><div class="container">
<a class="navbar-brand mb-0 h1" href="../index.html">apexcharter</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<button type="button" id="version-badge" class="badge badge-default d-none d-lg-block" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Released version">0.2.0.9100</button>
<div id="navbar" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto ml-3">
<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-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/articles/advanced-configuration.html">Advanced configuration examples</a>
<a class="dropdown-item" href="../articles/chart-options.html">Chart options</a>
<a class="dropdown-item" href="../articles/facets.html">Facets: grid of charts</a>
<a class="dropdown-item" href="../articles/shiny-integration.html">Shiny integration</a>
<a class="dropdown-item" href="../articles/spark-box.html">Spark boxes</a>
<a class="dropdown-item" href="../articles/sync-charts.html">Syncing charts</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 mr-sm-2" aria-label="Search" name="search-input" data-search-index="/search.json" id="search-input" placeholder="Search..." autocomplete="off">
</form>
<ul class="navbar-nav ml-1">
<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="chart-options_files/header-attrs-2.9/header-attrs.js"></script><script src="chart-options_files/htmlwidgets-1.5.3/htmlwidgets.js"></script><script src="chart-options_files/apexcharts-3.27.3/apexcharts.min.js"></script><link href="chart-options_files/apexcharter-css-0.1.0/apexcharter.css" rel="stylesheet">
<script src="chart-options_files/d3-format-1.4.2/d3-format.min.js"></script><script src="chart-options_files/apexcharter-binding-0.2.0.9100/apexcharter.js"></script><div class="row">
<div class="col-md-9 contents">
<img src="" class="pkg-logo" alt=""><div class="page-header pb-2 mt-4 mb-2 border-bottom toc-ignore">
<h1 class="display-4" data-toc-skip>Chart options</h1>
<small class="dont-index">Source: <a href="https://github.com/dreamRs/apexcharter/blob/master/vignettes/chart-options.Rmd" class="external-link"><code>vignettes/chart-options.Rmd</code></a></small>
<div class="d-none name"><code>chart-options.Rmd</code></div>
</div>
<div id="title-subtitle-and-axis-titles" class="section level2">
<h2 class="hasAnchor">
<a href="#title-subtitle-and-axis-titles" class="anchor" aria-hidden="true"></a>Title, subtitle and axis titles</h2>
<p>Packages and data used below:</p>
<div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/dreamRs/apexcharter" class="external-link">apexcharter</a></span><span class="op">)</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">"diamonds"</span>, package <span class="op">=</span> <span class="st">"ggplot2"</span><span class="op">)</span></code></pre></div>
<div id="labs" class="section level3">
<h3 class="hasAnchor">
<a href="#labs" class="anchor" aria-hidden="true"></a>Labs</h3>
<p>You can set title, subtitle and axis’ titles at once with <code><a href="../reference/ax_labs.html">ax_labs()</a></code>:</p>
<div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">diamonds</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_labs.html">ax_labs</a></span><span class="op">(</span>
title <span class="op">=</span> <span class="st">"Cut distribution"</span>,
subtitle <span class="op">=</span> <span class="st">"Data from ggplot2"</span>,
x <span class="op">=</span> <span class="st">"Cut"</span>,
y <span class="op">=</span> <span class="st">"Count"</span>
<span class="op">)</span></code></pre></div>
<div id="htmlwidget-08e46fd23c6003bcf342" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-08e46fd23c6003bcf342">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":[],"type":"bar","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"tooltip":{"shared":true,"intersect":false,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Count","style":{"fontWeight":400,"fontSize":"14px"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Cut","style":{"fontWeight":400,"fontSize":"14px"}}},"title":{"text":"Cut distribution","style":{"fontWeight":700,"fontSize":"16px"}},"subtitle":{"text":"Data from ggplot2","style":{"fontWeight":400,"fontSize":"14px"}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"Fair","max":"Very Good"},"type":"column"},"evals":[],"jsHooks":[]}</script><p>If you want more control (font size, alignment, …), you can use <code><a href="../reference/ax_title.html">ax_title()</a></code>, <code><a href="../reference/ax_subtitle.html">ax_subtitle()</a></code>, <code><a href="../reference/ax_xaxis.html">ax_xaxis()</a></code> and <code><a href="../reference/ax_yaxis.html">ax_yaxis()</a></code>, as described below.</p>
</div>
<div id="title" class="section level3">
<h3 class="hasAnchor">
<a href="#title" class="anchor" aria-hidden="true"></a>Title</h3>
<div class="sourceCode" id="cb3"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">diamonds</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_title.html">ax_title</a></span><span class="op">(</span>text <span class="op">=</span> <span class="st">"Cut distribution"</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-5cee7b9d7ac9d6819616" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-5cee7b9d7ac9d6819616">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":[],"type":"bar","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"tooltip":{"shared":true,"intersect":false,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"title":{"text":"Cut distribution"}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"Fair","max":"Very Good"},"type":"column"},"evals":[],"jsHooks":[]}</script><p>You can set some options, for example:</p>
<div class="sourceCode" id="cb4"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">diamonds</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_title.html">ax_title</a></span><span class="op">(</span>
text <span class="op">=</span> <span class="st">"Cut distribution"</span>,
align <span class="op">=</span> <span class="st">"center"</span>,
style <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>fontSize <span class="op">=</span> <span class="st">"22px"</span>, fontWeight <span class="op">=</span> <span class="fl">700</span><span class="op">)</span>
<span class="op">)</span></code></pre></div>
<div id="htmlwidget-5cca3205b150ee78ef33" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-5cca3205b150ee78ef33">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":[],"type":"bar","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"tooltip":{"shared":true,"intersect":false,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"title":{"text":"Cut distribution","align":"center","style":{"fontSize":"22px","fontWeight":700}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"Fair","max":"Very Good"},"type":"column"},"evals":[],"jsHooks":[]}</script><p>Full list of parameters is available here : <a href="https://apexcharts.com/docs/options/title/" class="external-link uri">https://apexcharts.com/docs/options/title/</a></p>
</div>
<div id="subtitle" class="section level3">
<h3 class="hasAnchor">
<a href="#subtitle" class="anchor" aria-hidden="true"></a>Subtitle</h3>
<div class="sourceCode" id="cb5"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">diamonds</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_title.html">ax_title</a></span><span class="op">(</span>text <span class="op">=</span> <span class="st">"Cut distribution"</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_subtitle.html">ax_subtitle</a></span><span class="op">(</span>text <span class="op">=</span> <span class="st">"Data from ggplot2"</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-d8300fa574100e191afe" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-d8300fa574100e191afe">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":[],"type":"bar","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"tooltip":{"shared":true,"intersect":false,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"title":{"text":"Cut distribution"},"subtitle":{"text":"Data from ggplot2"}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"Fair","max":"Very Good"},"type":"column"},"evals":[],"jsHooks":[]}</script><p>With same options than for title:</p>
<div class="sourceCode" id="cb6"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">diamonds</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_title.html">ax_title</a></span><span class="op">(</span>
text <span class="op">=</span> <span class="st">"Cut distribution"</span>,
align <span class="op">=</span> <span class="st">"center"</span>,
style <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>fontSize <span class="op">=</span> <span class="st">"22px"</span>, fontWeight <span class="op">=</span> <span class="fl">700</span><span class="op">)</span>
<span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_subtitle.html">ax_subtitle</a></span><span class="op">(</span>
text <span class="op">=</span> <span class="st">"Data from ggplot2"</span>,
align <span class="op">=</span> <span class="st">"center"</span>,
style <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>fontSize <span class="op">=</span> <span class="st">"16px"</span>, fontWeight <span class="op">=</span> <span class="fl">400</span>, color <span class="op">=</span> <span class="st">"#BDBDBD"</span><span class="op">)</span>
<span class="op">)</span></code></pre></div>
<div id="htmlwidget-275d74b332c422e64817" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-275d74b332c422e64817">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":[],"type":"bar","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"tooltip":{"shared":true,"intersect":false,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"title":{"text":"Cut distribution","align":"center","style":{"fontSize":"22px","fontWeight":700}},"subtitle":{"text":"Data from ggplot2","align":"center","style":{"fontSize":"16px","fontWeight":400,"color":"#BDBDBD"}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"Fair","max":"Very Good"},"type":"column"},"evals":[],"jsHooks":[]}</script><p>Full list of parameters is available here : <a href="https://apexcharts.com/docs/options/subtitle/" class="external-link uri">https://apexcharts.com/docs/options/subtitle/</a></p>
</div>
<div id="axis-title" class="section level3">
<h3 class="hasAnchor">
<a href="#axis-title" class="anchor" aria-hidden="true"></a>Axis title</h3>
<div class="sourceCode" id="cb7"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">diamonds</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span>title <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>text <span class="op">=</span> <span class="st">"Count"</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_xaxis.html">ax_xaxis</a></span><span class="op">(</span>title <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>text <span class="op">=</span> <span class="st">"Cut"</span><span class="op">)</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-3797981acdbb21016747" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-3797981acdbb21016747">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":[],"type":"bar","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"tooltip":{"shared":true,"intersect":false,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Count"}},"xaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Cut"}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"Fair","max":"Very Good"},"type":"column"},"evals":[],"jsHooks":[]}</script><p>With some options:</p>
<div class="sourceCode" id="cb8"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">diamonds</span>, type <span class="op">=</span> <span class="st">"column"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span>title <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>
text <span class="op">=</span> <span class="st">"Count"</span>,
style <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>fontSize <span class="op">=</span> <span class="st">"14px"</span>, color <span class="op">=</span> <span class="st">"#BDBDBD"</span><span class="op">)</span>
<span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_xaxis.html">ax_xaxis</a></span><span class="op">(</span>title <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>
text <span class="op">=</span> <span class="st">"Cut"</span>,
style <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span>fontSize <span class="op">=</span> <span class="st">"14px"</span>, color <span class="op">=</span> <span class="st">"#BDBDBD"</span><span class="op">)</span>
<span class="op">)</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-39c64a352083246a8fe2" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-39c64a352083246a8fe2">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":[],"type":"bar","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"tooltip":{"shared":true,"intersect":false,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Count","style":{"fontSize":"14px","color":"#BDBDBD"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}},"title":{"text":"Cut","style":{"fontSize":"14px","color":"#BDBDBD"}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"Fair","max":"Very Good"},"type":"column"},"evals":[],"jsHooks":[]}</script>
</div>
</div>
<div id="lines" class="section level2">
<h2 class="hasAnchor">
<a href="#lines" class="anchor" aria-hidden="true"></a>Lines</h2>
<div class="sourceCode" id="cb9"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/dreamRs/apexcharter" class="external-link">apexcharter</a></span><span class="op">)</span>
<span class="co">## economics dataset from ggplot2</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 class="fu"><a href="https://rdrr.io/r/utils/data.html" class="external-link">data</a></span><span class="op">(</span><span class="st">"economics_long"</span>, package <span class="op">=</span> <span class="st">"ggplot2"</span><span class="op">)</span>
<span class="va">economics</span> <span class="op">&lt;-</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">50</span><span class="op">)</span>
<span class="va">economics_long</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/base/subset.html" class="external-link">subset</a></span><span class="op">(</span><span class="va">economics_long</span>, <span class="va">date</span> <span class="op">&gt;=</span> <span class="st">"2010-01-01"</span><span class="op">)</span></code></pre></div>
<div id="type-of-line" class="section level3">
<h3 class="hasAnchor">
<a href="#type-of-line" class="anchor" aria-hidden="true"></a>Type of line</h3>
<p>Classic line:</p>
<div class="sourceCode" id="cb10"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-8046b094e368826acb7b" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-8046b094e368826acb7b">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[[1298937600000,21.5],[1301616000000,20.9],[1304208000000,21.6],[1306886400000,22.4],[1309478400000,22],[1312156800000,22.4],[1314835200000,22],[1317427200000,20.6],[1320105600000,20.8],[1322697600000,20.5],[1325376000000,20.8],[1328054400000,19.7],[1330560000000,19.2],[1333238400000,19.1],[1335830400000,19.9],[1338508800000,20.4],[1341100800000,17.5],[1343779200000,18.4],[1346457600000,18.8],[1349049600000,19.9],[1351728000000,18.6],[1354320000000,17.7],[1356998400000,15.8],[1359676800000,17.2],[1362096000000,17.6],[1364774400000,17.1],[1367366400000,17.1],[1370044800000,17],[1372636800000,16.2],[1375315200000,16.5],[1377993600000,16.5],[1380585600000,16.3],[1383264000000,17.1],[1385856000000,17.3],[1388534400000,15.4],[1391212800000,15.9],[1393632000000,15.8],[1396310400000,15.7],[1398902400000,14.6],[1401580800000,13.8],[1404172800000,13.1],[1406851200000,12.9],[1409529600000,13.4],[1412121600000,13.6],[1414800000000,13],[1417392000000,12.9],[1420070400000,13.2],[1422748800000,12.9],[1425168000000,12],[1427846400000,11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","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":"2011-03-01","max":"2015-04-01"},"type":"line"},"evals":[],"jsHooks":[]}</script><p>Spline curve:</p>
<div class="sourceCode" id="cb11"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span><span class="op">(</span>curve <span class="op">=</span> <span class="st">"smooth"</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-151011a5d243d9c6ef93" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-151011a5d243d9c6ef93">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[[1298937600000,21.5],[1301616000000,20.9],[1304208000000,21.6],[1306886400000,22.4],[1309478400000,22],[1312156800000,22.4],[1314835200000,22],[1317427200000,20.6],[1320105600000,20.8],[1322697600000,20.5],[1325376000000,20.8],[1328054400000,19.7],[1330560000000,19.2],[1333238400000,19.1],[1335830400000,19.9],[1338508800000,20.4],[1341100800000,17.5],[1343779200000,18.4],[1346457600000,18.8],[1349049600000,19.9],[1351728000000,18.6],[1354320000000,17.7],[1356998400000,15.8],[1359676800000,17.2],[1362096000000,17.6],[1364774400000,17.1],[1367366400000,17.1],[1370044800000,17],[1372636800000,16.2],[1375315200000,16.5],[1377993600000,16.5],[1380585600000,16.3],[1383264000000,17.1],[1385856000000,17.3],[1388534400000,15.4],[1391212800000,15.9],[1393632000000,15.8],[1396310400000,15.7],[1398902400000,14.6],[1401580800000,13.8],[1404172800000,13.1],[1406851200000,12.9],[1409529600000,13.4],[1412121600000,13.6],[1414800000000,13],[1417392000000,12.9],[1420070400000,13.2],[1422748800000,12.9],[1425168000000,12],[1427846400000,11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"smooth","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","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":"2011-03-01","max":"2015-04-01"},"type":"line"},"evals":[],"jsHooks":[]}</script><p>Steps chart:</p>
<div class="sourceCode" id="cb12"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span><span class="op">(</span>curve <span class="op">=</span> <span class="st">"stepline"</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-ed12c0b4b8d6c9be5143" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-ed12c0b4b8d6c9be5143">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[[1298937600000,21.5],[1301616000000,20.9],[1304208000000,21.6],[1306886400000,22.4],[1309478400000,22],[1312156800000,22.4],[1314835200000,22],[1317427200000,20.6],[1320105600000,20.8],[1322697600000,20.5],[1325376000000,20.8],[1328054400000,19.7],[1330560000000,19.2],[1333238400000,19.1],[1335830400000,19.9],[1338508800000,20.4],[1341100800000,17.5],[1343779200000,18.4],[1346457600000,18.8],[1349049600000,19.9],[1351728000000,18.6],[1354320000000,17.7],[1356998400000,15.8],[1359676800000,17.2],[1362096000000,17.6],[1364774400000,17.1],[1367366400000,17.1],[1370044800000,17],[1372636800000,16.2],[1375315200000,16.5],[1377993600000,16.5],[1380585600000,16.3],[1383264000000,17.1],[1385856000000,17.3],[1388534400000,15.4],[1391212800000,15.9],[1393632000000,15.8],[1396310400000,15.7],[1398902400000,14.6],[1401580800000,13.8],[1404172800000,13.1],[1406851200000,12.9],[1409529600000,13.4],[1412121600000,13.6],[1414800000000,13],[1417392000000,12.9],[1420070400000,13.2],[1422748800000,12.9],[1425168000000,12],[1427846400000,11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"stepline","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","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":"2011-03-01","max":"2015-04-01"},"type":"line"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="line-appearance" class="section level3">
<h3 class="hasAnchor">
<a href="#line-appearance" class="anchor" aria-hidden="true"></a>Line appearance</h3>
<p>Color line with gradient:</p>
<div class="sourceCode" id="cb13"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_fill.html">ax_fill</a></span><span class="op">(</span>
type <span class="op">=</span> <span class="st">"gradient"</span>,
gradient <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>
shade <span class="op">=</span> <span class="st">"dark"</span>,
gradientToColors <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span><span class="st">"#FDD835"</span><span class="op">)</span>,
shadeIntensity <span class="op">=</span> <span class="fl">1</span>,
type <span class="op">=</span> <span class="st">"horizontal"</span>,
opacityFrom <span class="op">=</span> <span class="fl">1</span>,
opacityTo <span class="op">=</span> <span class="fl">1</span>,
stops <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span><span class="fl">0</span>, <span class="fl">100</span>, <span class="fl">100</span>, <span class="fl">100</span><span class="op">)</span>
<span class="op">)</span>
<span class="op">)</span></code></pre></div>
<div id="htmlwidget-3b9e4c263721c03cb3f7" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-3b9e4c263721c03cb3f7">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[[1298937600000,21.5],[1301616000000,20.9],[1304208000000,21.6],[1306886400000,22.4],[1309478400000,22],[1312156800000,22.4],[1314835200000,22],[1317427200000,20.6],[1320105600000,20.8],[1322697600000,20.5],[1325376000000,20.8],[1328054400000,19.7],[1330560000000,19.2],[1333238400000,19.1],[1335830400000,19.9],[1338508800000,20.4],[1341100800000,17.5],[1343779200000,18.4],[1346457600000,18.8],[1349049600000,19.9],[1351728000000,18.6],[1354320000000,17.7],[1356998400000,15.8],[1359676800000,17.2],[1362096000000,17.6],[1364774400000,17.1],[1367366400000,17.1],[1370044800000,17],[1372636800000,16.2],[1375315200000,16.5],[1377993600000,16.5],[1380585600000,16.3],[1383264000000,17.1],[1385856000000,17.3],[1388534400000,15.4],[1391212800000,15.9],[1393632000000,15.8],[1396310400000,15.7],[1398902400000,14.6],[1401580800000,13.8],[1404172800000,13.1],[1406851200000,12.9],[1409529600000,13.4],[1412121600000,13.6],[1414800000000,13],[1417392000000,12.9],[1420070400000,13.2],[1422748800000,12.9],[1425168000000,12],[1427846400000,11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"fill":{"type":"gradient","gradient":{"shade":"dark","gradientToColors":["#FDD835"],"shadeIntensity":1,"type":"horizontal","opacityFrom":1,"opacityTo":1,"stops":[0,100,100,100]}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"},"type":"line"},"evals":[],"jsHooks":[]}</script><p>Solid area color:</p>
<div class="sourceCode" id="cb14"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"area"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_fill.html">ax_fill</a></span><span class="op">(</span>type <span class="op">=</span> <span class="st">"solid"</span>, opacity <span class="op">=</span> <span class="fl">1</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-4bffe844bc38042fbf57" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-4bffe844bc38042fbf57">{"x":{"ax_opts":{"chart":{"type":"area"},"series":[{"name":"uempmed","type":"area","data":[[1298937600000,21.5],[1301616000000,20.9],[1304208000000,21.6],[1306886400000,22.4],[1309478400000,22],[1312156800000,22.4],[1314835200000,22],[1317427200000,20.6],[1320105600000,20.8],[1322697600000,20.5],[1325376000000,20.8],[1328054400000,19.7],[1330560000000,19.2],[1333238400000,19.1],[1335830400000,19.9],[1338508800000,20.4],[1341100800000,17.5],[1343779200000,18.4],[1346457600000,18.8],[1349049600000,19.9],[1351728000000,18.6],[1354320000000,17.7],[1356998400000,15.8],[1359676800000,17.2],[1362096000000,17.6],[1364774400000,17.1],[1367366400000,17.1],[1370044800000,17],[1372636800000,16.2],[1375315200000,16.5],[1377993600000,16.5],[1380585600000,16.3],[1383264000000,17.1],[1385856000000,17.3],[1388534400000,15.4],[1391212800000,15.9],[1393632000000,15.8],[1396310400000,15.7],[1398902400000,14.6],[1401580800000,13.8],[1404172800000,13.1],[1406851200000,12.9],[1409529600000,13.4],[1412121600000,13.6],[1414800000000,13],[1417392000000,12.9],[1420070400000,13.2],[1422748800000,12.9],[1425168000000,12],[1427846400000,11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"fill":{"type":"solid","opacity":1}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2011-03-01","max":"2015-04-01"},"type":"area"},"evals":[],"jsHooks":[]}</script><p>Line width:</p>
<div class="sourceCode" id="cb15"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">1</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-cbe534795f8ff73d0071" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-cbe534795f8ff73d0071">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[[1298937600000,21.5],[1301616000000,20.9],[1304208000000,21.6],[1306886400000,22.4],[1309478400000,22],[1312156800000,22.4],[1314835200000,22],[1317427200000,20.6],[1320105600000,20.8],[1322697600000,20.5],[1325376000000,20.8],[1328054400000,19.7],[1330560000000,19.2],[1333238400000,19.1],[1335830400000,19.9],[1338508800000,20.4],[1341100800000,17.5],[1343779200000,18.4],[1346457600000,18.8],[1349049600000,19.9],[1351728000000,18.6],[1354320000000,17.7],[1356998400000,15.8],[1359676800000,17.2],[1362096000000,17.6],[1364774400000,17.1],[1367366400000,17.1],[1370044800000,17],[1372636800000,16.2],[1375315200000,16.5],[1377993600000,16.5],[1380585600000,16.3],[1383264000000,17.1],[1385856000000,17.3],[1388534400000,15.4],[1391212800000,15.9],[1393632000000,15.8],[1396310400000,15.7],[1398902400000,14.6],[1401580800000,13.8],[1404172800000,13.1],[1406851200000,12.9],[1409529600000,13.4],[1412121600000,13.6],[1414800000000,13],[1417392000000,12.9],[1420070400000,13.2],[1422748800000,12.9],[1425168000000,12],[1427846400000,11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":1},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","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":"2011-03-01","max":"2015-04-01"},"type":"line"},"evals":[],"jsHooks":[]}</script><p>Dotted line</p>
<div class="sourceCode" id="cb16"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span><span class="op">(</span>dashArray <span class="op">=</span> <span class="fl">6</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-9b1f24d458c522d55342" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-9b1f24d458c522d55342">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[[1298937600000,21.5],[1301616000000,20.9],[1304208000000,21.6],[1306886400000,22.4],[1309478400000,22],[1312156800000,22.4],[1314835200000,22],[1317427200000,20.6],[1320105600000,20.8],[1322697600000,20.5],[1325376000000,20.8],[1328054400000,19.7],[1330560000000,19.2],[1333238400000,19.1],[1335830400000,19.9],[1338508800000,20.4],[1341100800000,17.5],[1343779200000,18.4],[1346457600000,18.8],[1349049600000,19.9],[1351728000000,18.6],[1354320000000,17.7],[1356998400000,15.8],[1359676800000,17.2],[1362096000000,17.6],[1364774400000,17.1],[1367366400000,17.1],[1370044800000,17],[1372636800000,16.2],[1375315200000,16.5],[1377993600000,16.5],[1380585600000,16.3],[1383264000000,17.1],[1385856000000,17.3],[1388534400000,15.4],[1391212800000,15.9],[1393632000000,15.8],[1396310400000,15.7],[1398902400000,14.6],[1401580800000,13.8],[1404172800000,13.1],[1406851200000,12.9],[1409529600000,13.4],[1412121600000,13.6],[1414800000000,13],[1417392000000,12.9],[1420070400000,13.2],[1422748800000,12.9],[1425168000000,12],[1427846400000,11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2,"dashArray":6},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","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":"2011-03-01","max":"2015-04-01"},"type":"line"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="markers" class="section level3">
<h3 class="hasAnchor">
<a href="#markers" class="anchor" aria-hidden="true"></a>Markers</h3>
<p>Add points to line :</p>
<div class="sourceCode" id="cb17"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>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">20</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_markers.html">ax_markers</a></span><span class="op">(</span>size <span class="op">=</span> <span class="fl">6</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-9359d023ccb3d55b2c5a" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-9359d023ccb3d55b2c5a">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[[1377993600000,16.5],[1380585600000,16.3],[1383264000000,17.1],[1385856000000,17.3],[1388534400000,15.4],[1391212800000,15.9],[1393632000000,15.8],[1396310400000,15.7],[1398902400000,14.6],[1401580800000,13.8],[1404172800000,13.1],[1406851200000,12.9],[1409529600000,13.4],[1412121600000,13.6],[1414800000000,13],[1417392000000,12.9],[1420070400000,13.2],[1422748800000,12.9],[1425168000000,12],[1427846400000,11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"markers":{"size":6}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2013-09-01","max":"2015-04-01"},"type":"line"},"evals":[],"jsHooks":[]}</script><p>Add labels over points</p>
<div class="sourceCode" id="cb18"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="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">20</span><span class="op">)</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">uempmed</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_markers.html">ax_markers</a></span><span class="op">(</span>size <span class="op">=</span> <span class="fl">6</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_dataLabels.html">ax_dataLabels</a></span><span class="op">(</span>enabled <span class="op">=</span> <span class="cn">TRUE</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-01cf753b4b3b7c19aede" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-01cf753b4b3b7c19aede">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","type":"line","data":[[1377993600000,16.5],[1380585600000,16.3],[1383264000000,17.1],[1385856000000,17.3],[1388534400000,15.4],[1391212800000,15.9],[1393632000000,15.8],[1396310400000,15.7],[1398902400000,14.6],[1401580800000,13.8],[1404172800000,13.1],[1406851200000,12.9],[1409529600000,13.4],[1412121600000,13.6],[1414800000000,13],[1417392000000,12.9],[1420070400000,13.2],[1422748800000,12.9],[1425168000000,12],[1427846400000,11.5]]}],"dataLabels":{"enabled":true},"stroke":{"curve":"straight","width":2},"yaxis":{"decimalsInFloat":2,"labels":{"style":{"colors":"#848484"}}},"xaxis":{"type":"datetime","labels":{"style":{"colors":"#848484"}}},"markers":{"size":6}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":"2013-09-01","max":"2015-04-01"},"type":"line"},"evals":[],"jsHooks":[]}</script>
</div>
<div id="multiple-lines" class="section level3">
<h3 class="hasAnchor">
<a href="#multiple-lines" class="anchor" aria-hidden="true"></a>Multiple lines</h3>
<p>You can use vectors of parameters to custom series separately:</p>
<div class="sourceCode" id="cb19"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics_long</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">value01</span>, group <span class="op">=</span> <span class="va">variable</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span>decimalsInFloat <span class="op">=</span> <span class="fl">2</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_markers.html">ax_markers</a></span><span class="op">(</span>size <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span><span class="fl">3</span>, <span class="fl">6</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span><span class="fl">1</span>, <span class="fl">3</span><span class="op">)</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-616a6eca170b15a3e556" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-616a6eca170b15a3e556">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"pce","type":"line","data":[[1262304000000,0.81244277879029],[1264982400000,0.81490703425144],[1267401600000,0.8199125531569],[1270080000000,0.821948986489377],[1272672000000,0.823497702595169],[1275350400000,0.82524321688015],[1277942400000,0.828092512257104],[1280620800000,0.831814564776549],[1283299200000,0.833594304831823],[1285891200000,0.838360243345227],[1288569600000,0.842638464631945],[1291161600000,0.84583857415441],[1293840000000,0.849552070231281],[1296518400000,0.852512599361689],[1298937600000,0.859391979190732],[1301616000000,0.862566419385476],[1304208000000,0.864654191373395],[1306886400000,0.866776189131607],[1309478400000,0.870258661258995],[1312156800000,0.872235199493459],[1314835200000,0.875443865458497],[1317427200000,0.876727331844512],[1320105600000,0.877274944169212],[1322697600000,0.878361612376039],[1325376000000,0.886053854249557],[1328054400000,0.893874442761677],[1330560000000,0.893728983237929],[1333238400000,0.896116230715918],[1335830400000,0.895166465590266],[1338508800000,0.89325837889639],[1341100800000,0.895902319651582],[1343779200000,0.898204002703836],[1346457600000,0.903115400740988],[1349049600000,0.906392518246614],[1351728000000,0.909558401998785],[1354320000000,0.909874990374002],[1356998400000,0.915205654097253],[1359676800000,0.918354424964277],[1362096000000,0.917284869642597],[1364774400000,0.915428121604162],[1367366400000,0.918782247092949],[1370044800000,0.92085290619572],[1372636800000,0.923240153673709],[1375315200000,0.926020997510075],[1377993600000,0.92924677636026],[1380585600000,0.933773134481608],[1383264000000,0.939574402546397],[1385856000000,0.942167004646148],[1388534400000,0.941704956747183],[1391212800000,0.946299766409118],[1393632000000,0.952871114305516],[1396310400000,0.957970754079284],[1398902400000,0.961889604777918],[1401580800000,0.967759324383294],[1404172800000,0.971481376902739],[1406851200000,0.978651675779278],[1409529600000,0.979772569756398],[1412121600000,0.985385596084572],[1414800000000,0.987815625775428],[1417392000000,0.988722608688212],[1420070400000,0.987353577876462],[1422748800000,0.990468122973193],[1425168000000,0.99696246288643],[1427846400000,1]]},{"name":"pop","type":"line","data":[[1262304000000,0.904928367541553],[1264982400000,0.906522578484998],[1267401600000,0.908042831188798],[1270080000000,0.907871995872802],[1272672000000,0.909333427123338],[1275350400000,0.910808064028442],[1277942400000,0.912428538364542],[1280620800000,0.914171298541104],[1283299200000,0.915968409806222],[1285891200000,0.917804973683399],[1288569600000,0.919414025580265],[1291161600000,0.920942011028899],[1293840000000,0.92241324585498],[1296518400000,0.923667544729019],[1298937600000,0.924916847313091],[1301616000000,0.926320689747691],[1304208000000,0.927724597922949],[1306886400000,0.929237808158818],[1309478400000,0.930929200229156],[1312156800000,0.932641070514292],[1314835200000,0.934479762745255],[1317427200000,0.936246879835405],[1320105600000,0.93777012373912],[1322697600000,0.939250841655039],[1325376000000,0.940676320983526],[1328054400000,0.941956603852427],[1330560000000,0.943274638293876],[1333238400000,0.944653203445681],[1335830400000,0.945995981027082],[1338508800000,0.947533194820507],[1341100800000,0.949120765957549],[1343779200000,0.95085923655621],[1346457600000,0.952703327738667],[1349049600000,0.954406249076806],[1351728000000,0.956048820491396],[1354320000000,0.957518855550477],[1356998400000,0.958807725792759],[1359676800000,0.959880514711547],[1362096000000,0.961048077005648],[1364774400000,0.962326987538324],[1367366400000,0.963689454446634],[1370044800000,0.965229330736687],[1372636800000,0.966772066745339],[1375315200000,0.968592663860335],[1377993600000,0.970448177482025],[1380585600000,0.972224366782906],[1383264000000,0.97391518362249],[1385856000000,0.975423315392571],[1388534400000,0.976921972290395],[1391212800000,0.97823645673634],[1393632000000,0.97957855225842],[1396310400000,0.
<code class="sourceCode R"><span class="fu"><a href="../reference/apex.html">apex</a></span><span class="op">(</span>data <span class="op">=</span> <span class="va">economics_long</span>, type <span class="op">=</span> <span class="st">"line"</span>, mapping <span class="op">=</span> <span class="fu"><a href="../reference/apexcharter-exports.html">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">date</span>, y <span class="op">=</span> <span class="va">value01</span>, group <span class="op">=</span> <span class="va">variable</span><span class="op">)</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span><span class="op">(</span>decimalsInFloat <span class="op">=</span> <span class="fl">2</span><span class="op">)</span> <span class="op"><a href="../reference/apexcharter-exports.html">%&gt;%</a></span>
<span class="fu"><a href="../reference/ax_stroke.html">ax_stroke</a></span><span class="op">(</span>dashArray <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span><span class="fl">8</span>, <span class="fl">5</span><span class="op">)</span><span class="op">)</span></code></pre></div>
<div id="htmlwidget-418a3d220415843735b9" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-418a3d220415843735b9">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"pce","type":"line","data":[[1262304000000,0.81244277879029],[1264982400000,0.81490703425144],[1267401600000,0.8199125531569],[1270080000000,0.821948986489377],[1272672000000,0.823497702595169],[1275350400000,0.82524321688015],[1277942400000,0.828092512257104],[1280620800000,0.831814564776549],[1283299200000,0.833594304831823],[1285891200000,0.838360243345227],[1288569600000,0.842638464631945],[1291161600000,0.84583857415441],[1293840000000,0.849552070231281],[1296518400000,0.852512599361689],[1298937600000,0.859391979190732],[1301616000000,0.862566419385476],[1304208000000,0.864654191373395],[1306886400000,0.866776189131607],[1309478400000,0.870258661258995],[1312156800000,0.872235199493459],[1314835200000,0.875443865458497],[1317427200000,0.876727331844512],[1320105600000,0.877274944169212],[1322697600000,0.878361612376039],[1325376000000,0.886053854249557],[1328054400000,0.893874442761677],[1330560000000,0.893728983237929],[1333238400000,0.896116230715918],[1335830400000,0.895166465590266],[1338508800000,0.89325837889639],[1341100800000,0.895902319651582],[1343779200000,0.898204002703836],[1346457600000,0.903115400740988],[1349049600000,0.906392518246614],[1351728000000,0.909558401998785],[1354320000000,0.909874990374002],[1356998400000,0.915205654097253],[1359676800000,0.918354424964277],[1362096000000,0.917284869642597],[1364774400000,0.915428121604162],[1367366400000,0.918782247092949],[1370044800000,0.92085290619572],[1372636800000,0.923240153673709],[1375315200000,0.926020997510075],[1377993600000,0.92924677636026],[1380585600000,0.933773134481608],[1383264000000,0.939574402546397],[1385856000000,0.942167004646148],[1388534400000,0.941704956747183],[1391212800000,0.946299766409118],[1393632000000,0.952871114305516],[1396310400000,0.957970754079284],[1398902400000,0.961889604777918],[1401580800000,0.967759324383294],[1404172800000,0.971481376902739],[1406851200000,0.978651675779278],[1409529600000,0.979772569756398],[1412121600000,0.985385596084572],[1414800000000,0.987815625775428],[1417392000000,0.988722608688212],[1420070400000,0.987353577876462],[1422748800000,0.990468122973193],[1425168000000,0.99696246288643],[1427846400000,1]]},{"name":"pop","type":"line","data":[[1262304000000,0.904928367541553],[1264982400000,0.906522578484998],[1267401600000,0.908042831188798],[1270080000000,0.907871995872802],[1272672000000,0.909333427123338],[1275350400000,0.910808064028442],[1277942400000,0.912428538364542],[1280620800000,0.914171298541104],[1283299200000,0.915968409806222],[1285891200000,0.917804973683399],[1288569600000,0.919414025580265],[1291161600000,0.920942011028899],[1293840000000,0.92241324585498],[1296518400000,0.923667544729019],[1298937600000,0.924916847313091],[1301616000000,0.926320689747691],[1304208000000,0.927724597922949],[1306886400000,0.929237808158818],[1309478400000,0.930929200229156],[1312156800000,0.932641070514292],[1314835200000,0.934479762745255],[1317427200000,0.936246879835405],[1320105600000,0.93777012373912],[1322697600000,0.939250841655039],[1325376000000,0.940676320983526],[1328054400000,0.941956603852427],[1330560000000,0.943274638293876],[1333238400000,0.944653203445681],[1335830400000,0.945995981027082],[1338508800000,0.947533194820507],[1341100800000,0.949120765957549],[1343779200000,0.95085923655621],[1346457600000,0.952703327738667],[1349049600000,0.954406249076806],[1351728000000,0.956048820491396],[1354320000000,0.957518855550477],[1356998400000,0.958807725792759],[1359676800000,0.959880514711547],[1362096000000,0.961048077005648],[1364774400000,0.962326987538324],[1367366400000,0.963689454446634],[1370044800000,0.965229330736687],[1372636800000,0.966772066745339],[1375315200000,0.968592663860335],[1377993600000,0.970448177482025],[1380585600000,0.972224366782906],[1383264000000,0.97391518362249],[1385856000000,0.975423315392571],[1388534400000,0.976921972290395],[1391212800000,0.97823645673634],[1393632000000,0.97957855225842],[1396310400000,0.
</div>
</div>
</div>
<div class="col-md-3 d-none d-md-block" id="pkgdown-sidebar">
<div class="sticky-top">
<nav id="toc"><h2 data-toc-skip>Contents</h2>
</nav>
</div>
</div>
</div>
<footer><div class="pkgdown-footer-left">
<p></p>
<p>Developed by <a href="https://twitter.com/_pvictorr" class="external-link 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 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 external-link">pkgdown</a> 1.6.1.9001.</p>
</div>
</footer>
</div>
</body>
</html>