2020-04-16 17:09:40 +02:00
<!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 > Spark boxes • apexcharter< / title >
2020-05-27 16:29:28 +02:00
<!-- 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" >
2020-04-16 17:09:40 +02:00
< style > body { font-family : 'Montserrat' , sans-serif ; } < / style >
2020-05-27 16:29:28 +02:00
<!-- 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 >
2020-04-16 17:09:40 +02:00
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 = "Spark boxes" >
< meta property = "og:description" content = "apexcharter" >
< 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-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 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 >
2020-06-13 13:06:58 +02:00
< span class = "version label label-default" data-toggle = "tooltip" data-placement = "bottom" title = "Released version" > 0.1.4.960< / span >
2020-04-16 17:09:40 +02:00
< / span >
< span class = "navbar-brand hidden-md hidden-lg" >
< a class = "navbar-link" href = "../index.html" > apexcharter< / a >
2020-06-13 13:06:58 +02:00
< span class = "version label label-default" data-toggle = "tooltip" data-placement = "bottom" title = "Released version" > 0.1.4.960< / span >
2020-04-16 17:09:40 +02:00
< / 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 >
2020-05-27 16:29:28 +02:00
< a href = "../articles/chart-options.html" > Chart options< / a >
2020-04-16 17:09:40 +02:00
< / 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 -->
2020-06-13 13:06:58 +02:00
< / header > < script src = "spark-box_files/htmlwidgets-1.5.1/htmlwidgets.js" > < / script > < script src = "spark-box_files/apexcharts-3.19.2/apexcharts.min.js" > < / script > < link href = "spark-box_files/apexcharter-css-0.1.0/apexcharter.css" rel = "stylesheet" >
< script src = "spark-box_files/d3-format-1.4.2/d3-format.min.js" > < / script > < script src = "spark-box_files/apexcharter-binding-0.1.4.960/apexcharter.js" > < / script > < div class = "row" >
2020-04-16 17:09:40 +02:00
< div class = "col-md-9 contents" >
< div class = "page-header toc-ignore" >
< h1 > Spark boxes< / h1 >
< small class = "dont-index" > Source: < a href = "https://github.com/dreamRs/apexcharter/blob/master/vignettes/spark-box.Rmd" > < code > vignettes/spark-box.Rmd< / code > < / a > < / small >
< div class = "hidden name" > < code > spark-box.Rmd< / code > < / div >
< / div >
< div class = "sourceCode" id = "cb1" > < html > < body > < pre class = "r" > < span class = "fu" > < a href = "https://rdrr.io/r/base/library.html" > library< / a > < / span > (< span class = "no" > apexcharter< / span > )
< span class = "no" > spark_data< / span > < span class = "kw" > < -< / span > < span class = "fu" > < a href = "https://rdrr.io/r/base/data.frame.html" > data.frame< / a > < / span > (
< span class = "kw" > date< / span > < span class = "kw" > =< / span > < span class = "fu" > < a href = "https://rdrr.io/r/base/Sys.time.html" > Sys.Date< / a > < / span > () + < span class = "fl" > 1< / span > :< span class = "fl" > 20< / span > ,
< span class = "kw" > var1< / span > < span class = "kw" > =< / span > < span class = "fu" > < a href = "https://rdrr.io/r/base/Round.html" > round< / a > < / span > (< span class = "fu" > < a href = "https://rdrr.io/r/stats/Normal.html" > rnorm< / a > < / span > (< span class = "fl" > 20< / span > , < span class = "fl" > 50< / span > , < span class = "fl" > 10< / span > )),
< span class = "kw" > var2< / span > < span class = "kw" > =< / span > < span class = "fu" > < a href = "https://rdrr.io/r/base/Round.html" > round< / a > < / span > (< span class = "fu" > < a href = "https://rdrr.io/r/stats/Normal.html" > rnorm< / a > < / span > (< span class = "fl" > 20< / span > , < span class = "fl" > 50< / span > , < span class = "fl" > 10< / span > )),
< span class = "kw" > var3< / span > < span class = "kw" > =< / span > < span class = "fu" > < a href = "https://rdrr.io/r/base/Round.html" > round< / a > < / span > (< span class = "fu" > < a href = "https://rdrr.io/r/stats/Normal.html" > rnorm< / a > < / span > (< span class = "fl" > 20< / span > , < span class = "fl" > 50< / span > , < span class = "fl" > 10< / span > ))
)< / pre > < / body > < / html > < / div >
< p > Create boxes with a sparkline to display a specific value:< / p >
< div class = "sourceCode" id = "cb2" > < html > < body > < pre class = "r" > < span class = "fu" > < a href = "../reference/spark_box.html" > spark_box< / a > < / span > (
< span class = "kw" > data< / span > < span class = "kw" > =< / span > < span class = "no" > spark_data< / span > ,
< span class = "kw" > title< / span > < span class = "kw" > =< / span > < span class = "fu" > < a href = "https://rdrr.io/r/base/mean.html" > mean< / a > < / span > (< span class = "no" > spark_data< / span > $< span class = "no" > var1< / span > ),
< span class = "kw" > subtitle< / span > < span class = "kw" > =< / span > < span class = "st" > "Variable 1"< / span >
)< / pre > < / body > < / html > < / div >
2020-06-13 13:06:58 +02:00
< div id = "htmlwidget-e7fcb610820e83d9e063" style = "width:100%;height:160px;" class = "apexcharter html-widget" > < / div >
< script type = "application/json" data-for = "htmlwidget-e7fcb610820e83d9e063" > { "x" : { "ax_opts" : { "chart" : { "type" : "area" , "sparkline" : { "enabled" : true } } , "series" : [ { "name" : "var1" , "type" : "area" , "data" : [ [ "new Date('2020-06-14').getTime()" , 51 ] , [ "new Date('2020-06-15').getTime()" , 54 ] , [ "new Date('2020-06-16').getTime()" , 48 ] , [ "new Date('2020-06-17').getTime()" , 50 ] , [ "new Date('2020-06-18').getTime()" , 53 ] , [ "new Date('2020-06-19').getTime()" , 54 ] , [ "new Date('2020-06-20').getTime()" , 38 ] , [ "new Date('2020-06-21').getTime()" , 53 ] , [ "new Date('2020-06-22').getTime()" , 54 ] , [ "new Date('2020-06-23').getTime()" , 43 ] , [ "new Date('2020-06-24').getTime()" , 61 ] , [ "new Date('2020-06-25').getTime()" , 55 ] , [ "new Date('2020-06-26').getTime()" , 59 ] , [ "new Date('2020-06-27').getTime()" , 52 ] , [ "new Date('2020-06-28').getTime()" , 47 ] , [ "new Date('2020-06-29').getTime()" , 54 ] , [ "new Date('2020-06-30').getTime()" , 62 ] , [ "new Date('2020-07-01').getTime()" , 33 ] , [ "new Date('2020-07-02').getTime()" , 49 ] , [ "new Date('2020-07-03').getTime()" , 34 ] ] } ] , "dataLabels" : { "enabled" : false } , "stroke" : { "curve" : "straight" , "width" : 2 } , "yaxis" : { "decimalsInFloat" : 2 , "labels" : { "style" : { "colors" : "#848484" } } , "show" : false } , "xaxis" : { "type" : "datetime" , "labels" : { "style" : { "colors" : "#848484" } } } , "colors" : [ "#2E93fA" ] , "title" : { "text" : 50.2 , "style" : { "fontSize" : "24px" } } , "subtitle" : { "text" : "Variable 1" , "style" : { "fontSize" : "14px" } } } , "auto_update" : { "series_animate" : true , "update_options" : true , "options_animate" : true , "options_redrawPaths" : true , "update_synced_charts" : false } , "sparkbox" : { "color" : "#2E93fA" , "background" : "#FFF" } , "xaxis" : { "min" : "2020-06-14" , "max" : "2020-07-03" } } , "evals" : [ "ax_opts.series.0.data.0.0" , "ax_opts.series.0.data.1.0" , "ax_opts.series.0.data.2.0" , "ax_opts.series.0.data.3.0" , "ax_opts.series.0.data.4.0" , "ax_opts.series.0.data.5.0" , "ax_opts.series.0.data.6.0" , "ax_opts.series.0.data.7.0" , "ax_opts.series.0.data.8.0" , "ax_opts.series.0.data.9.0" , "ax_opts.series.0.data.10.0" , "ax_opts.series.0.data.11.0" , "ax_opts.series.0.data.12.0" , "ax_opts.series.0.data.13.0" , "ax_opts.series.0.data.14.0" , "ax_opts.series.0.data.15.0" , "ax_opts.series.0.data.16.0" , "ax_opts.series.0.data.17.0" , "ax_opts.series.0.data.18.0" , "ax_opts.series.0.data.19.0" ] , "jsHooks" : [ ] } < / script > < p > With more styles :< / p >
2020-04-16 17:09:40 +02:00
< div class = "sourceCode" id = "cb3" > < html > < body > < pre class = "r" > < span class = "fu" > < a href = "../reference/spark_box.html" > spark_box< / a > < / span > (
< span class = "kw" > data< / span > < span class = "kw" > =< / span > < span class = "no" > spark_data< / span > ,
< span class = "kw" > title< / span > < span class = "kw" > =< / span > < span class = "fu" > < a href = "https://rdrr.io/r/base/mean.html" > mean< / a > < / span > (< span class = "no" > spark_data< / span > $< span class = "no" > var1< / span > ),
< span class = "kw" > subtitle< / span > < span class = "kw" > =< / span > < span class = "st" > "Variable 1"< / span > ,
< span class = "kw" > color< / span > < span class = "kw" > =< / span > < span class = "st" > "#FFF"< / span > , < span class = "kw" > background< / span > < span class = "kw" > =< / span > < span class = "st" > "#2E93fA"< / span > ,
< span class = "kw" > title_style< / span > < span class = "kw" > =< / span > < span class = "fu" > < a href = "https://rdrr.io/r/base/list.html" > list< / a > < / span > (< span class = "kw" > color< / span > < span class = "kw" > =< / span > < span class = "st" > "#FFF"< / span > ),
< span class = "kw" > subtitle_style< / span > < span class = "kw" > =< / span > < span class = "fu" > < a href = "https://rdrr.io/r/base/list.html" > list< / a > < / span > (< span class = "kw" > color< / span > < span class = "kw" > =< / span > < span class = "st" > "#FFF"< / span > )
)< / pre > < / body > < / html > < / div >
2020-06-13 13:06:58 +02:00
< div id = "htmlwidget-f21162d71f84aa3d51da" style = "width:100%;height:160px;" class = "apexcharter html-widget" > < / div >
< script type = "application/json" data-for = "htmlwidget-f21162d71f84aa3d51da" > { "x" : { "ax_opts" : { "chart" : { "type" : "area" , "sparkline" : { "enabled" : true } } , "series" : [ { "name" : "var1" , "type" : "area" , "data" : [ [ "new Date('2020-06-14').getTime()" , 51 ] , [ "new Date('2020-06-15').getTime()" , 54 ] , [ "new Date('2020-06-16').getTime()" , 48 ] , [ "new Date('2020-06-17').getTime()" , 50 ] , [ "new Date('2020-06-18').getTime()" , 53 ] , [ "new Date('2020-06-19').getTime()" , 54 ] , [ "new Date('2020-06-20').getTime()" , 38 ] , [ "new Date('2020-06-21').getTime()" , 53 ] , [ "new Date('2020-06-22').getTime()" , 54 ] , [ "new Date('2020-06-23').getTime()" , 43 ] , [ "new Date('2020-06-24').getTime()" , 61 ] , [ "new Date('2020-06-25').getTime()" , 55 ] , [ "new Date('2020-06-26').getTime()" , 59 ] , [ "new Date('2020-06-27').getTime()" , 52 ] , [ "new Date('2020-06-28').getTime()" , 47 ] , [ "new Date('2020-06-29').getTime()" , 54 ] , [ "new Date('2020-06-30').getTime()" , 62 ] , [ "new Date('2020-07-01').getTime()" , 33 ] , [ "new Date('2020-07-02').getTime()" , 49 ] , [ "new Date('2020-07-03').getTime()" , 34 ] ] } ] , "dataLabels" : { "enabled" : false } , "stroke" : { "curve" : "straight" , "width" : 2 } , "yaxis" : { "decimalsInFloat" : 2 , "labels" : { "style" : { "colors" : "#848484" } } , "show" : false } , "xaxis" : { "type" : "datetime" , "labels" : { "style" : { "colors" : "#848484" } } } , "colors" : [ "#FFF" ] , "title" : { "text" : 50.2 , "style" : { "color" : "#FFF" , "fontSize" : "24px" } } , "subtitle" : { "text" : "Variable 1" , "style" : { "color" : "#FFF" , "fontSize" : "14px" } } } , "auto_update" : { "series_animate" : true , "update_options" : true , "options_animate" : true , "options_redrawPaths" : true , "update_synced_charts" : false } , "sparkbox" : { "color" : "#FFF" , "background" : "#2E93fA" } , "xaxis" : { "min" : "2020-06-14" , "max" : "2020-07-03" } } , "evals" : [ "ax_opts.series.0.data.0.0" , "ax_opts.series.0.data.1.0" , "ax_opts.series.0.data.2.0" , "ax_opts.series.0.data.3.0" , "ax_opts.series.0.data.4.0" , "ax_opts.series.0.data.5.0" , "ax_opts.series.0.data.6.0" , "ax_opts.series.0.data.7.0" , "ax_opts.series.0.data.8.0" , "ax_opts.series.0.data.9.0" , "ax_opts.series.0.data.10.0" , "ax_opts.series.0.data.11.0" , "ax_opts.series.0.data.12.0" , "ax_opts.series.0.data.13.0" , "ax_opts.series.0.data.14.0" , "ax_opts.series.0.data.15.0" , "ax_opts.series.0.data.16.0" , "ax_opts.series.0.data.17.0" , "ax_opts.series.0.data.18.0" , "ax_opts.series.0.data.19.0" ] , "jsHooks" : [ ] } < / script > < p > You can also use spark boxes in Shiny application, use code to launch an example :< / p >
2020-04-16 17:09:40 +02:00
< div class = "sourceCode" id = "cb4" > < html > < body > < pre class = "r" > < span class = "fu" > < a href = "../reference/run_sparkbox_demo.html" > run_sparkbox_demo< / a > < / span > ()< / pre > < / body > < / html > < / div >
< p > < img src = "figures/spark-box.png" alt = "spark-box" style = "width:100%;" > < / p >
< / div >
2020-05-27 16:29:28 +02:00
< div class = "col-md-3 hidden-xs hidden-sm" id = "pkgdown-sidebar" >
2020-04-16 17:09:40 +02:00
< / 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" >
2020-05-27 16:29:28 +02:00
< p > Site built with < a href = "https://pkgdown.r-lib.org/" > pkgdown< / a > 1.5.1.9000.< / p >
2020-04-16 17:09:40 +02:00
< / 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 >