Setting draggable on error bar only works for top bar

[neilcrowley-cci]

Expected behaviour

When setting draggableY on an errorbar series, only the top whisker can be dragged.

Actual behaviour

Both whiskers should be draggable, similiar to the boxplot chart,

Live demo with steps to reproduce

Product version

HighCharts 11.2.0

Affected browser(s)

Chrome

[karolkolodziej]

Hi @neilcrowley-cci!

Thank you for reporting the issue! Here is a simple demo of the issue.

Internal note:
Issue where the box-plot was fixed, might be relevant: #13576

[raf18seb]

Looks like the errorbar series was missed when writing draggable-points module:

highcharts/ts/Extensions/DraggablePoints/DraggablePoints.ts

Lines 230 to 272 in 12771e9

	const seriesWithDragDropProps = [
	'arearange',
	'boxplot',
	'bullet',
	'column',
	'columnrange',
	'flags',
	'gantt',
	'ohlc',
	'waterfall',
	'xrange'
	];
	for (const seriesType of seriesWithDragDropProps) {
	if (seriesTypes[seriesType]) {
	seriesTypes[seriesType].prototype.dragDropProps =
	(DragDropProps as AnyRecord)[seriesType];
	}
	}
	// Don't support certain series types
	const seriesWithoutDragDropProps = [
	'bellcurve',
	'gauge',
	'histogram',
	'map',
	'mapline',
	'pareto',
	'pie',
	'sankey',
	'sma',
	'sunburst',
	'treemap',
	'vector',
	'windbarb',
	'wordcloud'
	];
	for (const seriesType of seriesWithoutDragDropProps) {
	if (seriesTypes[seriesType]) {
	seriesTypes[seriesType].prototype.dragDropProps = null;
	}
	}

Workaround (coppied from boxplot and improved a little):

const errorbarProto = Highcharts.seriesTypes.errorbar.prototype,
  boxplotProto = Highcharts.seriesTypes.boxplot.prototype;

// Inherit from boxplot...
errorbarProto.dragDropProps = boxplotProto.dragDropProps;

// ... but remove redundant props
delete errorbarProto.dragDropProps.q1;
delete errorbarProto.dragDropProps.median;
delete errorbarProto.dragDropProps.q3;

// Correct props validation
errorbarProto.dragDropProps.low.propValidate = (val, point) => (val <= point.high);
errorbarProto.dragDropProps.high.propValidate = (val, point) => (val >= point.low);

Demo with a workaround: https://jsfiddle.net/BlackLabel/02uc7pd8/