Y-Axis Limits for column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

Y-Axis Limits for column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>highcharts-range</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from w  w w  .jav a2  s  .c o m
var options = {
  title:    { text: 'Default Y-Axis Display' },
  subtitle: { text: 'Max value is Jan 2 with 98 visits.  Y-Axis max displays 150' },
  chart:    { type: 'column' },
  legend:   { enabled: false },
  xAxis: {
    title: null,
    type: 'datetime',
    labels: { format: '{value:%b %e}' }
  },
  yAxis: {
      title: null,
      endOnTick: false,
      min: 0
  },
  series: [
    {
      name: 'Visits',
      data: [
        [1514505600000,42],
        [1514592000000,45],
        [1514678400000,39],
        [1514764800000,52],
        [1514851200000,99],
        [1514937600000,61],
        [1515024000000,45],
        [1515110400000,88],
        [1515196800000,65],
        [1515283200000,46],
        [1515369600000,47],
        [1515456000000,44],
        [1515542400000,42],
        [1515628800000,42],
        [1515715200000,90],
        [1515801600000,34],
        [1515888000000,56],
        [1515974400000,36],
        [1516060800000,43],
        [1516147200000,62],
        [1516233600000,62],
        [1516320000000,71],
        [1516406400000,32],
        [1516492800000,57],
        [1516579200000,49],
        [1516665600000,55],
        [1516752000000,49],
        [1516838400000,48]
      ]
    }
  ],
};
var chart;
Highcharts.chart('container1', options);
options.title.text = 'Set Y-Axis Max to 98'
options.subtitle.text = 'Used sexExtremes to cap Y-Axis at 98.  Y-Axis max displays 100'
Highcharts.chart('container2', options);
chart = $('#container2').highcharts();
chart.yAxis[0].setExtremes(0, 99, true, false);
options.title.text = 'Set Y-Axis Max to 102'
options.subtitle.text = 'Jan 2 visits now 102.  Used sexExtremes to cap Y-Axis at 102.  Y-Axis max back to 150'
options.series[0].data[4][1] = 101;
Highcharts.chart('container3', options);
chart = $('#container3').highcharts();
chart.yAxis[0].setExtremes(0, 101, true, false);
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container1" style="min-width: 310px; max-width: 800px; height: 250px; margin: 0 auto"></div> 
      <div id="container2" style="min-width: 310px; max-width: 800px; height: 250px; margin: 0 auto"></div> 
      <div id="container3" style="min-width: 310px; max-width: 800px; height: 250px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials