events with plotbands in Date Range Line Series in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

events with plotbands in Date Range Line Series in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Stock Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script> 
      <style id="compiled-css" type="text/css">

.highcharts-crosshair {/* w w  w.j  a va  2  s  . c o m*/
   // pointer-events: none;
}


      </style> 
      <script type="text/javascript">
$(function () {
    Highcharts.stockChart('container', {
        rangeSelector: {
            buttonTheme: { // styles for the buttons
                fill: 'none',
                stroke: 'none',
                'stroke-width': 0,
                r: 8,
                style: {
                    color: '#039',
                    fontWeight: 'bold'
                },
                states: {
                    hover: {
                    },
                    select: {
                        fill: '#039',
                        style: {
                            color: 'white'
                        }
                    }
                }
            },
            inputBoxBorderColor: 'gray',
            inputBoxWidth: 120,
            inputBoxHeight: 18,
            inputStyle: {
                color: '#039',
                fontWeight: 'bold'
            },
            labelStyle: {
                color: 'silver',
                fontWeight: 'bold'
            },
            selected: 5
        },
         xAxis: {
            crosshair: false,
            plotBands: [{
                color: '#FCFFC5',
                from: Date.UTC(2010,06,06),
                to: Date.UTC(2011,05,06),
                id: 'plotband-1',
                events: {
                    click: function (event) {
                            console.log('event1');
                        }
                    },
            },{
                color: '#FCFFC5',
                from: Date.UTC(2014,06,06),
                to: Date.UTC(2015,05,06),
                id: 'plotband-1',
                events: {
                    click: function (event) {
                            console.log('event2');
                        }
             }
         }]
        },
        series: [{
            name: 'USD to EUR',
            data: usdeur
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <div id="container" style="height: 400px; min-width: 600px"></div> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>  
   </body>
</html>

Related Tutorials