Apex chart bar chart
Created at 29-Mar-2024 ,
By samar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Column chart</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<style>
.apexcharts-bar-area:hover {
fill: #008ffb;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
var options = {
series: [{
name: 'Result',
data: [10, 20, 15, 35, 25, 20, 10]
}],
chart: {
height: 350,
width: '600',
type: 'bar',
toolbar: {
show: false
},
},
states: {
hover: {
filter: {
type: 'darken',
value: 0.80,
}
}
},
colors: ['#EFF5FA'],
fill : {
colors : ['#f5f5ff'],
},
plotOptions: {
bar: {
fill : {
colors : ['#eff5fa'],
},
dataLabels: {
position: 'top', // top, center, bottom
},
}
},
dataLabels: {
enabled: false,
formatter: function (val) {
return val ;
},
offsetY: -20,
style: {
fontSize: '12px',
colors: ["#304758"]
}
},
grid : {
show : false,
},
xaxis: {
categories: ["11.3.24", "12.3.24", "13.3.24", "11..3.24", "11..3.24", "11..3.24", "11..3.24"],
position: 'top',
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels : {
show: false,
},
crosshairs: {
fill: {
type: 'gradient',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0,
opacityTo: 0,
}
}
},
tooltip: {
enabled: false,
}
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false,
},
labels: {
show: false,
formatter: function (val) {
return val ;
}
}
},
title: {
text: '',
floating: true,
offsetY: 330,
align: 'center',
style: {
color: '#444'
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</body>
</html>
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.
Random Code Snippet Queries: Javascript
- Cropper js with multiple images
- Input type file styling
- Trim the leading and trailing comma from string in Javascript
- Uncaught TypeError: Cannot read property 'addEventListener' of undefined
- JavaScript test() Method
- Javascript get only 10 characters from string
- How to check file is an image in javascript using filename
- Get multiplication in javascript using array input
- Hide div on click outside of element in javascript/jQuery
- Animating numbers counting Javascript
- How to get query string value in javascript
- Generate 6 digit random number in javascript
- How to check caps lock is on in javascript
- Javascript get data-id attribute value
- Check if value exists in array javascript
- Remove property from object in javascript
- How to get the length of a number in JavaScript
- How to Set data to localstorage in javascript
- How to display an image in Javascript onclick
- How can I add a key/value pair to a JavaScript object
- How to set href value of anchor tag in javascript
- Short-circuits conditionals
- Uncaught SyntaxError: Identifier 'CODE' has already been declared
- How to preview video before uploading in javascript
- Prism js horizontally overflowing its container