apexcharter/docs/reference/events_opts.html

287 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- 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.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="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>
<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">
<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 &amp; axis</a>
</li>
<li>
<a href="../articles/lines.html">Options &amp; 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>
<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 users 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://www.rdocumentation.org/packages/htmlwidgets/topics/JS'>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://www.rdocumentation.org/packages/base/topics/interactive'>interactive</a></span>()) {
<span class='fu'><a href='https://www.rdocumentation.org/packages/base/topics/library'>library</a></span>(<span class='no'>shiny</span>)
<span class='no'>ui</span> <span class='kw'>&lt;-</span> <span class='fu'><a href='https://www.rdocumentation.org/packages/shiny/topics/fluidPage'>fluidPage</a></span>(
<span class='fu'><a href='https://www.rdocumentation.org/packages/shiny/topics/fluidPage'>fluidRow</a></span>(
<span class='fu'><a href='https://www.rdocumentation.org/packages/shiny/topics/column'>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://www.rdocumentation.org/packages/shiny/topics/builder'>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://www.rdocumentation.org/packages/shiny/topics/verbatimTextOutput'>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'>&lt;-</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'>&lt;-</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'>%&gt;%</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'>%&gt;%</span>
<span class='fu'><a href='ax-series.html'>ax_series</a></span>(
<span class='fu'><a href='https://www.rdocumentation.org/packages/base/topics/list'>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://www.rdocumentation.org/packages/base/topics/sample'>sample</a></span>(<span class='fl'>1</span>:<span class='fl'>100</span>, <span class='fl'>5</span>)
)
) <span class='kw'>%&gt;%</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'>&lt;-</span> <span class='fu'><a href='https://www.rdocumentation.org/packages/shiny/topics/renderPrint'>renderPrint</a></span>({
<span class='no'>input</span>$<span class='no'>click</span>
})
}
<span class='fu'><a href='https://www.rdocumentation.org/packages/shiny/topics/shinyApp'>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.3.0.</p>
</div>
</footer>
</div>
</body>
</html>