220 lines
35 KiB
HTML
220 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<!-- Generated by pkgdown: do not edit by hand --><html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Options & styles for lines • apexcharter</title>
|
|
<!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script><!-- Bootstrap --><link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous">
|
|
<!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" integrity="sha256-FiZwavyI2V6+EXO1U+xzLG3IKldpiTFf3153ea9zikQ=" crossorigin="anonymous"></script><!-- sticky kit --><script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js" integrity="sha256-c4Rlo1ZozqTPE2RLuvbusY3+SU1pQaJC0TjuhygMipw=" crossorigin="anonymous"></script><!-- pkgdown --><link href="../pkgdown.css" rel="stylesheet">
|
|
<script src="../pkgdown.js"></script><meta property="og:title" content="Options & styles for lines">
|
|
<meta property="og:description" content="">
|
|
<meta name="twitter:card" content="summary">
|
|
<!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<div class="container template-article">
|
|
<header><div class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<span class="navbar-brand">
|
|
<a class="navbar-link" href="../index.html">apexcharter</a>
|
|
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div id="navbar" class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li>
|
|
<a href="../index.html">
|
|
<span class="fa fa-home fa-lg"></span>
|
|
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="../articles/starting-with-apexcharts.html">Get started</a>
|
|
</li>
|
|
<li>
|
|
<a href="../reference/index.html">Reference</a>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
|
|
Articles
|
|
|
|
<span class="caret"></span>
|
|
</a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li>
|
|
<a href="../articles/labs.html">Labs: title, subtitle & axis</a>
|
|
</li>
|
|
<li>
|
|
<a href="../articles/lines.html">Options & styles for lines</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="../news/index.html">News</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li>
|
|
<a href="https://github.com/dreamRs/apexcharter">
|
|
<span class="fa fa-github fa-lg"></span>
|
|
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!--/.nav-collapse -->
|
|
</div>
|
|
<!--/.container -->
|
|
</div>
|
|
<!--/.navbar -->
|
|
|
|
|
|
</header><script src="lines_files/htmlwidgets-1.3/htmlwidgets.js"></script><script src="lines_files/apexcharts-3.8.2/apexcharts.min.js"></script><script src="lines_files/apexcharter-binding-0.1.1/apexcharter.js"></script><div class="row">
|
|
<div class="col-md-9 contents">
|
|
<div class="page-header toc-ignore">
|
|
<h1>Options & styles for lines</h1>
|
|
|
|
|
|
<small class="dont-index">Source: <a href="https://github.com/dreamRs/apexcharter/blob/master/vignettes/lines.Rmd"><code>vignettes/lines.Rmd</code></a></small>
|
|
<div class="hidden name"><code>lines.Rmd</code></div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb1-1" title="1"><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/library">library</a></span>(apexcharter)</a>
|
|
<a class="sourceLine" id="cb1-2" title="2"><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/library">library</a></span>(dplyr)</a>
|
|
<a class="sourceLine" id="cb1-3" title="3"></a>
|
|
<a class="sourceLine" id="cb1-4" title="4"><span class="co"># economics dataset from ggplot2</span></a>
|
|
<a class="sourceLine" id="cb1-5" title="5"><span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/data">data</a></span>(<span class="st">"economics"</span>, <span class="dt">package =</span> <span class="st">"ggplot2"</span>)</a>
|
|
<a class="sourceLine" id="cb1-6" title="6">economics <-<span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/head">tail</a></span>(economics, <span class="dv">50</span>)</a>
|
|
<a class="sourceLine" id="cb1-7" title="7"></a>
|
|
<a class="sourceLine" id="cb1-8" title="8"><span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/data">data</a></span>(<span class="st">"economics_long"</span>, <span class="dt">package =</span> <span class="st">"ggplot2"</span>)</a>
|
|
<a class="sourceLine" id="cb1-9" title="9">economics_long <-<span class="st"> </span>economics_long <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb1-10" title="10"><span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/stats/topics/filter">filter</a></span>(variable <span class="op">%in%</span><span class="st"> </span><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="st">"pce"</span>, <span class="st">"pop"</span>)) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb1-11" title="11"><span class="st"> </span><span class="kw">group_by</span>(variable) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb1-12" title="12"><span class="st"> </span><span class="kw">slice</span>(<span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/head">tail</a></span>(<span class="kw">row_number</span>(), <span class="dv">20</span>))</a></code></pre></div>
|
|
<div id="type-of-line" class="section level2">
|
|
<h2 class="hasAnchor">
|
|
<a href="#type-of-line" class="anchor"></a>Type of line</h2>
|
|
<p>Classic line:</p>
|
|
<div class="sourceCode" id="cb2"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb2-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> economics, <span class="dt">type =</span> <span class="st">"line"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> uempmed))</a></code></pre></div>
|
|
<div id="htmlwidget-d941f5f4d57bab5c574d" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
|
<script type="application/json" data-for="htmlwidget-d941f5f4d57bab5c574d">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Spline curve:</p>
|
|
<div class="sourceCode" id="cb3"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb3-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> economics, <span class="dt">type =</span> <span class="st">"line"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> uempmed)) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb3-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">curve =</span> <span class="st">"smooth"</span>)</a></code></pre></div>
|
|
<div id="htmlwidget-5ddb49ec6570c48b11d7" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
|
<script type="application/json" data-for="htmlwidget-5ddb49ec6570c48b11d7">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"smooth"},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Steps chart:</p>
|
|
<div class="sourceCode" id="cb4"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb4-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> economics, <span class="dt">type =</span> <span class="st">"line"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> uempmed)) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb4-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">curve =</span> <span class="st">"stepline"</span>)</a></code></pre></div>
|
|
<div id="htmlwidget-ed57138c5e7f0a14a252" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
|
<script type="application/json" data-for="htmlwidget-ed57138c5e7f0a14a252">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"stepline"},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
|
|
</div>
|
|
<div id="line-appearance" class="section level2">
|
|
<h2 class="hasAnchor">
|
|
<a href="#line-appearance" class="anchor"></a>Line appearance</h2>
|
|
<p>Color line with gradient:</p>
|
|
<div class="sourceCode" id="cb5"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb5-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> economics, <span class="dt">type =</span> <span class="st">"line"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> uempmed)) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb5-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_fill.html">ax_fill</a></span>(</a>
|
|
<a class="sourceLine" id="cb5-3" title="3"> <span class="dt">type =</span> <span class="st">"gradient"</span>,</a>
|
|
<a class="sourceLine" id="cb5-4" title="4"> <span class="dt">gradient =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
|
|
<a class="sourceLine" id="cb5-5" title="5"> <span class="dt">shade =</span> <span class="st">"dark"</span>,</a>
|
|
<a class="sourceLine" id="cb5-6" title="6"> <span class="dt">gradientToColors =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="st">"#FDD835"</span>),</a>
|
|
<a class="sourceLine" id="cb5-7" title="7"> <span class="dt">shadeIntensity =</span> <span class="dv">1</span>,</a>
|
|
<a class="sourceLine" id="cb5-8" title="8"> <span class="dt">type =</span> <span class="st">"horizontal"</span>,</a>
|
|
<a class="sourceLine" id="cb5-9" title="9"> <span class="dt">opacityFrom =</span> <span class="dv">1</span>,</a>
|
|
<a class="sourceLine" id="cb5-10" title="10"> <span class="dt">opacityTo =</span> <span class="dv">1</span>,</a>
|
|
<a class="sourceLine" id="cb5-11" title="11"> <span class="dt">stops =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="dv">0</span>, <span class="dv">100</span>, <span class="dv">100</span>, <span class="dv">100</span>)</a>
|
|
<a class="sourceLine" id="cb5-12" title="12"> )</a>
|
|
<a class="sourceLine" id="cb5-13" title="13"> )</a></code></pre></div>
|
|
<div id="htmlwidget-ec19b394f6439c66512b" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
|
<script type="application/json" data-for="htmlwidget-ec19b394f6439c66512b">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"},"fill":{"type":"gradient","gradient":{"shade":"dark","gradientToColors":["#FDD835"],"shadeIntensity":1,"type":"horizontal","opacityFrom":1,"opacityTo":1,"stops":[0,100,100,100]}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Solid area color:</p>
|
|
<div class="sourceCode" id="cb6"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb6-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> economics, <span class="dt">type =</span> <span class="st">"area"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> uempmed)) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb6-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_fill.html">ax_fill</a></span>(<span class="dt">type =</span> <span class="st">"solid"</span>, <span class="dt">opacity =</span> <span class="dv">1</span>)</a></code></pre></div>
|
|
<div id="htmlwidget-720c267d91f02fc9080a" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
|
<script type="application/json" data-for="htmlwidget-720c267d91f02fc9080a">{"x":{"ax_opts":{"chart":{"type":"area"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"},"fill":{"type":"solid","opacity":1}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Line width:</p>
|
|
<div class="sourceCode" id="cb7"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb7-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> economics, <span class="dt">type =</span> <span class="st">"line"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> uempmed)) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb7-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">width =</span> <span class="dv">1</span>)</a></code></pre></div>
|
|
<div id="htmlwidget-0a88c0e15cc11f81bb2a" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
|
<script type="application/json" data-for="htmlwidget-0a88c0e15cc11f81bb2a">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":1},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Dotted line</p>
|
|
<div class="sourceCode" id="cb8"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb8-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> economics, <span class="dt">type =</span> <span class="st">"line"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> uempmed)) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb8-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">dashArray =</span> <span class="dv">6</span>)</a></code></pre></div>
|
|
<div id="htmlwidget-6986f64e48059cbc299c" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
|
<script type="application/json" data-for="htmlwidget-6986f64e48059cbc299c">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","dashArray":6},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
|
|
</div>
|
|
<div id="markers" class="section level2">
|
|
<h2 class="hasAnchor">
|
|
<a href="#markers" class="anchor"></a>Markers</h2>
|
|
<p>Add points to line :</p>
|
|
<div class="sourceCode" id="cb9"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb9-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/head">tail</a></span>(economics, <span class="dv">20</span>), <span class="dt">type =</span> <span class="st">"line"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> uempmed)) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb9-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_markers.html">ax_markers</a></span>(<span class="dt">size =</span> <span class="dv">6</span>)</a></code></pre></div>
|
|
<div id="htmlwidget-214b0a8eb5ef65256d41" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
|
<script type="application/json" data-for="htmlwidget-214b0a8eb5ef65256d41">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"},"markers":{"size":6}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Add labels over points</p>
|
|
<div class="sourceCode" id="cb10"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb10-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/head">tail</a></span>(economics, <span class="dv">20</span>), <span class="dt">type =</span> <span class="st">"line"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> uempmed)) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb10-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_markers.html">ax_markers</a></span>(<span class="dt">size =</span> <span class="dv">6</span>) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb10-3" title="3"><span class="st"> </span><span class="kw"><a href="../reference/ax_dataLabels.html">ax_dataLabels</a></span>(<span class="dt">enabled =</span> <span class="ot">TRUE</span>)</a></code></pre></div>
|
|
<div id="htmlwidget-c06b331086b8ec013c47" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
|
<script type="application/json" data-for="htmlwidget-c06b331086b8ec013c47">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":true},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"},"markers":{"size":6}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
|
|
</div>
|
|
<div id="multiple-lines" class="section level2">
|
|
<h2 class="hasAnchor">
|
|
<a href="#multiple-lines" class="anchor"></a>Multiple lines</h2>
|
|
<p>You can use vectors of parameters to custom series separately:</p>
|
|
<div class="sourceCode" id="cb11"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb11-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> economics_long, <span class="dt">type =</span> <span class="st">"line"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> value01, <span class="dt">group =</span> variable)) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb11-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span>(<span class="dt">decimalsInFloat =</span> <span class="dv">2</span>) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb11-3" title="3"><span class="st"> </span><span class="kw"><a href="../reference/ax_markers.html">ax_markers</a></span>(<span class="dt">size =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="dv">3</span>, <span class="dv">6</span>)) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb11-4" title="4"><span class="st"> </span><span class="kw"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">width =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="dv">1</span>, <span class="dv">3</span>))</a></code></pre></div>
|
|
<div id="htmlwidget-6397efd28c48de4a1ea7" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
|
<script type="application/json" data-for="htmlwidget-6397efd28c48de4a1ea7">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"pce","data":[["2013-09-01",0.92924677636026],["2013-10-01",0.933773134481608],["2013-11-01",0.939574402546397],["2013-12-01",0.942167004646148],["2014-01-01",0.941704956747183],["2014-02-01",0.946299766409118],["2014-03-01",0.952871114305516],["2014-04-01",0.957970754079284],["2014-05-01",0.961889604777918],["2014-06-01",0.967759324383294],["2014-07-01",0.971481376902739],["2014-08-01",0.978651675779278],["2014-09-01",0.979772569756398],["2014-10-01",0.985385596084572],["2014-11-01",0.987815625775428],["2014-12-01",0.988722608688212],["2015-01-01",0.987353577876462],["2015-02-01",0.990468122973193],["2015-03-01",0.99696246288643],["2015-04-01",1]]},{"name":"pop","data":[["2013-09-01",0.970448177482025],["2013-10-01",0.972224366782906],["2013-11-01",0.97391518362249],["2013-12-01",0.975423315392571],["2014-01-01",0.976921972290395],["2014-02-01",0.97823645673634],["2014-03-01",0.97957855225842],["2014-04-01",0.980992099657577],["2014-05-01",0.982473622896551],["2014-06-01",0.984073150615668],["2014-07-01",0.985702006885595],["2014-08-01",0.987603703319152],["2014-09-01",0.989506155770269],["2014-10-01",0.991383363808922],["2014-11-01",0.993112959418826],["2014-12-01",0.994608132061805],["2015-01-01",0.996107750416745],["2015-02-01",0.997306408041825],["2015-03-01",0.998590610697427],["2015-04-01",1]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":[1,3]},"xaxis":{"type":"datetime"},"yaxis":{"decimalsInFloat":2},"markers":{"size":[3,6]}},"auto_update":true},"evals":[],"jsHooks":[]}</script><div class="sourceCode" id="cb12"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb12-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> economics_long, <span class="dt">type =</span> <span class="st">"line"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> value01, <span class="dt">group =</span> variable)) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb12-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span>(<span class="dt">decimalsInFloat =</span> <span class="dv">2</span>) <span class="op">%>%</span><span class="st"> </span></a>
|
|
<a class="sourceLine" id="cb12-3" title="3"><span class="st"> </span><span class="kw"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">dashArray =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="dv">8</span>, <span class="dv">5</span>))</a></code></pre></div>
|
|
<div id="htmlwidget-3414f6b5671031fa5d78" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
|
|
<script type="application/json" data-for="htmlwidget-3414f6b5671031fa5d78">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"pce","data":[["2013-09-01",0.92924677636026],["2013-10-01",0.933773134481608],["2013-11-01",0.939574402546397],["2013-12-01",0.942167004646148],["2014-01-01",0.941704956747183],["2014-02-01",0.946299766409118],["2014-03-01",0.952871114305516],["2014-04-01",0.957970754079284],["2014-05-01",0.961889604777918],["2014-06-01",0.967759324383294],["2014-07-01",0.971481376902739],["2014-08-01",0.978651675779278],["2014-09-01",0.979772569756398],["2014-10-01",0.985385596084572],["2014-11-01",0.987815625775428],["2014-12-01",0.988722608688212],["2015-01-01",0.987353577876462],["2015-02-01",0.990468122973193],["2015-03-01",0.99696246288643],["2015-04-01",1]]},{"name":"pop","data":[["2013-09-01",0.970448177482025],["2013-10-01",0.972224366782906],["2013-11-01",0.97391518362249],["2013-12-01",0.975423315392571],["2014-01-01",0.976921972290395],["2014-02-01",0.97823645673634],["2014-03-01",0.97957855225842],["2014-04-01",0.980992099657577],["2014-05-01",0.982473622896551],["2014-06-01",0.984073150615668],["2014-07-01",0.985702006885595],["2014-08-01",0.987603703319152],["2014-09-01",0.989506155770269],["2014-10-01",0.991383363808922],["2014-11-01",0.993112959418826],["2014-12-01",0.994608132061805],["2015-01-01",0.996107750416745],["2015-02-01",0.997306408041825],["2015-03-01",0.998590610697427],["2015-04-01",1]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","dashArray":[8,5]},"xaxis":{"type":"datetime"},"yaxis":{"decimalsInFloat":2}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
|
|
<div id="tocnav">
|
|
<h2 class="hasAnchor">
|
|
<a href="#tocnav" class="anchor"></a>Contents</h2>
|
|
<ul class="nav nav-pills nav-stacked">
|
|
<li><a href="#type-of-line">Type of line</a></li>
|
|
<li><a href="#line-appearance">Line appearance</a></li>
|
|
<li><a href="#markers">Markers</a></li>
|
|
<li><a href="#multiple-lines">Multiple lines</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<footer><div class="copyright">
|
|
<p>Developed by <a href="https://twitter.com/_pvictorr"><img src="https://pbs.twimg.com/profile_images/844237339404722177/E1U61aM8_normal.jpg"> Victor Perrier</a>, <a href="https://twitter.com/_mfaan"><img src="https://pbs.twimg.com/profile_images/912313931326218240/o1-wvA18_normal.jpg"> Fanny Meyer</a>.</p>
|
|
</div>
|
|
|
|
<div class="pkgdown">
|
|
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.3.0.</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|