dynamically restrict dragging limits in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

dynamically restrict dragging limits in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
      <script src="https://code.highcharts.com/modules/treemap.js"></script> 
      <script src="https://rawgit.com/Ondkloss/draggable-points/dynamic-drag/draggable-points.js"></script> 
      <div id="container" style="height: 600px"></div> 
      <script type="text/javascript">
var chart = new Highcharts.Chart({
    chart: {//  w w w.j av  a 2s .co m
        renderTo: 'container',
    },
    series: [{
        data: [[0, 90.9], [10,81.81], [20,72.72], [30,63.63],[40,63.63],[50,45.45],[70,45.45],[80,36.36],[85,35],[95,33],[100,33]],
        step: 'left',
        type: 'line',
        draggableX: true,
        draggableY: true,
        dragMin: function(XorY, point) {
           leftPoint = point.series.data[point.index-1];
           rightPoint = point.series.data[point.index+1];
            if('X' == XorY) {
                if(leftPoint) {
                    return leftPoint.x + 1;
                }
                return undefined;
            }
            else {
                if(rightPoint) {
                    return rightPoint.y;
                }
                return undefined;
            }
        },
        dragMax: function(XorY, point) {
            leftPoint = point.series.data[point.index-1];
           rightPoint = point.series.data[point.index+1];
            if('X' == XorY) {
                if(rightPoint) {
                    return rightPoint.x - 1;
                }
                return undefined;
            }
            else {
                // Higher than left point, if any
                if(leftPoint) {
                    return leftPoint.y;
                }
                return undefined;
            }
        }
    }]
});

      </script>  
   </body>
</html>

Related Tutorials