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
- Uncaught TypeError: $(...).summernote is not a function
- Trim the leading and trailing comma from string in Javascript
- Javascript get only 10 characters from string
- How to display an image in Javascript onclick
- Uncaught TypeError: Cannot read property 'addEventListener' of undefined
- How to crop multiple images with cropper js
- Generate 6 digit random number in javascript
- How to display for slash as a string in javascript HTML
- Apex bar chart - fill bar color with gradient on hover
- How to switch between Dark Mode and Light Mode based on cookie in Javascript
- Execute function with condition in javascript
- Ezsnippets (76) challenge - javascript - youtube shorts
- How to get file extension using javascript/jquery
- On click enter redirect to another URL with parameters in javascript
- How to open modal after redirect
- Short-circuits conditionals
- How to push string in an array in Javascript
- Apexcharts example code
- How to pass array as arguments to function in javascript
- JavaScript test() Method
- How to Set data to localstorage in javascript
- Prism js horizontally overflowing its container
- Cropper js with multiple images
- Uncaught SyntaxError: Identifier 'CODE' has already been declared
- Javascript set timeout function with example code