I am using ApexChart and would like to add a Tooltip when the user hovers the mouse over the Total. I have read the documentation and forums but have not been able to do it.
My code is as follows:
const chartData = {
series: series,
options: {
chart: {
selection: {
enabled: false
},
height: 400,
type: 'radialBar',
events: {
dataPointSelection: async function(event, chartContext, config) {
const dataIndex = config.dataPointIndex;
const item = chartData.options.labels[dataIndex];
const functionId = data.function_id;
let query = {
date_after: filters.date_after,
date_before: filters.date_before,
function_id: functionId,
keyword: item
};
let queryParams = buildQueryString(query);
const { response, error } = await fetchKeyDetail(queryParams);
if(response){
setShowModal(true)
setNameKey(item)
setDetailWord(response.data.report)
setShowText(false)
}
}
}
},
states: {
active: {
filter: {
type: 'none'
}
}
},
plotOptions: {
radialBar: {
hollow: {
size: series.length > 10 ? '25%' : '50%',
},
dataLabels: {
name: {
fontSize: '14px',
show: showText,
},
value: {
fontSize: '14px',
offsetY: 0,
},
total: {
show: true,
label: data.keywords.length === 1 ? data.keywords[0].keyword : 'Total',
formatter: function (w) {
const totalValue = Math.round(parseFloat(data.conversation_prtg) * 100) / 100;
return totalValue;
},
},
},
},
},
labels: labels,
},
};
I was trying to use the ‘tooltip’ property, but that adds the tooltip when passing the mouse over each radial circle of the graphic and I need that only the tooltip is activated when I pass the mouse over the Total
tooltip: {
enabled: true,
shared: true,
custom: function({ series, seriesIndex, dataPointIndex, w }) {
const totalValue = Math.round(parseFloat(data.conversation_prtg) * 100) / 100;
return `
<div>
<div>Total: ${totalValue}</div>
<div>Additional Information: Your additional information here</div>
</div>
`;
},
},
I would be very grateful for your help.