annotations - draw rectangle by axis points? - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

annotations - draw rectangle by axis points?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Annotations Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container {// ww w.j  ava  2 s  .com
   max-width: 800px;
   margin: 0 auto;
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/annotations.js"></script> 
      <div id="container" style="height: 400px; margin-top: 1em"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]
  },
  title: {
    text: 'Highcharts Annotations'
  },
  series: [{
    data: [{
      y: 29.9,
      id: 'min'
    }, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, {
      y: 216.4,
      id: 'max'
    }, 194.1, 95.6, 54.4]
  }, {
     name: 'Fake annotations points',
      type: 'scatter',
    marker: {
       enabled: false
    },
    showInLegend: false,
    //
    data: [{
       x: 0,
      y: 29.9,
      id: '1'
    }, {
       x: 0,
      y: 216.4,
      id: '2'
    }, {
       x: 8,
      y: 216.4,
      id: '3'
    }, {
       x: 8,
      y: 29.9,
      id: '4'
    }]
  }],
  annotations: [{
    shapes: [{
      type: 'path',
      points: ['1', '2', '3', '4'],
    }]
  }]
});

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

Related Tutorials