released on CRAN

This commit is contained in:
pvictor 2019-07-29 09:30:42 +02:00
parent 2043f88562
commit 4ed7cda95c
51 changed files with 5511 additions and 166 deletions

View File

@ -1,5 +1,5 @@
apexcharter 0.1.0
apexcharter 0.1.1
==================
* New release: create interactive chart with the JavaScript 'ApexCharts' library
* First CRAN release: create interactive chart with the JavaScript 'ApexCharts' library. Types of graphics available : bars, columns, splines, lines, scatter, pie, donuts, heatmap, gauge.

View File

@ -2,6 +2,7 @@
> Htmlwidget for [apexcharts.js](https://github.com/apexcharts/apexcharts.js) : A modern JavaScript charting library to build interactive charts and visualizations with simple API.
[![version](http://www.r-pkg.org/badges/version/apexcharter)](https://CRAN.R-project.org/package=apexcharter)
[![Travis build status](https://travis-ci.org/dreamRs/apexcharter.svg?branch=master)](https://travis-ci.org/dreamRs/apexcharter)
[![Lifecycle: maturing](https://img.shields.io/badge/lifecycle-maturing-blue.svg)](https://www.tidyverse.org/lifecycle/#maturing)

View File

@ -60,7 +60,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>
@ -120,38 +120,8 @@
<h1>License</h1>
</div>
<pre>R PACKAGE
=========
YEAR: 2019
COPYRIGHT HOLDER: dreamRs
ApexCharts.js
=============
The MIT License (MIT)
Copyright (c) 2018 ApexCharts
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
<pre>YEAR: 2019
COPYRIGHT HOLDER: Victor Perrier
</pre>
</div>

View File

@ -60,7 +60,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -30,7 +30,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>
@ -83,7 +83,7 @@
<!--/.navbar -->
</header><script src="labs_files/htmlwidgets-1.3/htmlwidgets.js"></script><script src="labs_files/apexcharts-3.8.2/apexcharts.min.js"></script><script src="labs_files/apexcharter-binding-0.1.0/apexcharter.js"></script><div class="row">
</header><script src="labs_files/htmlwidgets-1.3/htmlwidgets.js"></script><script src="labs_files/apexcharts-3.8.2/apexcharts.min.js"></script><script src="labs_files/apexcharter-binding-0.1.1/apexcharter.js"></script><div class="row">
<div class="col-md-9 contents">
<div class="page-header toc-ignore">
<h1>Labs: title, subtitle &amp; axis</h1>
@ -107,16 +107,16 @@
<a href="#chart-title" class="anchor"></a>Chart title</h2>
<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="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_cut, <span class="dt">type =</span> <span class="st">"column"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> cut, <span class="dt">y =</span> n)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb2-2" title="2"><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">"Cut distribution"</span>)</a></code></pre></div>
<div id="htmlwidget-585481303d7623a07fa1" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-585481303d7623a07fa1">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>You can set some options, for example:</p>
<div id="htmlwidget-48a144499ce2be70c51b" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-48a144499ce2be70c51b">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>You can set some options, for example:</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="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_cut, <span class="dt">type =</span> <span class="st">"column"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> cut, <span class="dt">y =</span> n)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb3-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_title.html">ax_title</a></span>(</a>
<a class="sourceLine" id="cb3-3" title="3"> <span class="dt">text =</span> <span class="st">"Cut distribution"</span>, </a>
<a class="sourceLine" id="cb3-4" title="4"> <span class="dt">align =</span> <span class="st">"center"</span>,</a>
<a class="sourceLine" id="cb3-5" title="5"> <span class="dt">style =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"22px"</span>)</a>
<a class="sourceLine" id="cb3-6" title="6"> )</a></code></pre></div>
<div id="htmlwidget-cb619e52407fc9bc8f41" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-cb619e52407fc9bc8f41">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution","align":"center","style":{"fontSize":"22px"}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Full list of parameters is available here : <a href="https://apexcharts.com/docs/options/title/" class="uri">https://apexcharts.com/docs/options/title/</a></p>
<div id="htmlwidget-c169f4df685663753bcb" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-c169f4df685663753bcb">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution","align":"center","style":{"fontSize":"22px"}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Full list of parameters is available here : <a href="https://apexcharts.com/docs/options/title/" class="uri">https://apexcharts.com/docs/options/title/</a></p>
</div>
<div id="chart-subtitle" class="section level2">
<h2 class="hasAnchor">
@ -124,8 +124,8 @@
<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="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_cut, <span class="dt">type =</span> <span class="st">"column"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> cut, <span class="dt">y =</span> n)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb4-2" title="2"><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">"Cut distribution"</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb4-3" title="3"><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>
<div id="htmlwidget-5412673bbed38f62d083" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-5412673bbed38f62d083">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution"},"subtitle":{"text":"Data from ggplot2"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>With same options than for title:</p>
<div id="htmlwidget-c7b2251ec53aadbc43ab" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-c7b2251ec53aadbc43ab">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution"},"subtitle":{"text":"Data from ggplot2"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>With same options than for title:</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/apex.html">apex</a></span>(<span class="dt">data =</span> n_cut, <span class="dt">type =</span> <span class="st">"column"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> cut, <span class="dt">y =</span> n)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb5-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_title.html">ax_title</a></span>(</a>
<a class="sourceLine" id="cb5-3" title="3"> <span class="dt">text =</span> <span class="st">"Cut distribution"</span>, </a>
@ -137,8 +137,8 @@
<a class="sourceLine" id="cb5-9" title="9"> <span class="dt">align =</span> <span class="st">"center"</span>,</a>
<a class="sourceLine" id="cb5-10" title="10"> <span class="dt">style =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"16px"</span>, <span class="dt">color =</span> <span class="st">"#BDBDBD"</span>)</a>
<a class="sourceLine" id="cb5-11" title="11"> )</a></code></pre></div>
<div id="htmlwidget-32e45c282e680f19633b" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-32e45c282e680f19633b">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution","align":"center","style":{"fontSize":"22px"}},"subtitle":{"text":"Data from ggplot2","align":"center","style":{"fontSize":"16px","color":"#BDBDBD"}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Full list of parameters is available here : <a href="https://apexcharts.com/docs/options/subtitle/" class="uri">https://apexcharts.com/docs/options/subtitle/</a></p>
<div id="htmlwidget-209d4220ffbe834ec621" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-209d4220ffbe834ec621">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"title":{"text":"Cut distribution","align":"center","style":{"fontSize":"22px"}},"subtitle":{"text":"Data from ggplot2","align":"center","style":{"fontSize":"16px","color":"#BDBDBD"}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Full list of parameters is available here : <a href="https://apexcharts.com/docs/options/subtitle/" class="uri">https://apexcharts.com/docs/options/subtitle/</a></p>
</div>
<div id="axis-title" class="section level2">
<h2 class="hasAnchor">
@ -146,8 +146,8 @@
<div class="sourceCode" id="cb6"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb6-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_cut, <span class="dt">type =</span> <span class="st">"column"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> cut, <span class="dt">y =</span> n)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb6-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span>(<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">"Count"</span>)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb6-3" title="3"><span class="st"> </span><span class="kw"><a href="../reference/ax_xaxis.html">ax_xaxis</a></span>(<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">"Cut"</span>))</a></code></pre></div>
<div id="htmlwidget-554ee6e38ffa1586d286" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-554ee6e38ffa1586d286">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"yaxis":{"title":{"text":"Count"}},"xaxis":{"title":{"text":"Cut"}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>With some options:</p>
<div id="htmlwidget-0e59b8233ca9ba9a50de" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-0e59b8233ca9ba9a50de">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"yaxis":{"title":{"text":"Count"}},"xaxis":{"title":{"text":"Cut"}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>With some options:</p>
<div class="sourceCode" id="cb7"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb7-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> n_cut, <span class="dt">type =</span> <span class="st">"column"</span>, <span class="dt">mapping =</span> <span class="kw"><a href="../reference/apexcharter-exports.html">aes</a></span>(<span class="dt">x =</span> cut, <span class="dt">y =</span> n)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb7-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span>(<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="cb7-3" title="3"> <span class="dt">text =</span> <span class="st">"Count"</span>,</a>
@ -157,8 +157,8 @@
<a class="sourceLine" id="cb7-7" title="7"> <span class="dt">text =</span> <span class="st">"Cut"</span>, </a>
<a class="sourceLine" id="cb7-8" title="8"> <span class="dt">style =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/list">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"14px"</span>, <span class="dt">color =</span> <span class="st">"#BDBDBD"</span>)</a>
<a class="sourceLine" id="cb7-9" title="9"> ))</a></code></pre></div>
<div id="htmlwidget-e967f7bca13a27ebedf5" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-e967f7bca13a27ebedf5">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"yaxis":{"title":{"text":"Count","style":{"fontSize":"14px","color":"#BDBDBD"}}},"xaxis":{"title":{"text":"Cut","style":{"fontSize":"14px","color":"#BDBDBD"}}}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
<div id="htmlwidget-c524eb99ede858308434" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-c524eb99ede858308434">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"n","data":[{"x":"Fair","y":1610},{"x":"Good","y":4906},{"x":"Very Good","y":12082},{"x":"Premium","y":13791},{"x":"Ideal","y":21551}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"yaxis":{"title":{"text":"Count","style":{"fontSize":"14px","color":"#BDBDBD"}}},"xaxis":{"title":{"text":"Cut","style":{"fontSize":"14px","color":"#BDBDBD"}}}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
</div>
</div>

View File

@ -0,0 +1,104 @@
HTMLWidgets.widget({
name: 'apexcharter',
type: 'output',
factory: function(el, width, height) {
var ax_opts;
var apexchart = null;
return {
renderValue: function(x) {
// Global options
ax_opts = x.ax_opts;
// Sizing
if (typeof ax_opts.chart === 'undefined') {
ax_opts.chart = {};
}
ax_opts.chart.width = width;
ax_opts.chart.height = height;
// Generate or update chart
if (apexchart === null) {
apexchart = new ApexCharts(document.querySelector("#" + el.id), ax_opts);
apexchart.render();
} else {
if (x.auto_update) {
apexchart.updateSeries(ax_opts.series);
} else {
apexchart.destroy();
apexchart = new ApexCharts(document.querySelector("#" + el.id), ax_opts);
apexchart.render();
}
}
},
getChart: function(){
return apexchart;
},
resize: function(width, height) {
apexchart.updateOptions({
chart: {
width: width,
height: height
}
});
}
};
}
});
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
function get_widget(id){
// Get the HTMLWidgets object
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
// Use the getChart method we created to get the underlying billboard chart
var widgetObj ;
if (typeof htmlWidgetsObj != 'undefined') {
widgetObj = htmlWidgetsObj.getChart();
}
return(widgetObj);
}
if (HTMLWidgets.shinyMode) {
// update serie
Shiny.addCustomMessageHandler('update-apexchart-series',
function(obj) {
var chart = get_widget(obj.id);
if (typeof chart != 'undefined') {
chart.updateSeries([{
data: obj.data.newSeries
}], obj.data.animate);
}
});
// update options
Shiny.addCustomMessageHandler('update-apexchart-options',
function(obj) {
var chart = get_widget(obj.id);
if (typeof chart != 'undefined') {
chart.updateOptions(obj.data.options);
}
});
}

View File

@ -30,7 +30,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>
@ -83,7 +83,7 @@
<!--/.navbar -->
</header><script src="lines_files/htmlwidgets-1.3/htmlwidgets.js"></script><script src="lines_files/apexcharts-3.8.2/apexcharts.min.js"></script><script src="lines_files/apexcharter-binding-0.1.0/apexcharter.js"></script><div class="row">
</header><script src="lines_files/htmlwidgets-1.3/htmlwidgets.js"></script><script src="lines_files/apexcharts-3.8.2/apexcharts.min.js"></script><script src="lines_files/apexcharter-binding-0.1.1/apexcharter.js"></script><div class="row">
<div class="col-md-9 contents">
<div class="page-header toc-ignore">
<h1>Options &amp; styles for lines</h1>
@ -113,16 +113,16 @@
<a href="#type-of-line" class="anchor"></a>Type of line</h2>
<p>Classic line:</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="../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))</a></code></pre></div>
<div id="htmlwidget-a6abd55017e67372b3db" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-a6abd55017e67372b3db">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Spline curve:</p>
<div id="htmlwidget-8ded489a008f360bc384" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-8ded489a008f360bc384">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Spline curve:</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="../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-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">curve =</span> <span class="st">"smooth"</span>)</a></code></pre></div>
<div id="htmlwidget-a74325d91ca209209de0" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-a74325d91ca209209de0">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"smooth"},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Steps chart:</p>
<div id="htmlwidget-9f10f98d849712ef1af3" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-9f10f98d849712ef1af3">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"smooth"},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Steps chart:</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="../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="cb4-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">curve =</span> <span class="st">"stepline"</span>)</a></code></pre></div>
<div id="htmlwidget-64086cf0ab7cbbf05c7a" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-64086cf0ab7cbbf05c7a">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"stepline"},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
<div id="htmlwidget-0baee2d995072c4d616e" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-0baee2d995072c4d616e">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"stepline"},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
</div>
<div id="line-appearance" class="section level2">
<h2 class="hasAnchor">
@ -141,20 +141,20 @@
<a class="sourceLine" id="cb5-11" title="11"> <span class="dt">stops =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="dv">0</span>, <span class="dv">100</span>, <span class="dv">100</span>, <span class="dv">100</span>)</a>
<a class="sourceLine" id="cb5-12" title="12"> )</a>
<a class="sourceLine" id="cb5-13" title="13"> )</a></code></pre></div>
<div id="htmlwidget-9ef234fc012f637fb8e6" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-9ef234fc012f637fb8e6">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"},"fill":{"type":"gradient","gradient":{"shade":"dark","gradientToColors":["#FDD835"],"shadeIntensity":1,"type":"horizontal","opacityFrom":1,"opacityTo":1,"stops":[0,100,100,100]}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Solid area color:</p>
<div id="htmlwidget-846a46b14f7a89f28e17" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-846a46b14f7a89f28e17">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"},"fill":{"type":"gradient","gradient":{"shade":"dark","gradientToColors":["#FDD835"],"shadeIntensity":1,"type":"horizontal","opacityFrom":1,"opacityTo":1,"stops":[0,100,100,100]}}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Solid area color:</p>
<div class="sourceCode" id="cb6"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb6-1" title="1"><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">"area"</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="cb6-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_fill.html">ax_fill</a></span>(<span class="dt">type =</span> <span class="st">"solid"</span>, <span class="dt">opacity =</span> <span class="dv">1</span>)</a></code></pre></div>
<div id="htmlwidget-9cfbb6d09f1ca015c010" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-9cfbb6d09f1ca015c010">{"x":{"ax_opts":{"chart":{"type":"area"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"},"fill":{"type":"solid","opacity":1}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Line width:</p>
<div id="htmlwidget-44664e674a63d6ec0c9f" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-44664e674a63d6ec0c9f">{"x":{"ax_opts":{"chart":{"type":"area"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"},"fill":{"type":"solid","opacity":1}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Line width:</p>
<div class="sourceCode" id="cb7"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb7-1" title="1"><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="cb7-2" title="2"><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>
<div id="htmlwidget-676c8be5a31702e0929f" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-676c8be5a31702e0929f">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":1},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Dotted line</p>
<div id="htmlwidget-613194b365be5fc6bff8" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-613194b365be5fc6bff8">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":1},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Dotted line</p>
<div class="sourceCode" id="cb8"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb8-1" title="1"><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="cb8-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">dashArray =</span> <span class="dv">6</span>)</a></code></pre></div>
<div id="htmlwidget-9af996f8e5c0ca62565e" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-9af996f8e5c0ca62565e">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","dashArray":6},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
<div id="htmlwidget-dfc3db6ec5848a4db682" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-dfc3db6ec5848a4db682">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2011-03-01",21.5],["2011-04-01",20.9],["2011-05-01",21.6],["2011-06-01",22.4],["2011-07-01",22],["2011-08-01",22.4],["2011-09-01",22],["2011-10-01",20.6],["2011-11-01",20.8],["2011-12-01",20.5],["2012-01-01",20.8],["2012-02-01",19.7],["2012-03-01",19.2],["2012-04-01",19.1],["2012-05-01",19.9],["2012-06-01",20.4],["2012-07-01",17.5],["2012-08-01",18.4],["2012-09-01",18.8],["2012-10-01",19.9],["2012-11-01",18.6],["2012-12-01",17.7],["2013-01-01",15.8],["2013-02-01",17.2],["2013-03-01",17.6],["2013-04-01",17.1],["2013-05-01",17.1],["2013-06-01",17],["2013-07-01",16.2],["2013-08-01",16.5],["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","dashArray":6},"xaxis":{"type":"datetime"}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
</div>
<div id="markers" class="section level2">
<h2 class="hasAnchor">
@ -162,13 +162,13 @@
<p>Add points to line :</p>
<div class="sourceCode" id="cb9"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb9-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/head">tail</a></span>(economics, <span class="dv">20</span>), <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="cb9-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_markers.html">ax_markers</a></span>(<span class="dt">size =</span> <span class="dv">6</span>)</a></code></pre></div>
<div id="htmlwidget-973bb3eaf5da2b803ace" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-973bb3eaf5da2b803ace">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"},"markers":{"size":6}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Add labels over points</p>
<div id="htmlwidget-d04be4d421d2fce3eef5" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-d04be4d421d2fce3eef5">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"},"markers":{"size":6}},"auto_update":true},"evals":[],"jsHooks":[]}</script><p>Add labels over points</p>
<div class="sourceCode" id="cb10"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb10-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/utils/topics/head">tail</a></span>(economics, <span class="dv">20</span>), <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="cb10-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_markers.html">ax_markers</a></span>(<span class="dt">size =</span> <span class="dv">6</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb10-3" title="3"><span class="st"> </span><span class="kw"><a href="../reference/ax_dataLabels.html">ax_dataLabels</a></span>(<span class="dt">enabled =</span> <span class="ot">TRUE</span>)</a></code></pre></div>
<div id="htmlwidget-678a256bb4c9e8273cd9" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-678a256bb4c9e8273cd9">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":true},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"},"markers":{"size":6}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
<div id="htmlwidget-05b6512c60582bdb161c" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-05b6512c60582bdb161c">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"uempmed","data":[["2013-09-01",16.5],["2013-10-01",16.3],["2013-11-01",17.1],["2013-12-01",17.3],["2014-01-01",15.4],["2014-02-01",15.9],["2014-03-01",15.8],["2014-04-01",15.7],["2014-05-01",14.6],["2014-06-01",13.8],["2014-07-01",13.1],["2014-08-01",12.9],["2014-09-01",13.4],["2014-10-01",13.6],["2014-11-01",13],["2014-12-01",12.9],["2015-01-01",13.2],["2015-02-01",12.9],["2015-03-01",12],["2015-04-01",11.5]]}],"dataLabels":{"enabled":true},"stroke":{"curve":"straight"},"xaxis":{"type":"datetime"},"markers":{"size":6}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
</div>
<div id="multiple-lines" class="section level2">
<h2 class="hasAnchor">
@ -178,12 +178,12 @@
<a class="sourceLine" id="cb11-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span>(<span class="dt">decimalsInFloat =</span> <span class="dv">2</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb11-3" title="3"><span class="st"> </span><span class="kw"><a href="../reference/ax_markers.html">ax_markers</a></span>(<span class="dt">size =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="dv">3</span>, <span class="dv">6</span>)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb11-4" title="4"><span class="st"> </span><span class="kw"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">width =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="dv">1</span>, <span class="dv">3</span>))</a></code></pre></div>
<div id="htmlwidget-ad416d754f5fd99edec8" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-ad416d754f5fd99edec8">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"pce","data":[["2013-09-01",0.92924677636026],["2013-10-01",0.933773134481608],["2013-11-01",0.939574402546397],["2013-12-01",0.942167004646148],["2014-01-01",0.941704956747183],["2014-02-01",0.946299766409118],["2014-03-01",0.952871114305516],["2014-04-01",0.957970754079284],["2014-05-01",0.961889604777918],["2014-06-01",0.967759324383294],["2014-07-01",0.971481376902739],["2014-08-01",0.978651675779278],["2014-09-01",0.979772569756398],["2014-10-01",0.985385596084572],["2014-11-01",0.987815625775428],["2014-12-01",0.988722608688212],["2015-01-01",0.987353577876462],["2015-02-01",0.990468122973193],["2015-03-01",0.99696246288643],["2015-04-01",1]]},{"name":"pop","data":[["2013-09-01",0.970448177482025],["2013-10-01",0.972224366782906],["2013-11-01",0.97391518362249],["2013-12-01",0.975423315392571],["2014-01-01",0.976921972290395],["2014-02-01",0.97823645673634],["2014-03-01",0.97957855225842],["2014-04-01",0.980992099657577],["2014-05-01",0.982473622896551],["2014-06-01",0.984073150615668],["2014-07-01",0.985702006885595],["2014-08-01",0.987603703319152],["2014-09-01",0.989506155770269],["2014-10-01",0.991383363808922],["2014-11-01",0.993112959418826],["2014-12-01",0.994608132061805],["2015-01-01",0.996107750416745],["2015-02-01",0.997306408041825],["2015-03-01",0.998590610697427],["2015-04-01",1]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":[1,3]},"xaxis":{"type":"datetime"},"yaxis":{"decimalsInFloat":2},"markers":{"size":[3,6]}},"auto_update":true},"evals":[],"jsHooks":[]}</script><div class="sourceCode" id="cb12"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb12-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> economics_long, <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> value01, <span class="dt">group =</span> variable)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<div id="htmlwidget-79e47fb8dcde5c49da50" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-79e47fb8dcde5c49da50">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"pce","data":[["2013-09-01",0.92924677636026],["2013-10-01",0.933773134481608],["2013-11-01",0.939574402546397],["2013-12-01",0.942167004646148],["2014-01-01",0.941704956747183],["2014-02-01",0.946299766409118],["2014-03-01",0.952871114305516],["2014-04-01",0.957970754079284],["2014-05-01",0.961889604777918],["2014-06-01",0.967759324383294],["2014-07-01",0.971481376902739],["2014-08-01",0.978651675779278],["2014-09-01",0.979772569756398],["2014-10-01",0.985385596084572],["2014-11-01",0.987815625775428],["2014-12-01",0.988722608688212],["2015-01-01",0.987353577876462],["2015-02-01",0.990468122973193],["2015-03-01",0.99696246288643],["2015-04-01",1]]},{"name":"pop","data":[["2013-09-01",0.970448177482025],["2013-10-01",0.972224366782906],["2013-11-01",0.97391518362249],["2013-12-01",0.975423315392571],["2014-01-01",0.976921972290395],["2014-02-01",0.97823645673634],["2014-03-01",0.97957855225842],["2014-04-01",0.980992099657577],["2014-05-01",0.982473622896551],["2014-06-01",0.984073150615668],["2014-07-01",0.985702006885595],["2014-08-01",0.987603703319152],["2014-09-01",0.989506155770269],["2014-10-01",0.991383363808922],["2014-11-01",0.993112959418826],["2014-12-01",0.994608132061805],["2015-01-01",0.996107750416745],["2015-02-01",0.997306408041825],["2015-03-01",0.998590610697427],["2015-04-01",1]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","width":[1,3]},"xaxis":{"type":"datetime"},"yaxis":{"decimalsInFloat":2},"markers":{"size":[3,6]}},"auto_update":true},"evals":[],"jsHooks":[]}</script><div class="sourceCode" id="cb12"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb12-1" title="1"><span class="kw"><a href="../reference/apex.html">apex</a></span>(<span class="dt">data =</span> economics_long, <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> value01, <span class="dt">group =</span> variable)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb12-2" title="2"><span class="st"> </span><span class="kw"><a href="../reference/ax_yaxis.html">ax_yaxis</a></span>(<span class="dt">decimalsInFloat =</span> <span class="dv">2</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb12-3" title="3"><span class="st"> </span><span class="kw"><a href="../reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">dashArray =</span> <span class="kw"><a href="https://www.rdocumentation.org/packages/base/topics/c">c</a></span>(<span class="dv">8</span>, <span class="dv">5</span>))</a></code></pre></div>
<div id="htmlwidget-b00ee41e18e051e39bb0" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-b00ee41e18e051e39bb0">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"pce","data":[["2013-09-01",0.92924677636026],["2013-10-01",0.933773134481608],["2013-11-01",0.939574402546397],["2013-12-01",0.942167004646148],["2014-01-01",0.941704956747183],["2014-02-01",0.946299766409118],["2014-03-01",0.952871114305516],["2014-04-01",0.957970754079284],["2014-05-01",0.961889604777918],["2014-06-01",0.967759324383294],["2014-07-01",0.971481376902739],["2014-08-01",0.978651675779278],["2014-09-01",0.979772569756398],["2014-10-01",0.985385596084572],["2014-11-01",0.987815625775428],["2014-12-01",0.988722608688212],["2015-01-01",0.987353577876462],["2015-02-01",0.990468122973193],["2015-03-01",0.99696246288643],["2015-04-01",1]]},{"name":"pop","data":[["2013-09-01",0.970448177482025],["2013-10-01",0.972224366782906],["2013-11-01",0.97391518362249],["2013-12-01",0.975423315392571],["2014-01-01",0.976921972290395],["2014-02-01",0.97823645673634],["2014-03-01",0.97957855225842],["2014-04-01",0.980992099657577],["2014-05-01",0.982473622896551],["2014-06-01",0.984073150615668],["2014-07-01",0.985702006885595],["2014-08-01",0.987603703319152],["2014-09-01",0.989506155770269],["2014-10-01",0.991383363808922],["2014-11-01",0.993112959418826],["2014-12-01",0.994608132061805],["2015-01-01",0.996107750416745],["2015-02-01",0.997306408041825],["2015-03-01",0.998590610697427],["2015-04-01",1]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","dashArray":[8,5]},"xaxis":{"type":"datetime"},"yaxis":{"decimalsInFloat":2}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
<div id="htmlwidget-d19844c5929e988a4e8f" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-d19844c5929e988a4e8f">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"pce","data":[["2013-09-01",0.92924677636026],["2013-10-01",0.933773134481608],["2013-11-01",0.939574402546397],["2013-12-01",0.942167004646148],["2014-01-01",0.941704956747183],["2014-02-01",0.946299766409118],["2014-03-01",0.952871114305516],["2014-04-01",0.957970754079284],["2014-05-01",0.961889604777918],["2014-06-01",0.967759324383294],["2014-07-01",0.971481376902739],["2014-08-01",0.978651675779278],["2014-09-01",0.979772569756398],["2014-10-01",0.985385596084572],["2014-11-01",0.987815625775428],["2014-12-01",0.988722608688212],["2015-01-01",0.987353577876462],["2015-02-01",0.990468122973193],["2015-03-01",0.99696246288643],["2015-04-01",1]]},{"name":"pop","data":[["2013-09-01",0.970448177482025],["2013-10-01",0.972224366782906],["2013-11-01",0.97391518362249],["2013-12-01",0.975423315392571],["2014-01-01",0.976921972290395],["2014-02-01",0.97823645673634],["2014-03-01",0.97957855225842],["2014-04-01",0.980992099657577],["2014-05-01",0.982473622896551],["2014-06-01",0.984073150615668],["2014-07-01",0.985702006885595],["2014-08-01",0.987603703319152],["2014-09-01",0.989506155770269],["2014-10-01",0.991383363808922],["2014-11-01",0.993112959418826],["2014-12-01",0.994608132061805],["2015-01-01",0.996107750416745],["2015-02-01",0.997306408041825],["2015-03-01",0.998590610697427],["2015-04-01",1]]}],"dataLabels":{"enabled":false},"stroke":{"curve":"straight","dashArray":[8,5]},"xaxis":{"type":"datetime"},"yaxis":{"decimalsInFloat":2}},"auto_update":true},"evals":[],"jsHooks":[]}</script>
</div>
</div>

View File

@ -0,0 +1,104 @@
HTMLWidgets.widget({
name: 'apexcharter',
type: 'output',
factory: function(el, width, height) {
var ax_opts;
var apexchart = null;
return {
renderValue: function(x) {
// Global options
ax_opts = x.ax_opts;
// Sizing
if (typeof ax_opts.chart === 'undefined') {
ax_opts.chart = {};
}
ax_opts.chart.width = width;
ax_opts.chart.height = height;
// Generate or update chart
if (apexchart === null) {
apexchart = new ApexCharts(document.querySelector("#" + el.id), ax_opts);
apexchart.render();
} else {
if (x.auto_update) {
apexchart.updateSeries(ax_opts.series);
} else {
apexchart.destroy();
apexchart = new ApexCharts(document.querySelector("#" + el.id), ax_opts);
apexchart.render();
}
}
},
getChart: function(){
return apexchart;
},
resize: function(width, height) {
apexchart.updateOptions({
chart: {
width: width,
height: height
}
});
}
};
}
});
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
function get_widget(id){
// Get the HTMLWidgets object
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
// Use the getChart method we created to get the underlying billboard chart
var widgetObj ;
if (typeof htmlWidgetsObj != 'undefined') {
widgetObj = htmlWidgetsObj.getChart();
}
return(widgetObj);
}
if (HTMLWidgets.shinyMode) {
// update serie
Shiny.addCustomMessageHandler('update-apexchart-series',
function(obj) {
var chart = get_widget(obj.id);
if (typeof chart != 'undefined') {
chart.updateSeries([{
data: obj.data.newSeries
}], obj.data.animate);
}
});
// update options
Shiny.addCustomMessageHandler('update-apexchart-options',
function(obj) {
var chart = get_widget(obj.id);
if (typeof chart != 'undefined') {
chart.updateOptions(obj.data.options);
}
});
}

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,104 @@
HTMLWidgets.widget({
name: 'apexcharter',
type: 'output',
factory: function(el, width, height) {
var ax_opts;
var apexchart = null;
return {
renderValue: function(x) {
// Global options
ax_opts = x.ax_opts;
// Sizing
if (typeof ax_opts.chart === 'undefined') {
ax_opts.chart = {};
}
ax_opts.chart.width = width;
ax_opts.chart.height = height;
// Generate or update chart
if (apexchart === null) {
apexchart = new ApexCharts(document.querySelector("#" + el.id), ax_opts);
apexchart.render();
} else {
if (x.auto_update) {
apexchart.updateSeries(ax_opts.series);
} else {
apexchart.destroy();
apexchart = new ApexCharts(document.querySelector("#" + el.id), ax_opts);
apexchart.render();
}
}
},
getChart: function(){
return apexchart;
},
resize: function(width, height) {
apexchart.updateOptions({
chart: {
width: width,
height: height
}
});
}
};
}
});
// From Friss tuto (https://github.com/FrissAnalytics/shinyJsTutorials/blob/master/tutorials/tutorial_03.Rmd)
function get_widget(id){
// Get the HTMLWidgets object
var htmlWidgetsObj = HTMLWidgets.find("#" + id);
// Use the getChart method we created to get the underlying billboard chart
var widgetObj ;
if (typeof htmlWidgetsObj != 'undefined') {
widgetObj = htmlWidgetsObj.getChart();
}
return(widgetObj);
}
if (HTMLWidgets.shinyMode) {
// update serie
Shiny.addCustomMessageHandler('update-apexchart-series',
function(obj) {
var chart = get_widget(obj.id);
if (typeof chart != 'undefined') {
chart.updateSeries([{
data: obj.data.newSeries
}], obj.data.animate);
}
});
// update options
Shiny.addCustomMessageHandler('update-apexchart-options',
function(obj) {
var chart = get_widget(obj.id);
if (typeof chart != 'undefined') {
chart.updateOptions(obj.data.options);
}
});
}

View File

@ -60,7 +60,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -10,7 +10,9 @@
<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 property="og:description" content="Provides an 'htmlwidgets' interface to 'apexcharts.js'.
'Apexcharts' is a modern JavaScript charting library to build interactive charts and visualizations with simple API.
'Apexcharts' examples and documentation are available here: &lt;https://apexcharts.com/&gt;.">
<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>
@ -30,7 +32,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>
@ -91,7 +93,7 @@
<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><a href="https://CRAN.R-project.org/package=apexcharter"><img src="http://www.r-pkg.org/badges/version/apexcharter" alt="version"></a> <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">
@ -206,6 +208,8 @@
<div class="links">
<h2>Links</h2>
<ul class="list-unstyled">
<li>Download from CRAN at <br><a href="https://cloud.r-project.org/package=apexcharter">https://cloud.r-project.org/package=apexcharter</a>
</li>
<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>

View File

@ -60,7 +60,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>
@ -121,11 +121,12 @@
<small>Source: <a href='https://github.com/dreamRs/apexcharter/blob/master/NEWS.md'><code>NEWS.md</code></a></small>
</div>
<div id="apexcharter-010" class="section level1">
<div id="apexcharter-011" class="section level1">
<h1 class="page-header">
<a href="#apexcharter-010" class="anchor"></a>apexcharter 0.1.0</h1>
<a href="#apexcharter-011" class="anchor"></a>apexcharter 0.1.1<small> 2019-07-28 </small>
</h1>
<ul>
<li>New release: create interactive chart with the JavaScript ApexCharts library</li>
<li>First CRAN release: create interactive chart with the JavaScript ApexCharts library. Types of graphics available : bars, columns, splines, lines, scatter, pie, donuts, heatmap, gauge.</li>
</ul>
</div>
</div>
@ -134,7 +135,7 @@
<div id="tocnav">
<h2>Contents</h2>
<ul class="nav nav-pills nav-stacked">
<li><a href="#apexcharter-010">0.1.0</a></li>
<li><a href="#apexcharter-011">0.1.1</a></li>
</ul>
</div>
</div>

View File

@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick Apex Chart — apex • apexcharter</title>
<title>Quick ApexChart — apex • 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>
@ -30,9 +30,9 @@
<meta property="og:title" content="Quick Apex Chart — apex" />
<meta property="og:title" content="Quick ApexChart — apex" />
<meta property="og:description" content="Quick Apex Chart" />
<meta property="og:description" content="Initialize a chart with three main parameters : data, mapping and type of chart." />
<meta name="twitter:card" content="summary" />
@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>
@ -120,14 +120,14 @@
<div class="row">
<div class="col-md-9 contents">
<div class="page-header">
<h1>Quick Apex Chart</h1>
<h1>Quick ApexChart</h1>
<small class="dont-index">Source: <a href='https://github.com/dreamRs/apexcharter/blob/master/R/apex.R'><code>R/apex.R</code></a></small>
<div class="hidden name"><code>apex.Rd</code></div>
</div>
<div class="ref-description">
<p>Quick Apex Chart</p>
<p>Initialize a chart with three main parameters : data, mapping and type of chart.</p>
</div>
@ -172,6 +172,10 @@
</tr>
</table>
<h2 class="hasAnchor" id="value"><a class="anchor" href="#value"></a>Value</h2>
<p>A <code>apexcharts</code> <code>htmlwidget</code> object.</p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'><span class='fu'><a href='https://www.rdocumentation.org/packages/base/topics/library'>library</a></span>(<span class='no'>dplyr</span>)</div><div class='output co'>#&gt; <span class='message'></span>
@ -221,7 +225,9 @@
<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="#examples">Examples</a></li>
</ul>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -65,7 +65,7 @@ as Depends of apexcharter" />
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -66,7 +66,7 @@ to create interactive and modern SVG charts." />
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -64,7 +64,7 @@ applications and interactive Rmd documents." />
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>
@ -165,6 +165,10 @@ is useful if you want to save an expression in a variable.</p></td>
</tr>
</table>
<h2 class="hasAnchor" id="value"><a class="anchor" href="#value"></a>Value</h2>
<p>An Apexchart output that can be included in the application UI.</p>
<h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examples</h2>
<pre class="examples"><div class='input'>
@ -208,7 +212,9 @@ is useful if you want to save an expression in a variable.</p></td>
<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="#examples">Examples</a></li>
</ul>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>
@ -172,6 +172,10 @@
</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_plotOptions.html'>ax_plotOptions</a></code>.</p>
<h2 class="hasAnchor" id="note"><a class="anchor" href="#note"></a>Note</h2>
<p>See <a href='https://apexcharts.com/docs/options/plotoptions/bar/'>https://apexcharts.com/docs/options/plotoptions/bar/</a>.</p>
@ -196,6 +200,8 @@
<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>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>
@ -194,20 +194,76 @@
</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>
</ul>
<li><a href="#examples">Examples</a></li>
</ul>
</div>
</div>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>
@ -159,6 +159,10 @@
</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_plotOptions.html'>ax_plotOptions</a></code>.</p>
<h2 class="hasAnchor" id="note"><a class="anchor" href="#note"></a>Note</h2>
<p>See <a href='https://apexcharts.com/docs/options/plotoptions/heatmap/'>https://apexcharts.com/docs/options/plotoptions/heatmap/</a>.</p>
@ -194,6 +198,8 @@
<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>

View File

@ -60,7 +60,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>
@ -140,7 +140,7 @@
<td>
<p><code><a href="apex.html">apex()</a></code> </p>
</td>
<td><p>Quick Apex Chart</p></td>
<td><p>Quick ApexChart</p></td>
</tr><tr>
<td>

File diff suppressed because it is too large Load Diff

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>
@ -168,6 +168,10 @@ and <code>background</code> (The background color of the pie).</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_plotOptions.html'>ax_plotOptions</a></code>.</p>
<h2 class="hasAnchor" id="note"><a class="anchor" href="#note"></a>Note</h2>
<p>See <a href='https://apexcharts.com/docs/options/plotoptions/pie/'>https://apexcharts.com/docs/options/plotoptions/pie/</a>.</p>
@ -190,6 +194,8 @@ and <code>background</code> (The background color of the pie).</p></td>
<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>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>
@ -180,6 +180,10 @@
</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_plotOptions.html'>ax_plotOptions</a></code>.</p>
<h2 class="hasAnchor" id="note"><a class="anchor" href="#note"></a>Note</h2>
<p>See <a href='https://apexcharts.com/docs/options/plotoptions/radialbar/'>https://apexcharts.com/docs/options/plotoptions/radialbar/</a>.</p>
@ -216,6 +220,8 @@
<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>

View File

@ -63,7 +63,7 @@
</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.0</span>
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.1</span>
</span>
</div>