I'm currently working with highcharts and facing an issue where I want to click on a point, trigger a modal pop-up, and be able to change dropdown options as well as the color and symbol of the selected point. While I can successfully change one point, clicking on the next one causes an error: Uncaught RangeError: Maximum call stack size exceeded. Any assistance in resolving this would be highly appreciated!
var update;
// Function for handling point click event
function showModal(p) {
update = p;
var d = moment(p.point.x).format('M/D/YYYY H:mm');
$('#point-date').html(d);
$('#point-value').html(p.point.y);
$('#point-flag').val(p.point.flag);
$('#pointModal').modal('show');
}
// Handling save action on the modal
function saveFlag() {
var newData = update.point.series.data;
var dataPoint = newData.filter(function (r) {
return r.SiteID == update.point.SiteID && r.Date_Time == update.point.Date_Time
});
if (dataPoint != null && dataPoint.length > 0) {
var size = 2;
if (data.length < 50)
size = 4;
var value = $('#point-flag').val();
dataPoint[0].marker.radius = size;
dataPoint[0].marker.symbol = getSymbol(value);
dataPoint[0].colorIndex = getColorIndex(value);
dataPoint[0].flag = value;
for (var index in timeseries.series) {
if (timeseries.series[index].name == update.point.series.name) {
timeseries.series[index].setData(newData);
}
}
}
$('#pointModal').modal('hide');
}