Stock chart, Panning outside last candlestick

[bjurhager]

Hi, I've been stuck on this for some time now.
I want to pan my candlestick chart outside of actual data on xAxis.
Iv'e found some examples but all include to add new data when the border is reached but no example going past the data point and just show empty grid.
How can this be solved?

A good referens for panning would be tradingview wich let you pan exactly how i want.
Best / Fredrik

[michal.f]

Hi,

Thanks for contacting us with your question!

You can create a hidden scatter series point at some distance from the last point of the candlestick for example.

Demo: https://jsfiddle.net/BlackLabel/uab5mw0d/

Let me know if you have any further questions!
Best regards!

[bjurhager]

Oh so i need to scatter something for this to work?
If i want yAxis to be 0 to infinite, Do i create this in the same way or does this work diffferently?
I would like to create a yAxis drag to scale.
Best / F

[bjurhager]

I've got things to work. I now have panning, zooming and yAxis scale extents.
But, My scaling is slow and works kind of bad. Any idea on how to improve this?
Ex code functions.

Code: Select all

// Scale yAxis
(function (H) {
    Highcharts.Chart.prototype.callbacks.push(function (chart) {
        var chart = this,
            isDragging = false,
            yAxis = chart.yAxis[0],
            yAxisContainer = chart.yAxis[0].labelGroup.element;
        H.addEvent(yAxisContainer, "mousedown", function (e) {
            isDragging = true;
            var y = e.pageY
            H.addEvent(document, 'mousemove', function (e) {
                if (isDragging) {
                    var step = 50;
                    var min = yAxis.getExtremes().min;
                    var max = yAxis.getExtremes().max;
                    if (y < e.pageY) {
                        yAxis.setExtremes(min - (max - min) / step, max + (max - min) / step)
                    } else {
                        yAxis.setExtremes(min + (max - min) / step, max - (max - min) / step)
                    }
                }
            });
        });
        H.addEvent(document, 'mouseup', function () {
            if (isDragging) {
                isDragging = false;
            }
        });
    });
})(Highcharts);

// Panning XY
(function (H) {
    Highcharts.Chart.prototype.callbacks.push(function (chart) {
        var chart = this,
            container = chart.chartBackground.element,
            yAxis = chart.yAxis[0],
            downYPixels,
            downYValue,
            isDragging = false,
            hasDragged = 0;
        H.addEvent(container, "mousedown", function (e) {
            downYPixels = chart.pointer.normalize(e).chartY;
            downYValue = yAxis.toValue(downYPixels);
            isDragging = true;
            H.addEvent(document, 'mousemove', function (e) {
                if (isDragging) {
                    var dragYPixels = chart.pointer.normalize(e).chartY,
                        dragYValue = yAxis.toValue(dragYPixels),
                        yExtremes = yAxis.getExtremes(),
                        yUserMin = yExtremes.userMin,
                        yUserMax = yExtremes.userMax,
                        yDataMin = yExtremes.dataMin,
                        yDataMax = yExtremes.dataMax,
                        yMin = yUserMin !== undefined ? yUserMin : yDataMin,
                        yMax = yUserMax !== undefined ? yUserMax : yDataMax,
                        newMinY,
                        newMaxY;
                    hasDragged = Math.abs(downYPixels - dragYPixels);
                    if (hasDragged > 10) {
                        newMinY = yMin - (dragYValue - downYValue);
                        newMaxY = yMax - (dragYValue - downYValue);
                        yAxis.setExtremes(newMinY, newMaxY, true, false);
                    }
                }
            });
        });
        H.addEvent(document, 'mouseup', function () {
            if (isDragging) {
                isDragging = false;
            }
        });
    });
})(Highcharts);

Best / F

[michal.f]

Hello Fredrik,

I don't quite know how to improve the performance of this wrap, but I found another way. You can add scatter type series with 3 points, the first two of them to allow panning on yAxis and the last one for panning outside of actual data on xAxis.

But before adding this series, you need to get the max and min values ​​for display candlestick series properly after adding these points.

In the example, the milliseconds are set to hard, but you have to extract them dynamically from your data

Demo: https://jsfiddle.net/BlackLabel/gup5ofdr/

Feel free to ask any further questions!
Best regards!

[bjurhager]

Thanks, Its not what i'm after tho.
Here i made an example for you: https://jsfiddle.net/nqu8evms/2/

Panning |Click and drag on the chart to pan in both X and Y. ( This works )
Zoom | Mouse-wheel scroll over chart to zoom in and out. ( This works )
Scaling | Click and drag on Y-axis label to extend, contract chart in y scale. ( This works bad )
The Scaling function does not work smoothly and bugs out, This is the function i need help with.
Drag the label to see what i'm after.

With your help i got the panning and zoom to work as i want It's only the scaling left and then the chart works perfect.
Best / Fredrik

[michal.f]

Hello Fredrik,

Unfortunately, I couldn't find a way to improve it and I cannot spend more time working on it.

This functionality is beyond the scope of support on our forum. If you need help with your implementation, you can try to contact the Black Label company that specializes in Highcharts custom projects. See official Black Label site: https://blacklabel.pl

Best regards!