Search by Queries/Bugs/Errors

Apexcharts example code

Created at 07-Feb-2024 , By samar

In this article, we'll show you a apexcharts example code. Apexcharts a popular JavaScript library renowned for its flexibility and ease of use. ApexCharts is a JavaScript library used for creating interactive and visually appealing charts and graphs on web applications. It offers a wide range of chart types, including line, bar, area, pie, and scatter plots.

We'll explore how to create a compelling combination of line and bar charts, specifically showcasing the number of clicks within 3-hour intervals over a defined period.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Bar chart with Line</title>
	<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
	<style>
		.arrow_box {
			border: 2px solid #D3D3D3;
			border-radius: 6px;
			font-size: 18px;
		}
		.timeslot {
			padding: 10px 15px;
			margin-bottom: 10px;
			border-bottom: 1px solid #D3D3D3;
			background-color: #D3D3D3;
			opacity: 0.6;
		}
		.clicksCount {
			padding: 10px 15px;
			background-color: #ffffff;
		}

	</style>
</head>
<body>

	<div id="chart"></div>

	<script>
  		let options = {
			series: [{
				name: 'click',
				type: 'bar',
				data: [23, 42, 35, 27, 43, 22, 17]
			}, 
			{
				name: 'click',
				type: 'line',
				data: [23, 42, 35, 27, 43, 22, 17]
			}],
			chart: {
				height: 350,
				type: 'bar',
				width: '1000',
				toolbar: {
					show: false
				},
			},
			stroke: {
				curve: 'smooth',
				width: [0, 5]
			},
			dataLabels: {
				enabled: false
			},
			grid: {
                show: false,
            },
			colors: ['#000000' ],
			fill : {
				colors : ['transparent', '#202020'],
			},
			markers : {
				size: [0, 6],
				hover : {
					size : [6],
				}
			},
			xaxis: {
				categories: [
					'0:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'
				],
				labels: {
					offsetX: -20
				},
				title: {
					offsetY: 100
				},
				axisTicks: {
					show: false,
				},
				tooltip : {
					enabled : false,
				},
			},
			yaxis: {
				title: {
					text: ''
				}
			},
			plotOptions: {
				bar: {
					horizontal: false,
					columnWidth: '100%',
					endingShape: 'flat' ,
					fill: {
						colors: ['transparent']
					}
				},
				line: {
					markers: {
						showOnHover: true
					}
				}
			},
			legend : {
				show :false
			},
			tooltip: {
				custom: ({series, seriesIndex, dataPointIndex, w}) => {
					return `<div class="arrow_box"><div class="timeslot"><strong>${w.globals.labels[dataPointIndex]+'am'} - ${w.globals.labels[dataPointIndex+1] + 'am' }</strong></div><div class="clicksCount"> <span class="marker"><svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="3" fill="black" stroke="black" stroke-width="5" /></svg></span> Clicks <strong style="float:right">${series[seriesIndex][dataPointIndex]}</strong></div>`;
				}
			}
		};

		var chart = new ApexCharts(document.querySelector("#chart"), options);
		chart.render();
	</script>
</body>
</html>

This above code snippet integrates the ApexCharts library via a CDN for easy implementation. It features a column chart displayed within a div element with the ID "chart". The chart is configured using a set of options defined in the JavaScript section. These options include settings for chart appearance, data series, axis labels, and tooltips. The chart is initialized and rendered using the ApexCharts constructor and the render method, respectively, bringing the visual representation of data to life effortlessly.

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.

Bootstrap C C++ Cmd CodeIgniter Css Drupal Git Html Java Javascript Jquery Laravel Mongodb Nodejs Php Python React Sql Typescript Vuejs Wordpress

Apexcharts example code

Random Code Snippet Queries: Javascript

Latest Code Snippets