Set an y offset to the series in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Set an y offset to the series in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from   w  ww  .ja  va 2  s.  c  o  m*/
$(function() {
 $('#container').highcharts({
    chart: {
      events: {
        load: function() {
          var series = this.series;
          for (var i = 0; i < series.length; i++) {
            if (series[i].yAxis.userOptions.id == "digital") {
                     for(var j = 0; j < series[i].data.length; j++){
              if(series[i].data[j].y == 1){
                 series[i].data[j].y = 1 + 0.1 * i;
              } else {
                 series[i].data[j].y = 0
              }
              }
              this.update(series, true, false);
            }
          }
        }
      }
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    title: {
      text: false
    },
    subtitle: {
      text: false
    },
    xAxis: {
      type: 'datetime',
      //tickInterval: 3600 * 1000,
      //min : Date.UTC(2018,1,5),
      //max : Date.UTC(2018,1,5)
    },
    yAxis: [{
      id: "analogic"
    }, {
      id: "digital",
      min: 0,
      max : 2,
      ceiling: 2,
      floor: 0,
      opposite: true,
      //tickInterval: 1,
      visible: false
    }],
    series: [{
      yAxis: "analogic",
      data: [10, 100, 40, 60, 80, 180],
      pointInterval: 1000 * 60 * 60,
      type: "spline",
      color: "gray"
    }, {
      type: "line",
      yAxis: "digital",
      data: [0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1],
      pointInterval: 1000 * 60 * 60,
      step: true,
      color: "red"
    }, {
      type: "line",
      yAxis: "digital",
      data: [0, 0, 1, 1, 0, 0, 1, 1, 0, 01, 1, 0],
      pointInterval: 1000 * 60 * 60,
      step: true,
      color: "green"
    }, {
      type: "line",
      yAxis: "digital",
      data: [0, 0, 1, 1, 0, 0],
      pointInterval: 1000 * 60 * 60,
      step: true,
      color: "blue"
    }],
    plotOptions: {
      line: {
        marker: {
          enabled: false
        }
      },
      spline: {
        marker: {
          enabled: false
        }
      },
      series: {
        states: {
          hover: {
            enabled: false
          }
        }
      }
    }
  });
});
    }

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

Related Tutorials