CODEWITHSUNDEEP
highcharts
Gregw
Gregw

Reputation: 1

I have synchronized charts with synch’d zooming. I would like to zoomout in steps (not just back to 1:1). Does anyone have a working example of this?

I am currently synchronizing my charts as below:

$('#container').bind('mousemove touchmove', function (e) {
    var chart,
        point,
    points,
        i;

    for (i = 0; i < Highcharts.charts.length; i++) {
        chart = Highcharts.charts[i];
        e = chart.pointer.normalize(e); // Find coordinates within the chart
        points = []; 

            Highcharts.each(chart.series, function(series){
            point = series.searchPoint(e, true);

        if (point) {
                points.push(point);
            point.onMouseOver(); // Show the hover marker
          }
        });

        if (points.length > 0) {
            chart.tooltip.refresh(points); // Show the tooltip
            chart.xAxis[0].drawCrosshair(e, points[0]); // Show the crosshair
        }

    }

});

// ==================================================================================

// * Override the reset function, we don't need to hide the tooltips and crosshairs. // * Synchronize zooming through the setExtremes event handler.

Highcharts.Pointer.prototype.reset = function () {};

// ====================================================================

function syncExtremes(e) { var thisChart = this.chart;

    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
        Highcharts.each(Highcharts.charts, function (chart) {
            if (chart !== thisChart) {
                if (chart.xAxis[0].setExtremes) { // It is null while updating
                    chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
                }
            }
        });
    }
}

Upvotes: 0

Views: 76

Answers (1)

ppotaczek
ppotaczek

Reputation: 39079

You can calculate intermediate extremes and set them by setExtremes method, for example: 

    document.getElementById('zoomOut').addEventListener('click', function() {
        var chart = Highcharts.charts[0],
            yAxis = chart.yAxis[0],
            xAxis = chart.xAxis[0],
            yDistance = (yAxis.max - yAxis.min) / 2,
            xDistance = (xAxis.max - xAxis.min) / 2;

        yAxis.setExtremes(yAxis.min - yDistance, yAxis.max + yDistance);
        xAxis.setExtremes(xAxis.min - xDistance, xAxis.max + xDistance);
    });

Live demo: http://jsfiddle.net/BlackLabel/9vxgpn4z/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

Upvotes: 0

Related Questions