yAxis setExtremes for line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

yAxis setExtremes for 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"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//from  w  ww  . j  a v  a  2 s  .  co  m
    $('#container').highcharts({
        chart: {
            plotBorderWidth: 1
        },
        xAxis: {
        },
        yAxis: [{
            startOnTick: false,
            endOnTick: false,
        }, {
            opposite: true,
            title: {
                text: null,
            }
        }],
        title: {
            text: '',
        },
        series: [{
            data: [-67900.92, 454001.7, -204238.28, 322154.52, 162814.29, 940881.87, 454987.58, -190981.9, 77289.43, -578758.66, 232812.59, -553224.3, -161440.06, 203872.86, -487226.65, 582178.18, 88564.43, 250057.57, -62186.0600000001, 377721.25, -196420.64, 38713.0099999999, 284969.83, 166221.67],
        }]
    });
    // the button action
    $('#button').click(function() {
        var chart = $('#container').highcharts();
        var yAxis = chart.yAxis[0];
        yAxis.options.startOnTick = true;
        yAxis.options.endOnTick = true;
        chart.yAxis[0].setExtremes(-1034970.057, 1034970.057);
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div> 
      <button id="button">Set extremes</button>  
   </body>
</html>

Related Tutorials