draw between two categories for columnrange chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

draw between two categories for columnrange 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-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {/* www .  j  av  a 2s.  com*/
  $('#container').highcharts({
    chart: {
      type: 'columnrange',
      inverted: true
    },
    title: {
      text: 'Test'
    },
    subtitle: {
      text: 'Sample'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar'],
      visible: false
    },
    yAxis: {
      visible: false
    },
    legend: {
      enabled: false
    },
    series: [{
      name: 'Series4',
      type: 'line',
      marker: {
        enabled: false
      },
      index: 1,
      data: [
        [0, 1.5],
        [1, 1.5],
        [2, 1.5]
      ],
    }, {
      name: 'Series1',
      data: [
        [0, 3],
        [0, 3],
        [0, 3]
      ],
      pointPlacement: -0.20,
      pointWidth: 50
    }, {
      name: 'Series2',
      data: [
        [3, 6],
        [3, 6],
        [3, 6]
      ],
      pointPlacement: 0,
      pointWidth: 1
    }, {
      name: 'Series3',
      data: [
        [6, 9],
        [6, 9],
        [6, 9]
      ],
      pointPlacement: 0.20,
      pointWidth: 50
    }]
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
   </body>
</html>

Related Tutorials