Charts

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 documentation.

Line Chart

Line charts are a typical pictorial representation that depicts trends and behaviors over time.

<div class="card">
  <div class="card-body">
    <div id="chart-demo-line" class="chart-lg"></div>
  </div>
</div>
<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]
  		}],
  		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: ["#fab005", "#5eba00", "#206bc4"],
  		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.

<div class="card">
  <div class="card-body">
    <div id="chart-demo-area" class="chart-lg"></div>
  </div>
</div>
<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]
  		}],
  		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: ["#206bc4", "#a55eea"],
  		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.

<div class="card">
  <div class="card-body">
    <div id="chart-demo-bar" class="chart-lg"></div>
  </div>
</div>
<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]
  		}],
  		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: ["#a55eea", "#5eba00", "#fab005", "#cd201f", "#206bc4"],
  		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.

<div class="card">
  <div class="card-body">
    <div id="chart-demo-pie" class="chart-lg"></div>
  </div>
</div>
<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"],
  		grid: {
  			strokeDashArray: 4,
  		},
  		colors: ["#206bc4", "#79a6dc", "#d2e1f3", "#e9ecf1"],
  		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.

<div class="card">
  <div class="card-body">
    <div id="chart-heatmap-basic"></div>
  </div>
</div>
<script>
  var options = {
  	chart: {
  		height: 400,
  		type: "heatmap",
  		toolbar: {
  			show: false,
  		},
  	},
  	dataLabels: {
  		enabled: false
  	},
  	colors: ["#206bc4", ],
  	series: [
  		{ name: "Jan", data: [{x: '1', y: 23},{x: '2', y: 14},{x: '3', y: 24},{x: '4', y: 90},{x: '5', y: 99},{x: '6', y: 28},{x: '7', y: 51},{x: '8', y: 51},{x: '9', y: 98},{x: '10', y: 61},{x: '11', y: 14},{x: '12', y: 51},{x: '13', y: 32},{x: '14', y: 84},{x: '15', y: 9},{x: '16', y: 2},] },
  		{ name: "Feb", data: [{x: '1', y: 82},{x: '2', y: 87},{x: '3', y: 48},{x: '4', y: 15},{x: '5', y: 21},{x: '6', y: 23},{x: '7', y: 80},{x: '8', y: 34},{x: '9', y: 46},{x: '10', y: 8},{x: '11', y: 87},{x: '12', y: 80},{x: '13', y: 23},{x: '14', y: 81},{x: '15', y: 24},{x: '16', y: 51},] },
  		{ name: "Mar", data: [{x: '1', y: 100},{x: '2', y: 52},{x: '3', y: 57},{x: '4', y: 80},{x: '5', y: 14},{x: '6', y: 82},{x: '7', y: 78},{x: '8', y: 16},{x: '9', y: 29},{x: '10', y: 97},{x: '11', y: 52},{x: '12', y: 78},{x: '13', y: 47},{x: '14', y: 10},{x: '15', y: 61},{x: '16', y: 34},] },
  		{ name: "Apr", data: [{x: '1', y: 60},{x: '2', y: 33},{x: '3', y: 42},{x: '4', y: 20},{x: '5', y: 87},{x: '6', y: 100},{x: '7', y: 100},{x: '8', y: 16},{x: '9', y: 57},{x: '10', y: 80},{x: '11', y: 33},{x: '12', y: 100},{x: '13', y: 6},{x: '14', y: 51},{x: '15', y: 35},{x: '16', y: 16},] },
  		{ name: "May", data: [{x: '1', y: 91},{x: '2', y: 81},{x: '3', y: 54},{x: '4', y: 98},{x: '5', y: 52},{x: '6', y: 60},{x: '7', y: 61},{x: '8', y: 99},{x: '9', y: 91},{x: '10', y: 36},{x: '11', y: 81},{x: '12', y: 61},{x: '13', y: 99},{x: '14', y: 80},{x: '15', y: 72},{x: '16', y: 16},] },
  		{ name: "Jun", data: [{x: '1', y: 77},{x: '2', y: 99},{x: '3', y: 64},{x: '4', y: 0},{x: '5', y: 33},{x: '6', y: 91},{x: '7', y: 7},{x: '8', y: 51},{x: '9', y: 3},{x: '10', y: 28},{x: '11', y: 99},{x: '12', y: 7},{x: '13', y: 21},{x: '14', y: 78},{x: '15', y: 19},{x: '16', y: 99},] },
  		{ name: "Jul", data: [{x: '1', y: 67},{x: '2', y: 84},{x: '3', y: 90},{x: '4', y: 4},{x: '5', y: 81},{x: '6', y: 77},{x: '7', y: 3},{x: '8', y: 39},{x: '9', y: 24},{x: '10', y: 23},{x: '11', y: 84},{x: '12', y: 3},{x: '13', y: 14},{x: '14', y: 100},{x: '15', y: 98},{x: '16', y: 51},] },
  		{ name: "Aug", data: [{x: '1', y: 56},{x: '2', y: 81},{x: '3', y: 45},{x: '4', y: 37},{x: '5', y: 99},{x: '6', y: 67},{x: '7', y: 9},{x: '8', y: 90},{x: '9', y: 48},{x: '10', y: 82},{x: '11', y: 81},{x: '12', y: 9},{x: '13', y: 87},{x: '14', y: 61},{x: '15', y: 32},{x: '16', y: 39},] },
  		{ name: "Sep", data: [{x: '1', y: 17},{x: '2', y: 10},{x: '3', y: 59},{x: '4', y: 67},{x: '5', y: 84},{x: '6', y: 56},{x: '7', y: 24},{x: '8', y: 15},{x: '9', y: 57},{x: '10', y: 100},{x: '11', y: 10},{x: '12', y: 24},{x: '13', y: 52},{x: '14', y: 7},{x: '15', y: 82},{x: '16', y: 90},] },
  		{ name: "Oct", data: [{x: '1', y: 41},{x: '2', y: 51},{x: '3', y: 79},{x: '4', y: 60},{x: '5', y: 81},{x: '6', y: 17},{x: '7', y: 61},{x: '8', y: 80},{x: '9', y: 42},{x: '10', y: 60},{x: '11', y: 51},{x: '12', y: 61},{x: '13', y: 33},{x: '14', y: 3},{x: '15', y: 53},{x: '16', y: 15},] },
  		{ name: "Nov", data: [{x: '1', y: 90},{x: '2', y: 80},{x: '3', y: 30},{x: '4', y: 74},{x: '5', y: 10},{x: '6', y: 41},{x: '7', y: 35},{x: '8', y: 20},{x: '9', y: 54},{x: '10', y: 91},{x: '11', y: 80},{x: '12', y: 35},{x: '13', y: 81},{x: '14', y: 9},{x: '15', y: 12},{x: '16', y: 80},] },
  		{ name: "Dec", data: [{x: '1', y: 54},{x: '2', y: 78},{x: '3', y: 42},{x: '4', y: 76},{x: '5', y: 51},{x: '6', y: 90},{x: '7', y: 72},{x: '8', y: 98},{x: '9', y: 64},{x: '10', y: 77},{x: '11', y: 78},{x: '12', y: 72},{x: '13', y: 99},{x: '14', y: 24},{x: '15', y: 10},{x: '16', y: 20},] },
  	],
  	xaxis: {
  		type: "category"
  	},
  	legend: {
  		show: false,
  	},
  };
  (new ApexCharts(document.querySelector("#chart-heatmap-basic"),options)).render();
</script>

Advanced example

<div class="card">
  <div class="card-body">
    <div id="chart-social-referrals" class="chart-lg"></div>
  </div>
</div>
<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]
  		}],
  		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: ["#3b5998", "#1da1f2", "#ea4c89"],
  		legend: {
  			show: true,
  			position: 'bottom',
  			offsetY: 12,
  			markers: {
  				width: 10,
  				height: 10,
  				radius: 100,
  			},
  			itemMargin: {
  				horizontal: 8,
  				vertical: 8
  			},
  		},
  	})).render();
  });
</script>