Highcharts: resize plotBand if plotLine moves along xAxis

Question

I have a problem with filling a space between 2 plotLines with plotBand. Refer to this jsfiddle to see my problem: http://jsfiddle.net/kitBegemit/zkjn6nm3/.

debugger;

$(function () {

var line,
clickX,
clickY;
var band;
// var img = null;
var start = function (e) {

    $(document).bind({
        'mousemove.line': step,
            'mouseup.line': stop
    });

    clickX = e.pageX - line.translateX;
}

var step = function (e) {
    newPos = line.translate(e.pageX - clickX, false);

    chart = $('#container').highcharts();

    firstLineValue = chart.xAxis[0].plotLinesAndBands[1].options.value;

    // extended point of band
    point_x = chart.xAxis[0].toValue(newPos.translateX, 1);

    line = chart.xAxis[0].plotLinesAndBands[0].svgElem.attr({
        stroke: 'pink',
        value: point_x,
    })

    chart.xAxis[0].removePlotBand('plot-band-1');

    chart.xAxis[0].addPlotBand({
        from: firstLineValue,
        to: point_x,
        color: 'green',
        id: 'plot-band-1'
    });
}

var stop = function () {
    $(document).unbind('.line');
}

$('#container').highcharts({
    chart: {
        // events: {/
        //                redraw: function () {
        //                    if (img) $(img.element).remove();
        //         img = this.renderer.image('http://www.highcharts.com/demo/gfx/sun.png',
        //                    this.plotWidth, this.plotTop, 30, 30).add();
        //     }
        // }

    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

        plotLines: [{
            color: 'red',
            width: 5,
            value: 3,
            id: 'end',

        }, {
            color: 'blue',
            width: 5,
            value: 1,
            id: 'begin'
        }],
        plotBands: [{
            color: '#FCFFC5',
            from: 1,
            to: 3,
            id: 'plot-band-1'
        }]
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
}, function (chart) {

    console.log(chart.xAxis[0].plotLinesAndBands[0]);

    line = chart.xAxis[0].plotLinesAndBands[0].svgElem.attr({
        stroke: 'red'
    })
        .css({
        'cursor': 'pointer'
    })
        .translate(0, 0)
        .on('mousedown', start);

    band = chart.xAxis[0].plotLinesAndBands[2].svgElem.attr({})
        .css({
        'color': '#FCFFC5'
    })


});

});

If you drag red line to the right, color of the band between changes, but it doesn't fill the full space. It looks like I don't understand what is correct value of x in the line after moving.

Later I'm going to have listeners (AngularJS) on those lines, which will recalculate numbers according to new period, enclosed between them. I will appreciate any suggestions about this part too..

Most of the code was borrowed here: Highcharts plotLine drag xAxis event

Here is drawing of what I'm going to have in the end: http://ge.tt/1Homxl62/v/0?c

Thank you in advance for any help..

Sebastian Bochan Sebastian Bochan · Accepted Answer · 2014-12-12T14:59:37

In your chart, you get value (on axis) based on pixels, which you move by mouse, not include "start position".

Highcharts: resize plotBand if plotLine moves along xAxis

2 Answers