I want to create textbox on the each point of highchart.
I am able to render a textbox however, it is not editable Below is the code
<!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>
And below is the js script
<script>
Highcharts.AST.bypassHTMLFiltering = true;
$(document).ready(function(){
// Sample data
var data = [{
name: 'Tokyo',
y: 7,
description: 'This is Tokyo'
}, {
name: 'New York',
y: 8,
description: 'This is New York'
}, {
name: 'London',
y: 9,
description: 'This is London'
}];
// Create the chart
var chart = Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Highcharts Editable Data Label'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
formatter: function() {
return '<b>' + this.point.name + '</b><br>Value: ' + this.y + '<br><input type="text" class="commentInput" placeholder="Enter comment" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px;">';
}
},
point: {
events: {
click: function () {
// Do something when a point is clicked
console.log('Point clicked:', this);
}
}
}
}
},
series: [{
name: 'Cities',
data: data
}]
});
// Example event listener for input change
$('#container').on('input', '.commentInput', function() {
console.log('Input changed:', $(this).val());
});
});
</script>
</body>
</html>
I tried searching on highchart blogs, stackoverflow but couldn't find a proper solution.
Is it possible to create a editable textbox on datalabel or tooltip of highcrats?
You need to inlude onclick="this.focus()" in the input attributes.