I have a button on tooltip in highchart.
I want to change the tooltip of the particular point on button click.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Editable Data Label</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px;"></div>
Below is the script
Highcharts.AST.bypassHTMLFiltering = true;
Highcharts.chart('container', {
chart: {
type: 'line'
},
tooltip: {
useHTML: true,
formatter: function() {
// Return the default tooltip content
var tooltip = '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
// Add a button to the tooltip
tooltip += '<br/><button onclick="changeTooltip(' + this.point.index + ')">Change Tooltip</button>';
return tooltip;
},
style: {
pointerEvents: 'auto'
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
// Function to change tooltip for a specific point
function changeTooltip(pointIndex) {
Highcharts.charts[0].update({
tooltip: {
formatter: function() {
// Customize tooltip for this point
return 'Customized Tooltip for Point ';
},
useHTML: true
}})
}
I have tried above code but, when the button is clicked tooltip for all points are getting changed.
Have also tried with
point.update({tooltip: {
formatter: function() {
// Customize tooltip for this point
return 'Customized Tooltip for Point ';
},
useHTML: true
}});
but nothing happens