I've seen examples online about the how to make draggable points in highcharts, but I can't seem to find an example of how to have the draggable feature as a way to edit where the point is located, and how to use a textbox (tooltip) as a way to edit the data for the point as well. I've been reading up in the documentation and can't seem to find a way. The only way I can think to make this happen is using the custom html table code in the tooltip function, but I can't seem to get it to work. What I'm really wanting at the end of the day is to allow the user two methods of editing data points: either by dragging the point, or entering in the data into a field manually (preferably the tooltip when they hover over the data point). Does anyone have any suggestions or know if this is even possible? I've tried many searches online and in Stack Overflow and have not had any success finding someone who's been able to do this yet...Your help is appreciated in advance as usual.
It's very simple with Highcharts. You just need to find the right point and update its data value. For example:
const yInput = document.getElementById('yVal');
document.getElementById('applyInputValue').addEventListener('click', (e) => {
const selectedPoint = chart.series[0].points.find(p => p.selected);
if (selectedPoint) {
selectedPoint.update({
y: +yInput.value
});
}
});
Live demo: https://jsfiddle.net/BlackLabel/ygL7t23u/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#update