Draw vertical lines and horizontal bands

Question

Am plotting array directly to series of my high chart.I need to show vertical lines in x-axis and horizontal bands in y axis as different colors.

Need to add vertical lines and horizontal bars according to values displayed in chart.

Here is my code:

$('#container').highcharts({
    title: {
        text: 'Graph',
        x: -20 //center
    },
    subtitle: {
        text: '',
        x: -20
    },
    credits: {
        enabled: false
    },

    colors: ['red'],

    xAxis: {
        // categories: [],
        title: {
            text: 'Time'
        },
    },
    yAxis: {
        title: {
            text: 'Rate'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: ''
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'Heart Rate',
        data: data_arr
    }]
});

Answer 1

For that, you can use chart.xAxis[0].categories.length to access the length of xAxis, and chart.xAxis[0].categories[] to access the values of xAxis' elements. Check the following example :

$(function() {
  $('#container').highcharts({

    xAxis: {
      categories: [10, 20, 30, 40, 50, 60, 70]
    },

    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
    }]
  });


  // the button action
  var hasPlotLine = false,
    $button = $('#button'),
    chart = $('#container').highcharts();

  $button.click(function() {
    for (i = 1; i < chart.xAxis[0].categories.length; i++) {
      if (chart.xAxis[0].categories[i] > 30) {
        chart.xAxis[0].addPlotLine({
          value: i,
          color: 'red',
          width: 2,
          id: 'plot-line-1'
        });
      }
    }
  });
});

Answer 2

To set up vertical/horizontal lines/Bands use plotBands or/and plotLines options:

For lines:

    plotLines: [{
        color: '#FF0000',
        width: 2,
        value: 5.5
    }]

For Band

    plotBands: [{ // mark the weekend
        color: '#FCFFC5',
        from: Date.UTC(2010, 0, 2),
        to: Date.UTC(2010, 0, 4)
    }],

You can read more here:

http://api.highcharts.com/highcharts#xAxis.plotBands http://api.highcharts.com/highcharts#xAxis.plotLines

Check the following example jsfiddle

$(function() {
  $('#container').highcharts({
    title: {
      text: 'Graph',
      x: -20 //center
    },
    subtitle: {
      text: '',
      x: -20
    },
    credits: {
      enabled: false
    },

    colors: ['red'],

    xAxis: {
      // categories: [],
      title: {
        text: 'Time'
      },
      plotLines: [{
        color: 'blue',
        width: 1,
        value: 1,
        dashStyle: 'longdashdot',
        zIndex: 3
      }, {
        color: 'blue',
        width: 1,
        value: 2,
        dashStyle: 'longdashdot',
        zIndex: 3
      }, {
        color: 'blue',
        width: 1,
        value: 3,
        dashStyle: 'longdashdot',
        zIndex: 3
      }],

      zIndex: 3,
    },
    yAxis: {
      title: {
        text: 'Rate'
      },
      plotBands: [{ // mark the weekend
        color: '#BEE9B4',
        from: 1,
        to: 4
      }, { // mark the weekend
        color: '#EB813B',
        from: 4,
        to: 6
      }, { // mark the weekend
        color: '#E93A0F',
        from: 6,
        to: 8
      }],
      zIndex: 2,
    },
    tooltip: {
      valueSuffix: ''
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false
        }
      }
    },
    series: [{
      type: 'spline',
      name: 'Heart Rate',
      data: [4, 5, 1, 2, 8, 7, 4, 1]
    }]
  });
});