mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
527 lines
14 KiB
Plaintext
527 lines
14 KiB
Plaintext
---
|
|
title: 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.
|
|
---
|
|
|
|
To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
|
|
|
|
See also the [ApexCharts](https://apexcharts.com/) documentation.
|
|
|
|
## Line Chart
|
|
|
|
Line charts are a typical pictorial representation that depicts trends and behaviors over time.
|
|
|
|
```html example code centered columns={2} height="25rem"
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div id="chart-demo-line" class="chart-lg"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-line'), {
|
|
chart: {
|
|
type: "line",
|
|
fontFamily: 'inherit',
|
|
height: 240,
|
|
parentHeightOffset: 0,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
lineCap: "round",
|
|
curve: "straight",
|
|
},
|
|
series: [{
|
|
name: "Session Duration",
|
|
data: [117, 92, 94, 98, 75, 110, 69, 80, 109, 113, 115, 95]
|
|
}, {
|
|
name: "Page Views",
|
|
data: [59, 80, 61, 66, 70, 84, 87, 64, 94, 56, 55, 67]
|
|
}, {
|
|
name: "Total Visits",
|
|
data: [53, 51, 52, 41, 46, 60, 45, 43, 30, 50, 58, 59]
|
|
}],
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: -20,
|
|
right: 0,
|
|
left: -4,
|
|
bottom: -4
|
|
},
|
|
strokeDashArray: 4,
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
padding: 0,
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
},
|
|
type: 'datetime',
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
padding: 4
|
|
},
|
|
},
|
|
labels: [
|
|
'2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02'
|
|
],
|
|
colors: [tabler.getColor("yellow"), tabler.getColor("green"), tabler.getColor("primary")],
|
|
legend: {
|
|
show: true,
|
|
position: 'bottom',
|
|
offsetY: 12,
|
|
markers: {
|
|
width: 10,
|
|
height: 10,
|
|
radius: 100,
|
|
},
|
|
itemMargin: {
|
|
horizontal: 8,
|
|
vertical: 8
|
|
},
|
|
},
|
|
})).render();
|
|
});
|
|
</script>
|
|
```
|
|
|
|
## Area Chart
|
|
|
|
Area charts are used to represent quantitative variations.
|
|
|
|
```html example code centered columns={2} height="25rem"
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div id="chart-demo-area" class="chart-lg"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-area'), {
|
|
chart: {
|
|
type: "area",
|
|
fontFamily: 'inherit',
|
|
height: 240,
|
|
parentHeightOffset: 0,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
opacity: .16,
|
|
type: 'solid'
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
lineCap: "round",
|
|
curve: "smooth",
|
|
},
|
|
series: [{
|
|
name: "series1",
|
|
data: [56, 40, 39, 47, 34, 48, 44]
|
|
}, {
|
|
name: "series2",
|
|
data: [45, 43, 30, 23, 38, 39, 54]
|
|
}],
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: -20,
|
|
right: 0,
|
|
left: -4,
|
|
bottom: -4
|
|
},
|
|
strokeDashArray: 4,
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
padding: 0,
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
},
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
type: 'datetime',
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
padding: 4
|
|
},
|
|
},
|
|
labels: [
|
|
'2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27'
|
|
],
|
|
colors: [tabler.getColor("primary"), tabler.getColor("purple")],
|
|
legend: {
|
|
show: true,
|
|
position: 'bottom',
|
|
offsetY: 12,
|
|
markers: {
|
|
width: 10,
|
|
height: 10,
|
|
radius: 100,
|
|
},
|
|
itemMargin: {
|
|
horizontal: 8,
|
|
vertical: 8
|
|
},
|
|
},
|
|
})).render();
|
|
});
|
|
</script>
|
|
```
|
|
|
|
## Bar Chart
|
|
|
|
A bar chart is the best tool for displaying comparisons between categories of data.
|
|
|
|
```html example code centered columns={2} height="25rem"
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div id="chart-demo-bar" class="chart-lg"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-bar'), {
|
|
chart: {
|
|
type: "bar",
|
|
fontFamily: 'inherit',
|
|
height: 240,
|
|
parentHeightOffset: 0,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
stacked: true,
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
barHeight: '50%',
|
|
horizontal: true,
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
series: [{
|
|
name: "Container for a Fanta",
|
|
data: [44, 55, 41, 37, 22, 43, 21]
|
|
}, {
|
|
name: "Strange sunglasses",
|
|
data: [53, 32, 33, 52, 13, 43, 32]
|
|
}, {
|
|
name: "Pen Pineapple Apple Pen",
|
|
data: [12, 17, 11, 9, 15, 11, 20]
|
|
}, {
|
|
name: "Binoculars",
|
|
data: [9, 7, 5, 8, 6, 9, 4]
|
|
}, {
|
|
name: "Magical notebook",
|
|
data: [25, 12, 19, 32, 25, 24, 10]
|
|
}],
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: -20,
|
|
right: 0,
|
|
left: -4,
|
|
bottom: -4
|
|
},
|
|
strokeDashArray: 4,
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
padding: 0,
|
|
formatter: function(val) {
|
|
return val + "K"
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
},
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
categories: ['2008', '2009', '2010', '2011', '2012', '2013', '2014'],
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
padding: 4
|
|
},
|
|
},
|
|
colors: [tabler.getColor("purple"), tabler.getColor("green"), tabler.getColor("yellow"), tabler.getColor("red"), tabler.getColor("primary")],
|
|
legend: {
|
|
show: true,
|
|
position: 'bottom',
|
|
offsetY: 12,
|
|
markers: {
|
|
width: 10,
|
|
height: 10,
|
|
radius: 100,
|
|
},
|
|
itemMargin: {
|
|
horizontal: 8,
|
|
vertical: 8
|
|
},
|
|
},
|
|
})).render();
|
|
});
|
|
</script>
|
|
```
|
|
|
|
## Pie Chart
|
|
|
|
Pie charts are an instrumental visualization tool useful in expressing data and information in terms of percentages, ratio.
|
|
|
|
```html example code centered columns={2} height="25rem"
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div id="chart-demo-pie" class="chart-lg"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-pie'), {
|
|
chart: {
|
|
type: "donut",
|
|
fontFamily: 'inherit',
|
|
height: 240,
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
series: [44, 55, 12, 2],
|
|
labels: ["Direct", "Affilliate", "E-mail", "Other"],
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
grid: {
|
|
strokeDashArray: 4,
|
|
},
|
|
colors: [tabler.getColor("primary"), tabler.getColor("primary", 0.8), tabler.getColor("primary", 0.6), tabler.getColor("gray-300")],
|
|
legend: {
|
|
show: true,
|
|
position: 'bottom',
|
|
offsetY: 12,
|
|
markers: {
|
|
width: 10,
|
|
height: 10,
|
|
radius: 100,
|
|
},
|
|
itemMargin: {
|
|
horizontal: 8,
|
|
vertical: 8
|
|
},
|
|
},
|
|
tooltip: {
|
|
fillSeriesColor: false
|
|
},
|
|
})).render();
|
|
});
|
|
</script>
|
|
```
|
|
|
|
## Heatmap Chart
|
|
|
|
Heatmap is a visualization tool that employs color the way a bar chart employs height and width in representing data.
|
|
|
|
```html example code centered columns={2} height="25rem"
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div id="chart-demo-pie" class="chart-lg"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-pie'), {
|
|
chart: {
|
|
type: "donut",
|
|
fontFamily: 'inherit',
|
|
height: 240,
|
|
sparkline: {
|
|
enabled: true
|
|
},
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
series: [44, 55, 12, 2],
|
|
labels: ["Direct", "Affilliate", "E-mail", "Other"],
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
grid: {
|
|
strokeDashArray: 4,
|
|
},
|
|
colors: [tabler.getColor("primary"), tabler.getColor("primary", 0.8), tabler.getColor("primary", 0.6), tabler.getColor("gray-300")],
|
|
legend: {
|
|
show: true,
|
|
position: 'bottom',
|
|
offsetY: 12,
|
|
markers: {
|
|
width: 10,
|
|
height: 10,
|
|
radius: 100,
|
|
},
|
|
itemMargin: {
|
|
horizontal: 8,
|
|
vertical: 8
|
|
},
|
|
},
|
|
tooltip: {
|
|
fillSeriesColor: false
|
|
},
|
|
})).render();
|
|
});
|
|
</script>
|
|
```
|
|
|
|
## Advanced example
|
|
|
|
```html example code centered columns={2} height="25rem"
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div id="chart-social-referrals" class="chart-lg"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
window.ApexCharts && (new ApexCharts(document.getElementById('chart-social-referrals'), {
|
|
chart: {
|
|
type: "line",
|
|
fontFamily: 'inherit',
|
|
height: 240,
|
|
parentHeightOffset: 0,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
animations: {
|
|
enabled: false
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
lineCap: "round",
|
|
curve: "smooth",
|
|
},
|
|
series: [{
|
|
name: "Facebook",
|
|
data: [13281, 8521, 15038, 9983, 15417, 8888, 7052, 14270, 5214, 9587, 5950, 16852, 17836, 12217, 17406, 12262, 9147, 14961, 18292, 15230, 13435, 10649, 5140, 13680, 4508, 13271, 13413, 5543, 18727, 18238, 18175, 6246, 5864, 17847, 9170, 6445, 12945, 8142, 8980, 10422, 15535, 11569, 10114, 17621, 16138, 13046, 6652, 9906, 14100, 16495, 6749]
|
|
}, {
|
|
name: "Twitter",
|
|
data: [3680, 1862, 3070, 2252, 5348, 3091, 3000, 3984, 5176, 5325, 2420, 5474, 3098, 1893, 3748, 2879, 4197, 5186, 4213, 4334, 2807, 1594, 4863, 2030, 3752, 4856, 5341, 3954, 3461, 3097, 3404, 4949, 2283, 3227, 3630, 2360, 3477, 4675, 1901, 2252, 3347, 2954, 5029, 2079, 2830, 3292, 4578, 3401, 4104, 3749, 4457, 3734]
|
|
}, {
|
|
name: "Dribbble",
|
|
data: [722, 1866, 961, 1108, 1110, 561, 1753, 1815, 1985, 776, 859, 547, 1488, 766, 702, 621, 1599, 1372, 1620, 963, 759, 764, 739, 789, 1696, 1454, 1842, 734, 551, 1689, 1924, 1875, 908, 1675, 1541, 1953, 534, 502, 1524, 1867, 719, 1472, 1608, 1025, 889, 1150, 654, 1695, 1662, 1285, 1787]
|
|
}],
|
|
tooltip: {
|
|
theme: 'dark'
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: -20,
|
|
right: 0,
|
|
left: -4,
|
|
bottom: -4
|
|
},
|
|
strokeDashArray: 4,
|
|
xaxis: {
|
|
lines: {
|
|
show: true
|
|
}
|
|
},
|
|
},
|
|
xaxis: {
|
|
labels: {
|
|
padding: 0,
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
},
|
|
type: 'datetime',
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
padding: 4
|
|
},
|
|
},
|
|
labels: [
|
|
'2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24', '2020-07-25', '2020-07-26', '2020-07-27', '2020-07-28', '2020-07-29', '2020-07-30', '2020-07-31', '2020-08-01', '2020-08-02', '2020-08-03', '2020-08-04', '2020-08-05', '2020-08-06', '2020-08-07', '2020-08-08', '2020-08-09', '2020-08-10'
|
|
],
|
|
colors: [tabler.getColor("facebook"), tabler.getColor("twitter"), tabler.getColor("dribbble")],
|
|
legend: {
|
|
show: true,
|
|
position: 'bottom',
|
|
offsetY: 12,
|
|
markers: {
|
|
width: 10,
|
|
height: 10,
|
|
radius: 100,
|
|
},
|
|
itemMargin: {
|
|
horizontal: 8,
|
|
vertical: 8
|
|
},
|
|
},
|
|
})).render();
|
|
});
|
|
</script>
|
|
```
|