CSS
#chart {
max-width: 760px;
margin: 35px auto;
opacity: 0.9;
}
.arrow_box {
position: relative;
background: #555;
border: 2px solid #000000;
}
.arrow_box:after, .arrow_box:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(85, 85, 85, 0);
border-right-color: #555;
border-width: 10px;
margin-top: -10px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000000;
border-width: 13px;
margin-top: -13px;
}
#chart .apexcharts-tooltip {
color: #fff;
transform: translateX(10px) translateY(10px);
overflow: visible !important;
white-space: normal !important;
}
#chart .apexcharts-tooltip span {
padding: 5px 10px;
display: inline-block;
}
JavaScript
var options = {
chart: {
width: "100%",
height: 380,
type: "bar"
},
plotOptions: {
bar: {
horizontal: true
}
},
dataLabels: {
enabled: false
},
stroke: {
width: 1,
colors: ["#fff"]
},
series: [
{
data: [44, 55, 41, 64, 22, 43, 21]
}
],
xaxis: {
categories: [
"Korea",
"Canada",
"Poland",
"Italy",
"France",
"Japan",
"China"
]
},
tooltip: {
custom: function({ series, seriesIndex, dataPointIndex, w }) {
return (
'<div class="arrow_box">' +
"<span>" +
w.globals.labels[dataPointIndex] +
": " +
series[seriesIndex][dataPointIndex] +
"</span>" +
"</div>"
);
}
}
};
var chart = new ApexCharts(document.querySelector("#apex-chart"), options);
chart.render();