apexcharter/docs/index.html

251 lines
21 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>Create Interactive Chart with the JavaScript 'ApexCharts' Library • 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="Create Interactive Chart with the JavaScript 'ApexCharts' Library">
<meta property="og:description" content="Provides an 'htmlwidgets' interface to 'apexcharts.js'.">
<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-home">
<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.0.4.940</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="contents col-md-9">
<div id="apexcharter" class="section level1">
<div class="page-header"><h1 class="hasAnchor">
<a href="#apexcharter" class="anchor"></a>apexcharter</h1></div>
<blockquote>
<p>Htmlwidget for <a href="https://github.com/apexcharts/apexcharts.js">apexcharts.js</a> : A modern JavaScript charting library to build interactive charts and visualizations with simple API.</p>
</blockquote>
<p><a href="https://travis-ci.org/dreamRs/apexcharter"><img src="https://travis-ci.org/dreamRs/apexcharter.svg?branch=master" alt="Travis build status"></a> <a href="https://www.tidyverse.org/lifecycle/#maturing"><img src="https://img.shields.io/badge/lifecycle-maturing-blue.svg" alt="Lifecycle: maturing"></a></p>
<p><span class="emoji" data-emoji="warning">⚠️</span> Use RStudio &gt;= 1.2 to properly display charts</p>
<p>Note: Once again, development is heavily inspired by amazing <a href="http://jkunst.com/highcharter/">highcharter</a>.</p>
<div id="installation" class="section level2">
<h2 class="hasAnchor">
<a href="#installation" class="anchor"></a>Installation</h2>
<p>You can install the development version from <a href="https://github.com/">GitHub</a> with:</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb1-1" title="1"><span class="co"># install.packages("devtools")</span></a>
<a class="sourceLine" id="cb1-2" title="2">devtools<span class="op">::</span><span class="kw"><a href="https://www.rdocumentation.org/packages/devtools/topics/reexports">install_github</a></span>(<span class="st">"dreamRs/apexcharter"</span>)</a></code></pre></div>
</div>
<div id="quick-charts" class="section level2">
<h2 class="hasAnchor">
<a href="#quick-charts" class="anchor"></a>Quick Charts</h2>
<p>Use <code>apex</code> function to quickly create visualizations :</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb2-1" title="1"><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/library">library</a></span>(apexcharter)</a>
<a class="sourceLine" id="cb2-2" title="2"></a>
<a class="sourceLine" id="cb2-3" title="3"><span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/data">data</a></span>(<span class="st">"mpg"</span>, <span class="dt">package =</span> <span class="st">"ggplot2"</span>)</a>
<a class="sourceLine" id="cb2-4" title="4">n_manufac &lt;-<span class="st"> </span>dplyr<span class="op">::</span><span class="kw"><a href="https://dplyr.tidyverse.org/reference/tally.html">count</a></span>(mpg, manufacturer)</a>
<a class="sourceLine" id="cb2-5" title="5"></a>
<a class="sourceLine" id="cb2-6" title="6"><span class="kw"><a href="reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_manufac, <span class="dt">type =</span> <span class="st">"bar"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> manufacturer, <span class="dt">y =</span> n))</a></code></pre></div>
<p><img src="reference/figures/apex-bar.png"></p>
<p>With datetime:</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb3-1" title="1"><span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/data">data</a></span>(<span class="st">"economics"</span>, <span class="dt">package =</span> <span class="st">"ggplot2"</span>)</a>
<a class="sourceLine" id="cb3-2" title="2"><span class="kw"><a href="reference/apex.html">apex</a></span>(<span class="dt">data =</span> economics, <span class="dt">type =</span> <span class="st">"line"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> date, <span class="dt">y =</span> uempmed)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb3-3" title="3"><span class="st"> </span><span class="kw"><a href="reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">width =</span> <span class="dv">1</span>)</a></code></pre></div>
<p><img src="reference/figures/apex-line.png"></p>
</div>
<div id="full-api" class="section level2">
<h2 class="hasAnchor">
<a href="#full-api" class="anchor"></a>Full API</h2>
<p>All methods from ApexCharts are available with function like <code>ax_*</code> compatible with pipe from <code>magrittr</code> :</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb4-1" title="1"><span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/library">library</a></span>(apexcharter)</a>
<a class="sourceLine" id="cb4-2" title="2"><span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/data">data</a></span>(mpg, <span class="dt">package =</span> <span class="st">"ggplot2"</span>)</a>
<a class="sourceLine" id="cb4-3" title="3">n_manufac &lt;-<span class="st"> </span>dplyr<span class="op">::</span><span class="kw"><a href="https://dplyr.tidyverse.org/reference/tally.html">count</a></span>(mpg, manufacturer)</a>
<a class="sourceLine" id="cb4-4" title="4"></a>
<a class="sourceLine" id="cb4-5" title="5"><span class="kw"><a href="reference/apexchart.html">apexchart</a></span>() <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb4-6" title="6"><span class="st"> </span><span class="kw"><a href="reference/ax_chart.html">ax_chart</a></span>(<span class="dt">type =</span> <span class="st">"bar"</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb4-7" title="7"><span class="st"> </span><span class="kw"><a href="reference/ax_plotOptions.html">ax_plotOptions</a></span>(<span class="dt">bar =</span> <span class="kw"><a href="reference/bar_opts.html">bar_opts</a></span>(</a>
<a class="sourceLine" id="cb4-8" title="8"> <span class="dt">horizontal =</span> <span class="ot">FALSE</span>,</a>
<a class="sourceLine" id="cb4-9" title="9"> <span class="dt">endingShape =</span> <span class="st">"flat"</span>,</a>
<a class="sourceLine" id="cb4-10" title="10"> <span class="dt">columnWidth =</span> <span class="st">"70%"</span>,</a>
<a class="sourceLine" id="cb4-11" title="11"> <span class="dt">dataLabels =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb4-12" title="12"> <span class="dt">position =</span> <span class="st">"top"</span></a>
<a class="sourceLine" id="cb4-13" title="13"> ))</a>
<a class="sourceLine" id="cb4-14" title="14"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb4-15" title="15"><span class="st"> </span><span class="kw"><a href="reference/ax_grid.html">ax_grid</a></span>(</a>
<a class="sourceLine" id="cb4-16" title="16"> <span class="dt">show =</span> <span class="ot">TRUE</span>,</a>
<a class="sourceLine" id="cb4-17" title="17"> <span class="dt">position =</span> <span class="st">"front"</span>,</a>
<a class="sourceLine" id="cb4-18" title="18"> <span class="dt">borderColor =</span> <span class="st">"#FFF"</span></a>
<a class="sourceLine" id="cb4-19" title="19"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb4-20" title="20"><span class="st"> </span><span class="kw"><a href="reference/ax-series.html">ax_series</a></span>(<span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb4-21" title="21"> <span class="dt">name =</span> <span class="st">"Count"</span>,</a>
<a class="sourceLine" id="cb4-22" title="22"> <span class="dt">data =</span> n_manufac<span class="op">$</span>n</a>
<a class="sourceLine" id="cb4-23" title="23"> )) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb4-24" title="24"><span class="st"> </span><span class="kw"><a href="reference/ax_colors.html">ax_colors</a></span>(<span class="st">"#112446"</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb4-25" title="25"><span class="st"> </span><span class="kw"><a href="reference/ax_xaxis.html">ax_xaxis</a></span>(<span class="dt">categories =</span> n_manufac<span class="op">$</span>manufacturer) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb4-26" title="26"><span class="st"> </span><span class="kw"><a href="reference/ax_title.html">ax_title</a></span>(<span class="dt">text =</span> <span class="st">"Number of models"</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb4-27" title="27"><span class="st"> </span><span class="kw"><a href="reference/ax_subtitle.html">ax_subtitle</a></span>(<span class="dt">text =</span> <span class="st">"Data from ggplot2"</span>)</a></code></pre></div>
<p><img src="reference/figures/apexcharter-full-bar.png"></p>
</div>
<div id="raw-api" class="section level2">
<h2 class="hasAnchor">
<a href="#raw-api" class="anchor"></a>Raw API</h2>
<p>Pass a list of parameters to the function:</p>
<div class="sourceCode" id="cb5"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb5-1" title="1"><span class="kw"><a href="reference/apexchart.html">apexchart</a></span>(<span class="dt">ax_opts =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb5-2" title="2"> <span class="dt">chart =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb5-3" title="3"> <span class="dt">type =</span> <span class="st">"line"</span></a>
<a class="sourceLine" id="cb5-4" title="4"> ),</a>
<a class="sourceLine" id="cb5-5" title="5"> <span class="dt">stroke =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb5-6" title="6"> <span class="dt">curve =</span> <span class="st">"smooth"</span></a>
<a class="sourceLine" id="cb5-7" title="7"> ),</a>
<a class="sourceLine" id="cb5-8" title="8"> <span class="dt">grid =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb5-9" title="9"> <span class="dt">borderColor =</span> <span class="st">"#e7e7e7"</span>,</a>
<a class="sourceLine" id="cb5-10" title="10"> <span class="dt">row =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb5-11" title="11"> <span class="dt">colors =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="st">"#f3f3f3"</span>, <span class="st">"transparent"</span>),</a>
<a class="sourceLine" id="cb5-12" title="12"> <span class="dt">opacity =</span> <span class="fl">0.5</span></a>
<a class="sourceLine" id="cb5-13" title="13"> )</a>
<a class="sourceLine" id="cb5-14" title="14"> ),</a>
<a class="sourceLine" id="cb5-15" title="15"> <span class="dt">dataLabels =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb5-16" title="16"> <span class="dt">enabled =</span> <span class="ot">TRUE</span></a>
<a class="sourceLine" id="cb5-17" title="17"> ),</a>
<a class="sourceLine" id="cb5-18" title="18"> <span class="dt">markers =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="dt">style =</span> <span class="st">"inverted"</span>, <span class="dt">size =</span> <span class="dv">6</span>),</a>
<a class="sourceLine" id="cb5-19" title="19"> <span class="dt">series =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb5-20" title="20"> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb5-21" title="21"> <span class="dt">name =</span> <span class="st">"High"</span>,</a>
<a class="sourceLine" id="cb5-22" title="22"> <span class="dt">data =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="dv">28</span>, <span class="dv">29</span>, <span class="dv">33</span>, <span class="dv">36</span>, <span class="dv">32</span>, <span class="dv">32</span>, <span class="dv">33</span>)</a>
<a class="sourceLine" id="cb5-23" title="23"> ),</a>
<a class="sourceLine" id="cb5-24" title="24"> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb5-25" title="25"> <span class="dt">name =</span> <span class="st">"Low"</span>,</a>
<a class="sourceLine" id="cb5-26" title="26"> <span class="dt">data =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="dv">12</span>, <span class="dv">11</span>, <span class="dv">14</span>, <span class="dv">18</span>, <span class="dv">17</span>, <span class="dv">13</span>, <span class="dv">13</span>)</a>
<a class="sourceLine" id="cb5-27" title="27"> )</a>
<a class="sourceLine" id="cb5-28" title="28"> ),</a>
<a class="sourceLine" id="cb5-29" title="29"> <span class="dt">title =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb5-30" title="30"> <span class="dt">text =</span> <span class="st">"Average High &amp; Low Temperature"</span>,</a>
<a class="sourceLine" id="cb5-31" title="31"> <span class="dt">align =</span> <span class="st">"left"</span></a>
<a class="sourceLine" id="cb5-32" title="32"> ),</a>
<a class="sourceLine" id="cb5-33" title="33"> <span class="dt">xaxis =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb5-34" title="34"> <span class="dt">categories =</span> month.abb[<span class="dv">1</span><span class="op">:</span><span class="dv">7</span>]</a>
<a class="sourceLine" id="cb5-35" title="35"> ),</a>
<a class="sourceLine" id="cb5-36" title="36"> <span class="dt">yaxis =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb5-37" title="37"> <span class="dt">title =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="dt">text =</span> <span class="st">"Temperature"</span>),</a>
<a class="sourceLine" id="cb5-38" title="38"> <span class="dt">labels =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(</a>
<a class="sourceLine" id="cb5-39" title="39"> <span class="dt">formatter =</span> htmlwidgets<span class="op">::</span><span class="kw"><a href="https://www.rdocumentation.org/packages/htmlwidgets/topics/JS">JS</a></span>(<span class="st">"function(value) {return value + '°C';}"</span>)</a>
<a class="sourceLine" id="cb5-40" title="40"> )</a>
<a class="sourceLine" id="cb5-41" title="41"> )</a>
<a class="sourceLine" id="cb5-42" title="42">))</a></code></pre></div>
<p><img src="reference/figures/raw-api.png" alt="alt text"></p>
</div>
</div>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
<div class="links">
<h2>Links</h2>
<ul class="list-unstyled">
<li>Browse source code at <br><a href="https://github.com/dreamRs/apexcharter">https://github.com/dreamRs/apexcharter</a>
</li>
<li>Report a bug at <br><a href="https://github.com/dreamRs/apexcharter/issues">https://github.com/dreamRs/apexcharter/issues</a>
</li>
</ul>
</div>
<div class="license">
<h2>License</h2>
<ul class="list-unstyled">
<li>
<a href="https://opensource.org/licenses/mit-license.php">MIT</a> + file <a href="LICENSE-text.html">LICENSE</a>
</li>
</ul>
</div>
<div class="developers">
<h2>Developers</h2>
<ul class="list-unstyled">
<li>
<a href="https://twitter.com/_pvictorr"><img src="https://pbs.twimg.com/profile_images/844237339404722177/E1U61aM8_normal.jpg"> Victor Perrier</a> <br><small class="roles"> Author, maintainer </small> </li>
<li>
<a href="https://twitter.com/_mfaan"><img src="https://pbs.twimg.com/profile_images/912313931326218240/o1-wvA18_normal.jpg"> Fanny Meyer</a> <br><small class="roles"> Author </small> </li>
<li><a href="authors.html">All authors...</a></li>
</ul>
</div>
</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>