align the scale on chart with the axis rather than the margins for line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

align the scale on chart with the axis rather than the margins for line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://rawgithub.com/highcharts/crossing-specific-value/master/crossing-specific-value.js"></script> 
      <div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
var chart;//  w  w w  .j av  a 2 s  . c o m
var zoom = true;
var options = {
  credits: {
    enabled: false
  },
  tooltip: {
    enabled: false
  },
  chart: {
    style: {
      fontFamily: 'Times New Roman',
      fontSize: '20px',
    },
    renderTo: 'container',
    type: 'line',
    marginRight: 20,
    marginBottom: 25,
    events: {
      load: function() {
        var img = (zoom ? 'zoom' : 'zoom1');
        zoom = !zoom;
        var href = 'http://inadcod.com/img/' + img + '.png';
        this.renderer.image(href, 70, 10, 28, 28).on('click', function() {
          if (options.yAxis.max) {
            delete options.yAxis.max; // return to default
          } else {
            options.yAxis.max = (extremes.dataMax - extremes.dataMin) / 1.85;
          }
          chart = new Highcharts.Chart(options);
        }).css({
          cursor: 'pointer',
          position: 'relative'
        }).attr({
          id: 'myImage'
        }).add();
      }
    }
  },
  title: {
    text: '', //FILL IN IF WANT TITLE
    x: -20 //center
  },
  yAxis: {
    min: -20,
    max: 20,
    crossing: 0,
    labels: {
      formatter: function() {
        return this.value ? this.value : ''
      }
    },
    tickInterval: 1,
    endOnTick: false,
    title: {
      text: ''
    },
    plotLines: [{
      value: 0.1,
      width: 1,
      color: 'black'
    }]
  },
  plotOptions: {
    series: {
      states: {
        hover: {
          enabled: false,
          halo: {
            size: 0
          }
        }
      }
    }
  },
  xAxis: {
    min: -20,
    max: 14,
    crossing: 0,
    opposite: true,
    visible: true,
    tickInterval: 1,
    gridLineWidth: 1,
    endOnTick: false,
    labels: {
      y: 13,
      formatter: function() {
        return this.value ? this.value : ''
      }
    },
    title: {
      text: '',
    },
    plotLines: [{
      value: 0.1,
      width: 1,
      color: 'black'
    }]
  },
  legend: {
    enabled: false,
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -10,
    y: 100,
    borderWidth: 0
  },
  series: [{
    name: 'f(x)',
    type: 'line',
    color: 'black',
    dashStyle: 'longdash',
    data: [
      [-20, 10],
      [-10, 8],
      [0, -7],
      [10, 1],
      [20, -5]
    ]
  }, {
    name: 'g(x)',
    type: 'line',
    color: 'black',
    data: [
      [-20, 7],
      [-10, 8],
      [0, -14],
      [10, -2],
      [20, -5]
    ]
  }]
};
chart = new Highcharts.Chart(options);
var extremes = chart.yAxis[0].getExtremes();

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

Related Tutorials