<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4="crossorigin="anonymous"></script><!-- Font --><linkhref="../css/montserrat.css"rel="stylesheet">
<scriptsrc="../bootstrap-toc.js"></script><!-- Font Awesome icons --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk="crossorigin="anonymous">
<!-- Font Awesome icons --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css"integrity="sha256-nAmazAk6vS34Xqo0BSrTb+abbtFlgsFK7NKSi6o7Y78="crossorigin="anonymous">
<ahref="#create-and-update-or-destroy-and-re-create"class="anchor"></a>Create and update (or destroy and re-create)</h3>
<p>When a graph has been generated in Shiny, if the values change (via a reactive function), the graph is <em>not regenerated</em>, only the data is <em>updated</em>. If you have changed specific options in the graphic (such as maximum y axis value, chart’s title, …) these will not be updated. This behavior can be controlled with <code>auto_update</code> argument (available in <code><ahref="../reference/apexchart.html">apexchart()</a></code> and <code><ahref="../reference/apex.html">apex()</a></code>) :</p>
<p>By default, <code>auto_update</code> is <code>TRUE</code> :</p>
<p>Be sure to use <code><ahref="https://shiny.rstudio.com/reference/shiny/latest/isolate.html">shiny::isolate()</a></code> to block any reactivity in <code>renderApexchart</code> function and to set <code>auto_update</code> to FALSE to prevent updating twice. Then you can use in an observe function (or any reactive function) <code><ahref="../reference/apexchartProxy.html">apexchartProxy()</a></code> with the output id to get the chart instance and <code><ahref="../reference/ax_proxy_series.html">ax_proxy_series()</a></code> to update data.</p>
<p>Click on a chart to select a data point and retrieve value server side with <code><ahref="../reference/set_input_click.html">set_input_click()</a></code> :</p>
value = <spanclass="fu"><ahref="https://rdrr.io/r/base/sample.html">sample</a></span>(<spanclass="fl">1</span><spanclass="op">:</span><spanclass="fl">100</span>, <spanclass="fl">12</span>)
<scripttype="application/json"data-for="htmlwidget-49bfee35481669ab2882">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"value","type":"bar","data":[{"x":"Jan","y":43},{"x":"Feb","y":11},{"x":"Mar","y":92},{"x":"Apr","y":79},{"x":"May","y":37},{"x":"Jun","y":90},{"x":"Jul","y":49},{"x":"Aug","y":100},{"x":"Sep","y":54},{"x":"Oct","y":40},{"x":"Nov","y":94},{"x":"Dec","y":85}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"title":{"text":"Click a bar:"},"states":{"active":{"allowMultipleDataPointsSelection":false,"filter":{"type":"darken","value":0.35}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"shinyEvents":{"click":{"inputId":"click"}}},"evals":[],"jsHooks":[]}</script><p>Value server-side will be available through <code>input$click</code>.</p>
<p>Depending on the type of graphic, you can retrieve :</p>
<ul>
<li>
<strong>bar and column:</strong> category (x-axis).</li>
<li>
<strong>pie and donut:</strong> label.</li>
<li>
<strong>time-series:</strong> retrieve x-axis value, you have to display markers with size > 0 and set tooltip’s options <code>intersect = TRUE</code> and <code>shared = FALSE</code>.</li>
value = <spanclass="fu"><ahref="https://rdrr.io/r/base/sample.html">sample</a></span>(<spanclass="fl">1</span><spanclass="op">:</span><spanclass="fl">100</span>, <spanclass="fl">12</span>)
<scripttype="application/json"data-for="htmlwidget-7f8b52bc8aa3029f7ccf">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"value","type":"bar","data":[{"x":"Jan","y":74},{"x":"Feb","y":64},{"x":"Mar","y":54},{"x":"Apr","y":73},{"x":"May","y":23},{"x":"Jun","y":44},{"x":"Jul","y":41},{"x":"Aug","y":3},{"x":"Sep","y":12},{"x":"Oct","y":83},{"x":"Nov","y":61},{"x":"Dec","y":11}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"tooltip":{"shared":true,"followCursor":true},"yaxis":{"labels":{"style":{"colors":"#848484"}}},"xaxis":{"labels":{"style":{"colors":"#848484"}}},"title":{"text":"Click several bars:"},"states":{"active":{"allowMultipleDataPointsSelection":true,"filter":{"type":"darken","value":0.1}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"shinyEvents":{"click":{"inputId":"click"}}},"evals":[],"jsHooks":[]}</script><p>More examples are available with:</p>
<p>Here values for <code>y</code> are <code>NULL</code> because zoom is only possible on x-axis, but for a scatter chart for example you can zoom on both axis.</p>
<spanclass="fu"><ahref="../reference/apex.html">apex</a></span>(<spanclass="kw">iris</span>, <spanclass="fu"><ahref="../reference/apexcharter-exports.html">aes</a></span>(<spanclass="kw">Sepal.Length</span>, <spanclass="kw">Sepal.Width</span>), type = <spanclass="st">"scatter"</span>, height = <spanclass="st">"250px"</span>) <spanclass="op">%>%</span>
<spanclass="fu"><ahref="../reference/set_input_selection.html">set_input_selection</a></span>(<spanclass="st">"selection_scatter"</span>, type = <spanclass="st">"xy"</span>)
<scripttype="application/json"data-for="htmlwidget-b2e38575528d60328e26">{"x":{"ax_opts":{"chart":{"type":"scatter","selection":{"enabled":true,"type":"xy","fill":{"color":"#24292e","opacity":0.1},"stroke":{"width":1,"dashArray":3,"color":"#24292e","opacity":0.4}},"toolbar":{"autoSelected":"selection"}},"series":[{"name":"Sepal.Width","type":"scatter","data":[{"x":5.1,"y":3.5},{"x":4.9,"y":3},{"x":4.7,"y":3.2},{"x":4.6,"y":3.1},{"x":5,"y":3.6},{"x":5.4,"y":3.9},{"x":4.6,"y":3.4},{"x":5,"y":3.4},{"x":4.4,"y":2.9},{"x":4.9,"y":3.1},{"x":5.4,"y":3.7},{"x":4.8,"y":3.4},{"x":4.8,"y":3},{"x":4.3,"y":3},{"x":5.8,"y":4},{"x":5.7,"y":4.4},{"x":5.4,"y":3.9},{"x":5.1,"y":3.5},{"x":5.7,"y":3.8},{"x":5.1,"y":3.8},{"x":5.4,"y":3.4},{"x":5.1,"y":3.7},{"x":4.6,"y":3.6},{"x":5.1,"y":3.3},{"x":4.8,"y":3.4},{"x":5,"y":3},{"x":5,"y":3.4},{"x":5.2,"y":3.5},{"x":5.2,"y":3.4},{"x":4.7,"y":3.2},{"x":4.8,"y":3.1},{"x":5.4,"y":3.4},{"x":5.2,"y":4.1},{"x":5.5,"y":4.2},{"x":4.9,"y":3.1},{"x":5,"y":3.2},{"x":5.5,"y":3.5},{"x":4.9,"y":3.6},{"x":4.4,"y":3},{"x":5.1,"y":3.4},{"x":5,"y":3.5},{"x":4.5,"y":2.3},{"x":4.4,"y":3.2},{"x":5,"y":3.5},{"x":5.1,"y":3.8},{"x":4.8,"y":3},{"x":5.1,"y":3.8},{"x":4.6,"y":3.2},{"x":5.3,"y":3.7},{"x":5,"y":3.3},{"x":7,"y":3.2},{"x":6.4,"y":3.2},{"x":6.9,"y":3.1},{"x":5.5,"y":2.3},{"x":6.5,"y":2.8},{"x":5.7,"y":2.8},{"x":6.3,"y":3.3},{"x":4.9,"y":2.4},{"x":6.6,"y":2.9},{"x":5.2,"y":2.7},{"x":5,"y":2},{"x":5.9,"y":3},{"x":6,"y":2.2},{"x":6.1,"y":2.9},{"x":5.6,"y":2.9},{"x":6.7,"y":3.1},{"x":5.6,"y":3},{"x":5.8,"y":2.7},{"x":6.2,"y":2.2},{"x":5.6,"y":2.5},{"x":5.9,"y":3.2},{"x":6.1,"y":2.8},{"x":6.3,"y":2.5},{"x":6.1,"y":2.8},{"x":6.4,"y":2.9},{"x":6.6,"y":3},{"x":6.8,"y":2.8},{"x":6.7,"y":3},{"x":6,"y":2.9},{"x":5.7,"y":2.6},{"x":5.5,"y":2.4},{"x":5.5,"y":2.4},{"x":5.8,"y":2.7},{"x":6,"y":2.7},{"x":5.4,"y":3},{"x":6,"y":3.4},{"x":6.7,"y":3.1},{"x":6.3,"y":2.3},{"x":5.6,"y":3},{"x":5.5,"y":2.5},{"x":5.5,"y":2.6},{"x":6.1,"y":3},{"x":5.8,"y":2.6},{"x":5,"y":2.3},{"x":5.6,"y":2.7},{"x":5.7,"y":3},{"x":5.7,"y":2.9},{"x":6.2,"y":2.9},{"x":5.1,"y":2.5},{"x":5.7,"y":2.8},{"x":6.3,"y":3.3},{"x":5.8,"y":2.7},{"x":7.1,"y":3},{"x":6.3,"y":2.9},{"x":6.5,"y":3},{"x":7.6,"y":3},{"x":4.9,"y":2.5},{"x":7.3,"y":2.9},{"x":6.7,"y":2.5},{"x":7.2,"y":3.6},{"x":6.5,"y":3.2},{"x":6.4,"y":2.7},{"x":6.8,"y":3},{"x":5.7,"y":2.5},{"x":5.8,"y":2.8},{"x":6.4,"y":3.2},{"x":6.5,"y":3},{"x":7.7,"y":3.8},{"x":7.7,"y":2.6},{"x":6,"y":2.2},{"x":6.9,"y":3.2},{"x":5.6,"y":2.8},{"x":7.7,"y":2.8},{"x":6.3,"y":2.7},{"x":6.7,"y":3.3},{"x":7.2,"y":3.2},{"x":6.2,"y":2.8},{"x":6.1,"y":3},{"x":6.4,"y":2.8},{"x":7.2,"y":3},{"x":7.4,"y":2.8},{"x":7.9,"y":3.8},{"x":6.4,"y":2.8},{"x":6.3,"y":2.8},{"x":6.1,"y":2.6},{"x":7.7,"y":3},{"x":6.3,"y":3.4},{"x":6.4,"y":3.1},{"x":6,"y":3},{"x":6.9,"y":3.1},{"x":6.7,"y":3.1},{"x":6.9,"y":3.1},{"x":5.8,"y":2.7},{"x":6.8,"y":3.2},{"x":6.7,"y":3.3},{"x":6.7,"y":3},{"x":6.3,"y":2.5},{"x":6.5,"y":3},{"x":6.2,"y":3.4},{"x":5.9,"y":3}]}],"dataLabels":{"enabled":false},"xaxis":{"type":"numeric","min":4,"max":8,"crosshairs":{"show":true,"stroke":{"dashArray":0}},"labels":{"style":{"colors":"#848484"}}},"yaxis":{"min":2,"max":4.5,"decimalsInFloat":3,"tooltip":{"enabled":true},"labels":{"style":{"colors":"#848484"}}},"grid":{"xaxis":{"lines":{"show":true}}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":true,"update_synced_charts":false},"sparkbox":false,"xaxis":{"min":4.3,"max":7.9},"shinyEvents":{"selection":{"inputId":"selection_scatter","type":"xy"}}},"evals":[],"jsHooks":[]}</script><p>In this case, input value will look like this:</p>
<p>Developed by <ahref="https://twitter.com/_pvictorr"><imgsrc="https://pbs.twimg.com/profile_images/844237339404722177/E1U61aM8_normal.jpg"> Victor Perrier</a>, <ahref="https://twitter.com/_mfaan"><imgsrc="https://pbs.twimg.com/profile_images/912313931326218240/o1-wvA18_normal.jpg"> Fanny Meyer</a>.</p>
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} ;