diff --git a/src/pages/_data/charts.yml b/src/pages/_data/charts.yml
index 088aad6041d40ba260367afb8baddd8d3169828e..f223d32d5aa72f47ecb46e161ba9d2d2d7962e8e 100644
--- a/src/pages/_data/charts.yml
+++ b/src/pages/_data/charts.yml
@@ -1,3 +1,74 @@
+demo-pie:
+ type: donut
+ demo: true
+ sparkline: true
+ legend: true
+ series:
+ - name: Direct
+ color: blue
+ data: 44
+ - name: Affilliate
+ color: blue-300
+ data: 55
+ - name: E-mail
+ color: blue-100
+ data: 12
+ - name: Other
+ color: gray-300
+ data: 2
+
+demo-bar:
+ type: bar
+ legend: true
+ horizontal: true
+ stacked: true
+ categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014]
+ x-formatter: 'val + "K"'
+ series:
+ - name: Container for a Fanta
+ color: purple
+ data: [ 44, 55, 41, 37, 22, 43, 21 ]
+ - name: Strange sunglasses
+ color: green
+ data: [ 53, 32, 33, 52, 13, 43, 32 ]
+ - name: Pen Pineapple Apple Pen
+ color: yellow
+ data: [ 12, 17, 11, 9, 15, 11, 20 ]
+ - name: Binoculars
+ color: red
+ data: [ 9, 7, 5, 8, 6, 9, 4 ]
+ - name: Magical notebook
+ color: blue
+ data: [ 25, 12, 19, 32, 25, 24, 10 ]
+
+demo-area:
+ type: area
+ legend: true
+ datetime: true
+ series:
+ - name: series1
+ color: blue
+ data: [ 56, 40, 39, 47, 34, 48, 44 ]
+ - name: series2
+ color: purple
+ data: [ 45, 43, 30, 23, 38, 39, 54 ]
+
+demo-line:
+ type: line
+ datetime: true
+ stroke-curve: straight
+ legend: true
+ series:
+ - name: Session Duration
+ color: yellow
+ data: [ 117, 92, 94, 98, 75, 110, 69, 80, 109, 113, 115, 95 ]
+ - name: Page Views
+ color: green
+ data: [ 59, 80, 61, 66, 70, 84, 87, 64, 94, 56, 55, 67 ]
+ - name: Total Visits
+ color: blue
+ data: [ 53, 51, 52, 41, 46, 60, 45, 43, 30, 50, 58, 59 ]
+
social-referrals:
demo: false
type: line
@@ -5,6 +76,7 @@ social-referrals:
height: 12
legend: true
show-x: true
+ name: Social referrals
series:
- name: Facebook
color: facebook
@@ -40,41 +112,41 @@ completion-tasks:
- name: Tasks completion
data: [155, 65, 465, 265, 225, 325, 80]
-completion-tasks2:
+completion-tasks-2:
demo: true
extend: completion-tasks
type: line
-completion-tasks3:
+completion-tasks-3:
demo: true
extend: completion-tasks
type: area
-completion-tasks4:
+completion-tasks-4:
demo: true
extend: completion-tasks
stroke-curve: straight
type: line
-completion-tasks5:
+completion-tasks-5:
demo: true
extend: completion-tasks
stroke-curve: stepline
type: line
-completion-tasks6:
+completion-tasks-6:
demo: true
extend: completion-tasks
type: bar
horizontal: true
-completion-tasks7:
+completion-tasks-7:
demo: true
extend: completion-tasks
type: line
datalabels: true
-completion-tasks8:
+completion-tasks-8:
demo: true
datetime: true
type: bar
@@ -83,19 +155,19 @@ completion-tasks8:
- data: [113, 42, 65, 54, 76, 65, 35]
color: red
-completion-tasks9:
+completion-tasks-9:
demo: true
- extend: completion-tasks8
+ extend: completion-tasks-8
stacked: true
-completion-tasks10:
+completion-tasks-10:
demo: true
- extend: completion-tasks8
+ extend: completion-tasks-8
type: area
-completion-tasks11:
+completion-tasks-11:
demo: true
- extend: completion-tasks8
+ extend: completion-tasks-8
type: area
stacked: true
@@ -107,23 +179,7 @@ tasks-overview:
- name: A
data: [44, 32, 48, 72, 60, 16, 44, 32, 78, 50, 68, 34, 26, 48, 72, 60, 84, 64, 74, 52, 62, 50, 32, 22]
-total-sales:
- type: donut
- demo: true
- sparkline: true
- series:
- - name: Direct
- color: blue
- data: 44
- - name: Affilliate
- color: blue-300
- data: 55
- - name: E-mail
- color: green-200
- data: 12
- - name: Other
- color: gray-300
- data: 2
+
campaigns:
type: radialBar
@@ -148,7 +204,6 @@ tasks:
fill: true
remove-padding: true
hide-tooltip: true
- legend-position: 'top'
series:
- name: 'New'
color: blue
@@ -165,7 +220,6 @@ development-activity:
groups: [1, 2, 3]
hide-points: true
remove-padding: true
- legend-position: 'top'
sparkline: true
datetime: true
series:
diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml
index 35ee823fb1ef2a09a576264a1d163b476dffeeae..48dab4ab637962596e2d9b0269f46f94ddd2424b 100644
--- a/src/pages/_data/menu.yml
+++ b/src/pages/_data/menu.yml
@@ -53,9 +53,6 @@ base:
charts:
url: charts.html
title: Charts
- charts-heatmap:
- url: charts-heatmap.html
- title: Charts heatmap
pagination:
url: pagination.html
title: Pagination
diff --git a/src/pages/_docs/charts.md b/src/pages/_docs/charts.md
index 75cd5c256d95c1f743fe31618ab0750fc6855c16..c9c7fecb48c8e0c790b4259eea276edce9f7d1e6 100644
--- a/src/pages/_docs/charts.md
+++ b/src/pages/_docs/charts.md
@@ -1,26 +1,60 @@
---
title: Charts
menu: docs.plugins.charts
+libs: apexcharts
+description: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
---
+[ApexCharts](https://apexcharts.com/) documentation.
-## Default markup
+## Line Chart
+
+Line charts are a typical pictorial representation that depicts trends and behaviors over time.
+
+{% capture code %}
+{% include docs/chart.html chart="demo-line" %}
+{% endcapture %}
+{% include example.html code=code columns=1 %}
+
+## Area Chart
+
+Area charts are used to represent quantitative variations.
+
+{% capture code %}
+{% include docs/chart.html chart="demo-area" %}
+{% endcapture %}
+{% include example.html code=code columns=1 %}
+
+## Bar Chart
+
+A bar chart is the best tool for displaying comparisons between categories of data.
+
+{% capture code %}
+{% include docs/chart.html chart="demo-bar" %}
+{% endcapture %}
+{% include example.html code=code columns=2 %}
+
+## Pie Chart
+
+Pie charts are an instrumental visualization tool useful in expressing data and information in terms of percentages, ratio.
+
+{% capture code %}
+{% include docs/chart.html chart="demo-pie" %}
+{% endcapture %}
+{% include example.html code=code columns=1 %}
+
+# Heatmap Chart
+
+Heatmap is a visualization tool that employs color the way a bar chart employs height and width in representing data.
+
+{% capture code %}
+{% include docs/chart.html chart="heatmap-basic" heatmap=true %}
+{% endcapture %}
+{% include example.html code=code columns=2 %}
+
+# Advanced example
-{% for chart in site.data.charts %}
-{% if chart[1].display %}
{% capture code %}
-{% assign data = chart[0] %}
-{% assign key = 'chart-' | append: data %}
-
- {% include ui/chart.html id=key chart-id=data show-scripts=true %}
+{% include docs/chart.html chart="social-referrals" %}
{% endcapture %}
-{% include example.html code=code %}
-{% endif %}
-{% endfor %}
+{% include example.html code=code columns=2 %}
\ No newline at end of file
diff --git a/src/pages/_includes/docs/chart.html b/src/pages/_includes/docs/chart.html
new file mode 100644
index 0000000000000000000000000000000000000000..095da7d2fcef4d8562a7ff8773cb4f4ef7aa365c
--- /dev/null
+++ b/src/pages/_includes/docs/chart.html
@@ -0,0 +1,19 @@
+{% assign chart-id = include.chart %}
+{% assign data = site.data.charts[chart-id] %}
+
+{% if data or include.heatmap %}
+
+ {% if include.title %}
+
+ {% endif %}
+
+ {% if include.heatmap %}
+ {% include ui/chart-heatmap.html chart-id=chart-id show-scripts=true size="lg" %}
+ {% else %}
+ {% include ui/chart.html chart-id=chart-id show-scripts=true size="lg" %}
+ {% endif %}
+
+
+{% endif %}
\ No newline at end of file
diff --git a/src/pages/_includes/example.html b/src/pages/_includes/example.html
index 15c51f6bf112c1afce086943767f33e46c3a8736..a03fda0537f8f905550e8be76d327da8159c3510 100644
--- a/src/pages/_includes/example.html
+++ b/src/pages/_includes/example.html
@@ -1,5 +1,3 @@
-{% assign code = code | replace_regex: '// @formatter:(off|on)', '' %}
-
{% assign demo-code = code %}
{% assign demo-code = demo-code | replace_regex: '\{% (end)?hide %\}', '' %}
{% assign demo-code = demo-code | replace_regex: 'href="#"', 'href="javascript:void(0)"' %}
@@ -19,23 +17,34 @@
-{% assign code = code | strip %}
+
+{% capture html %}
+{{ code }}
+
+{% removeemptylines %}
+{{ site.captured_global.scripts | last }}
+{% endremoveemptylines %}
+{% endcapture %}
+
+{% assign html = html | strip %}
+{% assign html = html | replace_regex: '// @formatter:(off|on)', '' %}
+
{% capture new_line %}
{% endcapture %}
-{% assign code = code | replace_regex: "\n\n+", new_line %}
+{% assign html = html | replace_regex: "\n\n+", new_line %}
{% unless include.show-svg %}
- {% assign code = code | replace_regex: '