CODEWITHSUNDEEP
highcharts
Mapsism Borja
Mapsism Borja

Reputation: 363

Is possible to zoom with mouse in Highcharts?

Is it possible to zoom in highcharts with mouse, like in Google Earth?

Is there a code to do it?

Upvotes: 3

Views: 7273

Answers (2)

xendi
xendi

Reputation: 2522

Highcharts mouse wheel zooming can be accomplished by including Highmaps as a module in Highcharts.

$(function() {
  $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {

    $('#container').highcharts({
      chart: {
        panning: true
      },
      mapNavigation: {
        enabled: true,
        enableButtons: false
      },
      title: {
        text: 'USD to EUR exchange rate over time'
      },
      subtitle: {
        text: document.ontouchstart === undefined ?
          'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
      },
      xAxis: {
        type: 'datetime'
      },
      yAxis: {
        title: {
          text: 'Exchange rate'
        }
      },
      legend: {
        enabled: false
      },
      plotOptions: {
        area: {
          fillColor: {
            linearGradient: {
              x1: 0,
              y1: 0,
              x2: 0,
              y2: 1
            },
            stops: [
              [0, Highcharts.getOptions().colors[0]],
              [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
            ]
          },
          marker: {
            radius: 2
          },
          lineWidth: 1,
          states: {
            hover: {
              lineWidth: 1
            }
          },
          threshold: null
        }
      },

      series: [{
        type: 'area',
        name: 'USD to EUR',
        data: data
      }]
    });
  });
});
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Upvotes: 8

gunr2171
gunr2171

Reputation: 17579

It looks like this is now possible, see xendi's answer below.

This is the original answer.

Nope. Not in the way you describe.

The Zooming Concepts Page on Highchart's site says

With a mouse pointer, the zooming is performed by dragging out a rectangle in the chart. Unlike pinch zooming, the user can't pan the zoomed area, but has to zoom out then in again on a new area.

On touch devices, the user can zoom by pinching in the chart area. On these devices, the user may also move the zoomed area by panning with one finger across the chart.

Those are the only official options you have. There is an active user voice feature request, but that was made back in 2011 (4 years ago). I think you are out of luck.

Upvotes: 3

Related Questions