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
- How to show and hide placeholder text
- Uncaught TypeError: Assignment to constant variable
- How to fixed bootstrap navbar at top on scroll
- Remove hostname from URL in javascript
- How to get data from localstorage in javascript
- Remove property from object in javascript
- Custom slider js
- Apex chart bar chart
- How to get query string value in javascript
- Uncaught TypeError: Cannot read property 'addEventListener' of undefined
- How to echo array in Javascript
- How to check caps lock is on in javascript
- JavaScript test() Method
- On click enter redirect to another URL with parameters in javascript
- Uncaught SyntaxError: Identifier 'CODE' has already been declared
- How to use JavaScript to search for items in a list
- How to check file is an image in javascript using filename
- Short-circuits conditionals
- Execute function with condition in javascript
- ReferenceError: Cannot access 'myFunction' before initialization
- Copy one array to another in javascript
- Deault order of record in datatable
- Prism js horizontally overflowing its container
- Check if value exists in array javascript
- How to validate empty space in textbox in Javascript