I have an line-bar-area apexchart.
That looks like this:
I succeeded to add an onclick event to the datapoints.
But I would like to add an onclick event to the labels (like 01, 02, 03, 04, 05)
Does anyone knows how to do that?
The code I use for the datapoints is this:
var options = {
chart: {
height: 400,
type: 'line',
stacked: false,
events: {
dataPointSelection: (event, chartContext, config) => {
var selecteddate = pad(config.dataPointIndex + 1, 2);
console.log(selecteddate);
}
}
}
This works but how can I add events to the labels?
Or is this not possible?
I managed to do it by adding an event listener to my page.
It may be not the label, but the tooltip is also great.
$(".apexcharts-xaxistooltip").click(function(){
var selecteddate = $(this).text();
// do something
});
After that I also overwrite the css of the tooltip.
.tooltip-inner {
background-color: #00acd6 !important;
/*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
color: #fff;
}
.apexcharts-xaxistooltip{
opacity: 1;
pointer-events: all;
}
.apexcharts-xaxistooltip:hover{
background: #46A7B3;
color: white;
cursor: pointer;
}
This gives me the nice hover effect and clickable cursor.
In this way the tooltips are clickable and won't fade out when out of hover.