Highcharts draggable point drag step size

Question

In following example, I need to drag the point by certain step size, e.g. by 10. See

drag: function (e) {

jsfiddle

Answer 1

As an alternative, here's a modified version of draggable-points.js (GitRaw GitHub) that allows some parameters for dragging in certain step sizes. The following options have been added for a series:

• dragStepSizeX: numeric step size for X-axis
• dragStepSizeY: numeric step size for Y-axis
• dragStepSize: function taking the parameters XorY and point, which you can implement to return the desired step size depending on the axis and the point being dragged
• dragStepAllowMinMax: boolean, should you be allowed to drag to the min/max limit, or enforce steps?
• dragStepRelative: boolean, should drag steps be done relative to the points original value?

See this JSFiddle demo of it being used to enforce step sizes on the Y-axis of 5 for the 8 first point, and 2 for the remaining points. Not step size on X-axis.

The following functions have been modified to accomodate this in draggable-points.js:

/**
 * Adjust value according to step size
 */
function dragStepAdjustment(value, prevValue, stepSize, relative) {
    if(stepSize === undefined) {
        return value;
    }

    const midpoint = stepSize/2;
    const modulus = relative === true ? (value-prevValue)%stepSize : value%stepSize;
    return modulus > midpoint ? value + (stepSize-modulus) : value - modulus;
}

/**
 * Filter by dragMin and dragMax
 */
function filterRange(newY, point, series, stepSize, XOrY) {
    var options = series.options,
        dragMin = pick(options.dragMin ? options.dragMin(XOrY, point) : undefined, options['dragMin' + XOrY], undefined),
        dragMax = pick(options.dragMax ? options.dragMax(XOrY, point) : undefined, options['dragMax' + XOrY], undefined),
        precision = pick(options['dragPrecision' + XOrY], undefined),
        allowMinMax = options.dragStepAllowMinMax === true;

    if (!isNaN(precision)) {
        newY = Math.round(newY / precision) * precision;
    }

    if (newY < dragMin) {
        if(stepSize !== undefined) {
            allowMinMax ? newY = dragMin : newY += stepSize;
        }
        else {
            newY = dragMin;
        }
    } else if (newY > dragMax) {
        if(stepSize !== undefined) {
            allowMinMax ? newY = dragMax : newY -= stepSize;
        }
        else {
            newY = dragMax;
        }
    }

    if(newY < dragMin || newY > dragMax) {
        newY = 'X' == XOrY ? point.x : point.y;
    }

    return newY;
}

/**
 * Get the new values based on the drag event
 */
function getNewPos(e) {
    var originalEvent = e.originalEvent || e,
        pageX = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageX : e.pageX,
        pageY = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageY : e.pageY,
        series = dragPoint.series,
        draggableX = series.options.draggableX && dragPoint.draggableX !== false,
        draggableY = series.options.draggableY && dragPoint.draggableY !== false,
        dragSensitivity = pick(series.options.dragSensitivity, 1),
        deltaX = draggableX ? dragX - pageX : 0,
        deltaY = draggableY ? dragY - pageY : 0,
        newPlotX = dragPlotX - deltaX,
        newPlotY = dragPlotY - deltaY,
        newX = dragX === undefined ? dragPoint.x : series.xAxis.toValue(newPlotX, true),
        newY = dragY === undefined ? dragPoint.y : series.yAxis.toValue(newPlotY, true),
        dragStepSizeX = pick(series.options.dragStepSize ? series.options.dragStepSize('X', dragPoint) : undefined, series.options.dragStepSizeX, undefined),
        dragStepSizeY = pick(series.options.dragStepSize ? series.options.dragStepSize('Y', dragPoint) : undefined, series.options.dragStepSizeY, undefined),
        ret;

    newX = dragStepAdjustment(newX, dragPoint.x, dragStepSizeX, series.options.dragStepRelative);
    newY = dragStepAdjustment(newY, dragPoint.y, dragStepSizeY, series.options.dragStepRelative);
    newX = filterRange(newX, dragPoint, series, dragStepSizeX, 'X');
    newY = filterRange(newY, dragPoint, series, dragStepSizeY, 'Y');
    if (dragPoint.low) {
        var newPlotHigh = dragPlotHigh - deltaY,
            newPlotLow = dragPlotLow - deltaY;
        newHigh = dragY === undefined ? dragPoint.high : series.yAxis.toValue(newPlotHigh, true);
        newLow = dragY === undefined ? dragPoint.low : series.yAxis.toValue(newPlotLow, true);
        newHigh = dragStepAdjustment(newHigh, dragPoint.y, dragStepSizeY, series.options.dragStepRelative);
        newLow = dragStepAdjustment(newLow, dragPoint.y, dragStepSizeY, series.options.dragStepRelative);
        newHigh = filterRange(newHigh, dragPoint, series, dragStepSizeY, 'Y');
        newLow = filterRange(newLow, dragPoint, series, dragStepSizeY, 'Y');
    }
    if (Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2)) > dragSensitivity) {
        return {
            x: draggableX ? newX : dragPoint.x,
            y: draggableY ? newY : dragPoint.y,
            high: (draggableY && !changeLow) ? newHigh : dragPoint.high,
            low: (draggableY && changeLow) ? newLow : dragPoint.low,
            dragStart: dragStart,
            originalEvent: e
        };
    } else {
        return null;
    }
}

This is a modification of the code of Torstein Honsi of Highsoft, under the MIT License.