disable the expand width icon on hover in navigator for stock chart - Javascript highcharts

Javascript examples for highcharts:Stock Chart

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

Description

disable the expand width icon on hover in navigator for stock 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"> 
      <style id="compiled-css" type="text/css">

.highcharts-navigator, .highcharts-navigator * {
   cursor : default !important
}


      </style> 
   </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> 
      <script type="text/javascript">
Highcharts.stockChart('container', {
      chart: {/*from   www  .  j  a  v a 2s.  c o  m*/
        spacingTop: 170,
        spacingBottom: 20,
        type: 'line'
      },
      navigator: {
        enabled: true,
        top: -10,
        height: 50,
        tickAmount: 12,
        maskFill: 'rgba(0, 0, 255, 0.2)',
        outlineColor: 'transparent',
        handles: {
          enabled: false,
          backgroundColor: 'transparent',
          borderColor: 'transparent'
        },
        series: {
          lineColor: 'transparent',
          fillOpacity: 0
        },
        xAxis: {
          labels: {
            style: {
              color: '#000000',
              fontWeight: 'bold',
              fontSize: '14px'
            }
          }
        }
      },
    scrollbar: {
            enabled: false
        },
    rangeSelector: {
       enabled: false
    },
    series: [{
        name: 'USD to EUR',
        data: usdeur
    }]
});

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

Related Tutorials