so basically I'm trying to show my custom tooltip containing data exactly on top of the markers of an area chart with negative values using Apex charts.
So what I want to achieve is this, as shown in the image below:
How is it possible for me to achieve this?
const areaOptions = {
colors: ['#449A91', '#E24E73'],
chart: {
type: "area",
height: 350,
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
width: 0,
dashArray: 0,
},
title: {
show: false
},
xaxis: {
type: "datetime",
axisBorder: {
show: false
},
axisTicks: {
show: false
},
position: 'top',
min: Date.now() - (1*86400000000),
tooltip: {
enabled: false,
},
crosshairs: {
show: false,
}
},
yaxis: {
show: false,
tickAmount: 4,
floating: false,
labels: {
style: {
colors: "#8e8da4"
},
offsetY: -7,
offsetX: 0
},
axisBorder: {
show: false
},
axisTicks: {
show: false
},
tooltip: {
enabled: true,
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: "vertical",
opacityFrom: 0.3,
opacityTo: 1,
shadeIntensity: 0.5,
gradientToColors: ['#B6E7D7', '#E37D76'],
stops: [0, 50, 100],
}
},
tooltip: {
shared: false,
custom: function ({ series, seriesIndex, dataPointIndex, w }) {
var data = w.globals.initialSeries[seriesIndex].data[dataPointIndex];
return (
'<div class="custom-tooltip">' +
'<div class="goal">' + data.title + "</div>" +
'<div class="date">' + data.x + "</div>" +
"</div>" +
'<div class="flex-rectangle"/>'
);
}
},
strokes: {
show: true,
curve: "smooth"
},
markers: {
size: [6, 6],
showNullDataPoints: false,
},
grid: {
yaxis: {
lines: {
// offsetX: -30
show: false,
}
},
padding: {
left: 20,
top: 20
}
}
};
these are the options being passed onto the area chart.
This is what I have now:
