403 lines
17 KiB
HTML
403 lines
17 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>Events options — events_opts • 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="Events options — events_opts" />
|
|
<meta property="og:description" content="Events options" />
|
|
<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.5.910</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.5.910</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>Events options</h1>
|
|
<small class="dont-index">Source: <a href='https://github.com/dreamRs/apexcharter/blob/master/R/apex-options.R'><code>R/apex-options.R</code></a></small>
|
|
<div class="hidden name"><code>events_opts.Rd</code></div>
|
|
</div>
|
|
|
|
<div class="ref-description">
|
|
<p>Events options</p>
|
|
</div>
|
|
|
|
<pre class="usage"><span class='fu'>events_opts</span>(
|
|
<span class='kw'>click</span> <span class='kw'>=</span> <span class='kw'>NULL</span>,
|
|
<span class='kw'>beforeMount</span> <span class='kw'>=</span> <span class='kw'>NULL</span>,
|
|
<span class='kw'>mounted</span> <span class='kw'>=</span> <span class='kw'>NULL</span>,
|
|
<span class='kw'>updated</span> <span class='kw'>=</span> <span class='kw'>NULL</span>,
|
|
<span class='kw'>legendClick</span> <span class='kw'>=</span> <span class='kw'>NULL</span>,
|
|
<span class='kw'>selection</span> <span class='kw'>=</span> <span class='kw'>NULL</span>,
|
|
<span class='kw'>dataPointSelection</span> <span class='kw'>=</span> <span class='kw'>NULL</span>,
|
|
<span class='kw'>dataPointMouseEnter</span> <span class='kw'>=</span> <span class='kw'>NULL</span>,
|
|
<span class='kw'>dataPointMouseLeave</span> <span class='kw'>=</span> <span class='kw'>NULL</span>,
|
|
<span class='kw'>beforeZoom</span> <span class='kw'>=</span> <span class='kw'>NULL</span>,
|
|
<span class='kw'>zoomed</span> <span class='kw'>=</span> <span class='kw'>NULL</span>,
|
|
<span class='kw'>scrolled</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>click</th>
|
|
<td><p>Fires when user clicks on any area of the chart.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>beforeMount</th>
|
|
<td><p>Fires before the chart has been drawn on screen.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>mounted</th>
|
|
<td><p>Fires after the chart has been drawn on screen.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>updated</th>
|
|
<td><p>Fires when the chart has been dynamically updated.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>legendClick</th>
|
|
<td><p>Fires when user clicks on legend.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>selection</th>
|
|
<td><p>Fires when user selects rect using the selection tool.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>dataPointSelection</th>
|
|
<td><p>Fires when user clicks on a datapoint (bar/column/marker/bubble/donut-slice).</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>dataPointMouseEnter</th>
|
|
<td><p>Fires when user's mouse enter on a datapoint (bar/column/marker/bubble/donut-slice).</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>dataPointMouseLeave</th>
|
|
<td><p>MouseLeave event for a datapoint (bar/column/marker/bubble/donut-slice).</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>beforeZoom</th>
|
|
<td><p>This function, if defined, runs just before zooming in/out of the chart allowing you to set a custom range for zooming in/out.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>zoomed</th>
|
|
<td><p>Fires when user zooms in/out the chart using either the selection zooming tool or zoom in/out buttons.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>scrolled</th>
|
|
<td><p>Fires when user scrolls using the pan tool.</p></td>
|
|
</tr>
|
|
<tr>
|
|
<th>...</th>
|
|
<td><p>Additional parameters.</p></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h2 class="hasAnchor" id="value"><a class="anchor" href="#value"></a>Value</h2>
|
|
|
|
<p>A <code>list</code> of options that can be used in <code><a href='ax_chart.html'>ax_chart</a></code>.</p>
|
|
<h2 class="hasAnchor" id="note"><a class="anchor" href="#note"></a>Note</h2>
|
|
|
|
<p>All arguments should be JavaScript function defined with <code><a href='https://rdrr.io/pkg/htmlwidgets/man/JS.html'>htmlwidgets::JS</a></code>.</p>
|
|
<p>See <a href='https://apexcharts.com/docs/options/chart/events/'>https://apexcharts.com/docs/options/chart/events/</a>.</p>
|
|
|
|
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
|
|
<pre class="examples"><div class='input'>
|
|
<span class='kw'>if</span> (<span class='fu'><a href='https://rdrr.io/r/base/interactive.html'>interactive</a></span>()) {
|
|
<span class='fu'><a href='https://rdrr.io/r/base/library.html'>library</a></span>(<span class='no'>shiny</span>)
|
|
|
|
<span class='no'>ui</span> <span class='kw'><-</span> <span class='fu'><a href='https://rdrr.io/pkg/shiny/man/fluidPage.html'>fluidPage</a></span>(
|
|
<span class='fu'><a href='https://rdrr.io/pkg/shiny/man/fluidPage.html'>fluidRow</a></span>(
|
|
<span class='fu'><a href='https://rdrr.io/pkg/shiny/man/column.html'>column</a></span>(
|
|
<span class='kw'>width</span> <span class='kw'>=</span> <span class='fl'>8</span>, <span class='kw'>offset</span> <span class='kw'>=</span> <span class='fl'>2</span>,
|
|
<span class='no'>tags</span>$<span class='fu'><a href='https://rdrr.io/pkg/shiny/man/reexports.html'>h2</a></span>(<span class='st'>"Apexchart in Shiny"</span>),
|
|
<span class='fu'><a href='apexcharter-shiny.html'>apexchartOutput</a></span>(<span class='st'>"chart"</span>),
|
|
<span class='fu'><a href='https://rdrr.io/pkg/shiny/man/textOutput.html'>verbatimTextOutput</a></span>(<span class='kw'>outputId</span> <span class='kw'>=</span> <span class='st'>"res_click"</span>)
|
|
)
|
|
)
|
|
)
|
|
|
|
<span class='no'>server</span> <span class='kw'><-</span> <span class='kw'>function</span>(<span class='no'>input</span>, <span class='no'>output</span>, <span class='no'>session</span>) {
|
|
|
|
<span class='no'>output</span>$<span class='no'>chart</span> <span class='kw'><-</span> <span class='fu'><a href='apexcharter-shiny.html'>renderApexchart</a></span>({
|
|
<span class='fu'><a href='apexchart.html'>apexchart</a></span>() <span class='kw'>%>%</span>
|
|
<span class='fu'><a href='ax_chart.html'>ax_chart</a></span>(
|
|
<span class='kw'>type</span> <span class='kw'>=</span> <span class='st'>"bar"</span>,
|
|
<span class='kw'>events</span> <span class='kw'>=</span> <span class='fu'>events_opts</span>(
|
|
<span class='kw'>dataPointSelection</span> <span class='kw'>=</span> <span class='fu'><a href='apexcharter-exports.html'>JS</a></span>(
|
|
<span class='st'>"function(event, chartContext, config) {
|
|
Shiny.setInputValue('click', config.selectedDataPoints)
|
|
}"</span>
|
|
)
|
|
)
|
|
) <span class='kw'>%>%</span>
|
|
<span class='fu'><a href='ax-series.html'>ax_series</a></span>(
|
|
<span class='fu'><a href='https://rdrr.io/r/base/list.html'>list</a></span>(
|
|
<span class='kw'>name</span> <span class='kw'>=</span> <span class='st'>"Example"</span>,
|
|
<span class='kw'>data</span> <span class='kw'>=</span> <span class='fu'><a href='https://rdrr.io/r/base/sample.html'>sample</a></span>(<span class='fl'>1</span>:<span class='fl'>100</span>, <span class='fl'>5</span>)
|
|
)
|
|
) <span class='kw'>%>%</span>
|
|
<span class='fu'><a href='ax_xaxis.html'>ax_xaxis</a></span>(
|
|
<span class='kw'>categories</span> <span class='kw'>=</span> <span class='no'>LETTERS</span>[<span class='fl'>1</span>:<span class='fl'>5</span>]
|
|
)
|
|
})
|
|
|
|
<span class='no'>output</span>$<span class='no'>res_click</span> <span class='kw'><-</span> <span class='fu'><a href='https://rdrr.io/pkg/shiny/man/renderPrint.html'>renderPrint</a></span>({
|
|
<span class='no'>input</span>$<span class='no'>click</span>
|
|
})
|
|
}
|
|
|
|
<span class='fu'><a href='https://rdrr.io/pkg/shiny/man/shinyApp.html'>shinyApp</a></span>(<span class='no'>ui</span>, <span class='no'>server</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>
|
|
|
|
|