How to define a custom tooltip in Apex chart in React? - reactjs

Question

I am defining four lines chart with Apex Chart.
My data series:
series: [
{
name: "first",
data: [28, 29, 33, 36, 32, 32, 33]
},
{
name: "second",
data: [12, 11, 14, 18, 17, 13, 13]
},
{
name: "third",
data: [48, 29, 33, 16, 32, 62, 3]
},
{
name: "forth",
data: [22, 11, 54, 18, 27, 53, 13]
}
],
I want my tooltip output to be like:
first-label : {series.dataOfFirstLabel}
second-label : {series.dataOfSecondLabel}
third-label : {series.dataOfThirdLabel}
forth-label : {series.dataOfForthLabel}
How can I define my custom tooltip?
Thanks.

Answer 1

Try this:
tooltip: {
custom: function (series: any) {
return `<div>
${series.map((el: any) => {
return `<div class="d-flex flex- column">
<p>${el.name}-label:${el.data.map((element: any)=>element).join("")}</p> </div>`; })
</div>`},}
https://codepen.io/apexcharts/pen/NBdyvV

Answer 2

In chart options
enter code here
tooltip: {
enabled: true,
enabledOnSeries: true,
shared: true,
followCursor: true,
intersect: false,
inverseOrder: false,
custom: undefined,
fillSeriesColor: true,
theme: false,
style: {
fontSize: "12px",
fontFamily: undefined,
},
onDatasetHover: {
highlightDataSeries: false,
},
x: {
show: true,
format: "dd MMM",
formatter: undefined,
},
y: {
show: false,
formatter: undefined,
title: {
formatter: (seriesName) => seriesName,
},
},
z: {
formatter: undefined,
title: "Size: ",
},
marker: {
show: false,
},
items: {
display: "flex",
},
fixed: {
enabled: false,
position: "topRight",
offsetX: 0,
offsetY: 0,
},
},
//sh
you can add these properties
refer - https://apexcharts.com/docs/options/tooltip/

Answer 3

Instead string literal you can use renderToString from react-dom/server.
import { renderToString } from 'react-dom/server'
So the custom function would look like this:
// Some series that you use in the chart
const seriesData = [
{
name: 'South',
data: [
[1486771200000, 40],
[1486857600000, 18],
[1486944000000, 43],
],
},
{
name: 'North',
data: [
[1486771200000, 16],
[1486857600000, 15],
[1486944000000, 10],
],
}]
...
// Tooltip option for apexChart
tooltip: {
custom: ({ series, seriesIndex, dataPointIndex, w }) => {
const xValue = seriesData[seriesIndex].data[dataPointIndex][0]
const xDate = new Date(xValue).toLocaleDateString('cs-CZ')
return renderToString(
<div>
<p>
{xDate}
</p>
{/* Map through series to get labels and values */}
{seriesData.map((s, i) => (
<div key={s.name} className="tooltipItem">
<div style={{
minWidth: "12px",
backgroundColor: w.globals.colors[i]
}}
/>
<p >
MyLabel:{' '}
</p>
<p>
{series[i][dataPointIndex]}
</p>
</div>
))}
</div>
)
},
},