Apex bar chart - fill bar color with gradient on hover
Created at 30-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>Bar chart</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<style>
.apexcharts-bar-area:hover {
fill: url('#blueGradient');
}
.arrow_box {
border-radius: 6px;
font-size: 18px;
min-width: 180px;
}
.timeslot {
padding: 10px 15px;
margin-bottom: 10px;
border-bottom: 1px solid #D3D3D3;
background-color: #f9f9f9;
}
.clicksCount {
padding: 8px 15px 12px;
background-color: #ffffff;
border-radius: 6px;
font-size: 20px;
}
.tooltip-label {
margin-left: 5px;
color: #A9A9A9;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<linearGradient id="blueGradient" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#0d4be4"/>
<stop offset="100%" stop-color="#8ac1fd"/>
</linearGradient>
</defs>
</svg>
<div id="chart"></div>
<script>
var options = {
series: [{
name: 'Results',
data: [1012, 2012, 1512, 3512, 2512, 2012, 1012]
}],
colors: ['#EFF5FA'],
chart: {
height: 350,
width: '600',
type: 'bar',
toolbar: {
show: false
},
},
states: {
hover: {
filter: {
type: 'lighter',
value: 0.80,
}
},
active: {
filter: {
type: 'lighter',
value: 0.80,
}
},
},
plotOptions: {
bar: {
borderRadius: 4,
fill : {
colors : ['#EFF5FA'],
},
dataLabels: {
position: 'top',
},
}
},
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", "14.3.24", "15.3.24", "16.3.24", "17.3.24"],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels : {
show: false,
},
crosshairs: {
show: false,
},
tooltip: {
enabled: false,
}
},
yaxis: {
labels: {
show: false,
}
},
tooltip: {
custom: function({series, seriesIndex, dataPointIndex, w}) {
return `<div class="arrow_box"><div class="timeslot"><strong>${w.globals.labels[dataPointIndex]} </strong></div><div class="clicksCount">
<span class="marker">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"> <circle cx="6" cy="6" r="5" fill="black" stroke="black" stroke-width="2"/></svg>
</span>
<span class="tooltip-label"> Results </span> <strong style="float:right">${series[seriesIndex][dataPointIndex]}</strong></div>`;
},
x : {
show : true,
}
}
};
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
- Deault order of record in datatable
- Short-circuits conditionals
- How to validate input type file size in javascript
- Javascript get only 10 characters from string
- Uncaught SyntaxError: Identifier 'CODE' has already been declared
- How to make entire Div clickable in javascript
- How can I add a key/value pair to a JavaScript object
- Get hostname from URL in javascript
- Javascript set timeout function with example code
- Uncaught TypeError: Cannot read property 'addEventListener' of undefined
- ReferenceError: $ is not defined
- Remove property from object in javascript
- Javascript get data-id attribute value
- Uncaught TypeError: $(...).summernote is not a function
- How to open modal after redirect
- How to preview a word document in HTML using javascript
- How to remove duplicate values from array in javascript
- How to use JavaScript to search for items in a list
- How to get the length of a number in JavaScript
- How to set href value of anchor tag in javascript
- Uncaught TypeError: Assignment to constant variable
- Ezsnippets (76) challenge - javascript - youtube shorts
- How to preview video before uploading in javascript
- How to check file is an image in javascript using filename
- How to display an image in Javascript onclick