370 lines
18 KiB
HTML
370 lines
18 KiB
HTML
<!-- Generated by pkgdown: do not edit by hand -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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>Add a shaded area to a chart — add-shade • apexcharter</title>
|
|
|
|
|
|
<!-- jquery -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
|
|
|
|
|
<!-- Bootstrap -->
|
|
<link href="../css/theme.css" rel="stylesheet">
|
|
<style>
|
|
#pkgdown-sidebar {
|
|
z-index: 100;
|
|
background: #FFF;
|
|
}
|
|
</style>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4=" crossorigin="anonymous"></script>
|
|
|
|
|
|
<!-- Font -->
|
|
<link href="../css/montserrat.css" rel="stylesheet">
|
|
<style>body {font-family: 'Montserrat', sans-serif;}</style>
|
|
|
|
|
|
<!-- bootstrap-toc -->
|
|
<link rel="stylesheet" href="../bootstrap-toc.css">
|
|
<script src="../bootstrap-toc.js"></script>
|
|
|
|
<!-- Font Awesome icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous" />
|
|
|
|
<!-- clipboard.js -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script>
|
|
|
|
<!-- headroom.js -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script>
|
|
|
|
<!-- pkgdown -->
|
|
<link href="../pkgdown.css" rel="stylesheet">
|
|
<script src="../pkgdown.js"></script>
|
|
|
|
|
|
<!-- Particles -->
|
|
<script src="../js/particles.min.js"></script>
|
|
|
|
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.contents {
|
|
opacity: 1;
|
|
background-color: #FFF;
|
|
z-index: 1;
|
|
}
|
|
|
|
#sidebar {
|
|
opacity: 1;
|
|
background-color: #FFF;
|
|
z-index: 1;
|
|
}
|
|
|
|
footer {
|
|
z-index: 1;
|
|
}
|
|
|
|
#particles {
|
|
position: fixed;
|
|
display: block;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
.background {
|
|
position: absolute;
|
|
display: block;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
<!-- Font Awesome icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css" integrity="sha256-nAmazAk6vS34Xqo0BSrTb+abbtFlgsFK7NKSi6o7Y78=" crossorigin="anonymous" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/v4-shims.min.css" integrity="sha256-6qHlizsOWFskGlwVOKuns+D1nB6ssZrHQrNj1wGplHc=" crossorigin="anonymous" />
|
|
|
|
<!-- clipboard.js -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" integrity="sha256-FiZwavyI2V6+EXO1U+xzLG3IKldpiTFf3153ea9zikQ=" crossorigin="anonymous"></script>
|
|
|
|
<!-- headroom.js -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.4/headroom.min.js" integrity="sha256-DJFC1kqIhelURkuza0AvYal5RxMtpzLjFhsnVIeuk+U=" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.4/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script>
|
|
|
|
<!-- pkgdown -->
|
|
<link href="../pkgdown.css" rel="stylesheet">
|
|
<script src="../pkgdown.js"></script>
|
|
|
|
|
|
|
|
|
|
<meta property="og:title" content="Add a shaded area to a chart — add-shade" />
|
|
<meta property="og:description" content="add_shade() allow to add a shaded area on specified range,
|
|
add_shade_weekend() add a shadow on every week-end." />
|
|
<meta name="twitter:card" content="summary" />
|
|
|
|
|
|
|
|
|
|
<!-- mathjax -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script>
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
|
|
|
|
|
|
</head>
|
|
|
|
<body id="body">
|
|
<div class="container template-reference-topic">
|
|
<header>
|
|
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
|
|
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;">
|
|
<a class="navbar-link" href="../index.html">apexcharter</a>
|
|
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.4.940</span>
|
|
</span>
|
|
<span class="navbar-brand hidden-md hidden-lg">
|
|
<a class="navbar-link" href="../index.html">apexcharter</a>
|
|
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.4.940</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div id="navbar" class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li>
|
|
<a href="../index.html">
|
|
<span class="fas fa fas fa-home fa-lg"></span>
|
|
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="../articles/apexcharter.html">Get started</a>
|
|
</li>
|
|
<li>
|
|
<a href="../reference/index.html">Reference</a>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
|
|
Articles
|
|
|
|
<span class="caret"></span>
|
|
</a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li>
|
|
<a href="../articles/articles/advanced-configuration.html">Advanced configuration examples</a>
|
|
</li>
|
|
<li>
|
|
<a href="../articles/chart-options.html">Chart options</a>
|
|
</li>
|
|
<li>
|
|
<a href="../articles/shiny-integration.html">Shiny integration</a>
|
|
</li>
|
|
<li>
|
|
<a href="../articles/spark-box.html">Spark boxes</a>
|
|
</li>
|
|
<li>
|
|
<a href="../articles/sync-charts.html">Syncing charts</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="../news/index.html">Changelog</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li>
|
|
<a href="https://github.com/dreamRs/apexcharter/">
|
|
<span class="fab fa fab fa-github fa-lg"></span>
|
|
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
</div><!--/.nav-collapse -->
|
|
</div><!--/.container -->
|
|
</div><!--/.navbar -->
|
|
|
|
|
|
|
|
</header>
|
|
|
|
<div class="row">
|
|
<div class="col-md-9 contents">
|
|
<div class="page-header">
|
|
<h1>Add a shaded area to a chart</h1>
|
|
<small class="dont-index">Source: <a href='https://github.com/dreamRs/apexcharter/blob/master/R/annotations.R'><code>R/annotations.R</code></a></small>
|
|
<div class="hidden name"><code>add-shade.Rd</code></div>
|
|
</div>
|
|
|
|
<div class="ref-description">
|
|
<p><code>add_shade()</code> allow to add a shaded area on specified range,
|
|
<code>add_shade_weekend()</code> add a shadow on every week-end.</p>
|
|
</div>
|
|
|
|
<pre class="usage"><span class='fu'>add_shade</span>(<span class='no'>ax</span>, <span class='no'>from</span>, <span class='no'>to</span>, <span class='kw'>color</span> <span class='kw'>=</span> <span class='st'>"#848484"</span>, <span class='kw'>opacity</span> <span class='kw'>=</span> <span class='fl'>0.2</span>, <span class='kw'>label</span> <span class='kw'>=</span> <span class='kw'>NULL</span>, <span class='no'>...</span>)
|
|
|
|
<span class='fu'>add_shade_weekend</span>(<span class='no'>ax</span>, <span class='kw'>color</span> <span class='kw'>=</span> <span class='st'>"#848484"</span>, <span class='kw'>opacity</span> <span class='kw'>=</span> <span class='fl'>0.2</span>, <span class='kw'>label</span> <span class='kw'>=</span> <span class='kw'>NULL</span>, <span class='no'>...</span>)</pre>
|
|
|
|
<h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2>
|
|
<table class="ref-arguments">
|
|
<colgroup><col class="name" /><col class="desc" /></colgroup>
|
|
<tr>
|
|
<th>ax</th>
|
|
<td><p>An <code>apexcharts</code> <code>htmlwidget</code> object.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>from</th>
|
|
<td><p>Vector of position to start shadow.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>to</th>
|
|
<td><p>Vector of position to end shadow.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>color</th>
|
|
<td><p>Color of the shadow.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>opacity</th>
|
|
<td><p>Opacity of the shadow.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>label</th>
|
|
<td><p>Add a label to the shade, use a <code>character</code>
|
|
or see <code><a href='label.html'>label</a></code> for more controls.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>...</th>
|
|
<td><p>Additional arguments, see
|
|
<a href='https://apexcharts.com/docs/options/annotations/'>https://apexcharts.com/docs/options/annotations/</a> for possible options.</p></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h2 class="hasAnchor" id="value"><a class="anchor" href="#value"></a>Value</h2>
|
|
|
|
<p>An <code>apexcharts</code> <code>htmlwidget</code> object.</p>
|
|
<h2 class="hasAnchor" id="note"><a class="anchor" href="#note"></a>Note</h2>
|
|
|
|
<p><code>add_shade_weekend</code> only works if variable
|
|
used for x-axis is of class <code>Date</code> or <code>POSIXt</code>.</p>
|
|
|
|
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
|
|
<pre class="examples"><div class='input'>
|
|
<span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='no'>apexcharter</span>)
|
|
<span class='fu'><a href='https://rdrr.io/r/utils/data.html'>data</a></span>(<span class='st'>"consumption"</span>)
|
|
|
|
<span class='co'># specify from and to date</span>
|
|
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='no'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='no'>date</span>, <span class='no'>value</span>, <span class='kw'>group</span> <span class='kw'>=</span> <span class='no'>type</span>), <span class='st'>"spline"</span>) <span class='kw'>%>%</span>
|
|
<span class='fu'>add_shade</span>(<span class='kw'>from</span> <span class='kw'>=</span> <span class='st'>"2020-01-06"</span>, <span class='kw'>to</span> <span class='kw'>=</span> <span class='st'>"2020-01-20"</span>)
|
|
|
|
<span class='co'># you can add several shadows</span>
|
|
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='no'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='no'>date</span>, <span class='no'>value</span>, <span class='kw'>group</span> <span class='kw'>=</span> <span class='no'>type</span>), <span class='st'>"spline"</span>) <span class='kw'>%>%</span>
|
|
<span class='fu'>add_shade</span>(<span class='kw'>from</span> <span class='kw'>=</span> <span class='st'>"2020-01-06"</span>, <span class='kw'>to</span> <span class='kw'>=</span> <span class='st'>"2020-01-20"</span>) <span class='kw'>%>%</span>
|
|
<span class='fu'>add_shade</span>(<span class='kw'>from</span> <span class='kw'>=</span> <span class='st'>"2020-02-04"</span>, <span class='kw'>to</span> <span class='kw'>=</span> <span class='st'>"2020-02-10"</span>)
|
|
|
|
<span class='co'># or use a vector</span>
|
|
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='no'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='no'>date</span>, <span class='no'>value</span>, <span class='kw'>group</span> <span class='kw'>=</span> <span class='no'>type</span>), <span class='st'>"spline"</span>) <span class='kw'>%>%</span>
|
|
<span class='fu'>add_shade</span>(
|
|
<span class='kw'>from</span> <span class='kw'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='st'>"2020-01-06"</span>, <span class='st'>"2020-02-04"</span>),
|
|
<span class='kw'>to</span> <span class='kw'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='st'>"2020-01-20"</span>, <span class='st'>"2020-02-10"</span>)
|
|
)
|
|
|
|
|
|
<span class='co'># Add a label</span>
|
|
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='no'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='no'>date</span>, <span class='no'>value</span>, <span class='kw'>group</span> <span class='kw'>=</span> <span class='no'>type</span>), <span class='st'>"spline"</span>) <span class='kw'>%>%</span>
|
|
<span class='fu'>add_shade</span>(
|
|
<span class='kw'>from</span> <span class='kw'>=</span> <span class='st'>"2020-01-06"</span>, <span class='kw'>to</span> <span class='kw'>=</span> <span class='st'>"2020-01-20"</span>,
|
|
<span class='kw'>label</span> <span class='kw'>=</span> <span class='st'>"interesting period"</span>
|
|
)
|
|
|
|
<span class='co'># add label with more options</span>
|
|
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='no'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='no'>date</span>, <span class='no'>value</span>, <span class='kw'>group</span> <span class='kw'>=</span> <span class='no'>type</span>), <span class='st'>"spline"</span>) <span class='kw'>%>%</span>
|
|
<span class='fu'>add_shade</span>(
|
|
<span class='kw'>from</span> <span class='kw'>=</span> <span class='st'>"2020-01-06"</span>, <span class='kw'>to</span> <span class='kw'>=</span> <span class='st'>"2020-01-20"</span>,
|
|
<span class='kw'>color</span> <span class='kw'>=</span> <span class='st'>"firebrick"</span>,
|
|
<span class='kw'>label</span> <span class='kw'>=</span> <span class='fu'><a href='label.html'>label</a></span>(
|
|
<span class='kw'>text</span> <span class='kw'>=</span> <span class='st'>"something happened"</span>,
|
|
<span class='kw'>background</span> <span class='kw'>=</span> <span class='st'>"firebrick"</span>,
|
|
<span class='kw'>color</span> <span class='kw'>=</span> <span class='st'>"white"</span>,
|
|
<span class='kw'>fontWeight</span> <span class='kw'>=</span> <span class='st'>"bold"</span>,
|
|
<span class='kw'>padding</span> <span class='kw'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/c.html'>c</a></span>(<span class='fl'>3</span>, <span class='fl'>5</span>, <span class='fl'>3</span>, <span class='fl'>5</span>)
|
|
)
|
|
)
|
|
|
|
|
|
<span class='co'># automatically add shadow on week-ends</span>
|
|
<span class='fu'><a href='apex.html'>apex</a></span>(<span class='no'>consumption</span>, <span class='fu'><a href='apexcharter-exports.html'>aes</a></span>(<span class='no'>date</span>, <span class='no'>value</span>, <span class='kw'>group</span> <span class='kw'>=</span> <span class='no'>type</span>), <span class='st'>"spline"</span>) <span class='kw'>%>%</span>
|
|
<span class='fu'>add_shade_weekend</span>()</div></pre>
|
|
</div>
|
|
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
|
|
<h2>Contents</h2>
|
|
<ul class="nav nav-pills nav-stacked">
|
|
<li><a href="#arguments">Arguments</a></li>
|
|
<li><a href="#value">Value</a></li>
|
|
<li><a href="#note">Note</a></li>
|
|
<li><a href="#examples">Examples</a></li>
|
|
</ul>
|
|
|
|
</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.5.1.9000.</p>
|
|
</div>
|
|
|
|
</footer>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="particles"></div>
|
|
|
|
<script>
|
|
window.onload = function() {
|
|
var config = {"particles":{"number":{"value":90,"density":{"enable":true,"value_area":1200}},"color":{"value":"#112446"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.8,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#112446","opacity":0.6,"width":1},"move":{"enable":true,"speed":5,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true}},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}},"retina_detect":true} ;
|
|
particlesJS("particles", config);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|