Change color of hover points for line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Change color of hover points for line 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" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*w  w  w  . j a  v  a2 s  . co  m*/
       $(function () {
          $('#main-chart').highcharts({
              chart: {
                  type: 'area'
              },
              plotBorderColor: '#000000',
              plotBackgroundColor: '#000000',
              title: {
                  text: ''
              },
              subtitle: {
                  text: ''
              },
              xAxis: {
                  allowDecimals: false,
                  labels: {
                      formatter: function () {
                          return this.value; // clean, unformatted number for year
                      }
                  }
              },
              yAxis: {
                  title: {
                      text: 'Number of Clicks'
                  },
                  labels: {
                      formatter: function () {
                          return this.value / 1000 + 'k';
                      }
                  }
              },
              tooltip: {
                  pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
              },
              plotOptions: {
                  area: {
                      pointStart: 1940,
                      marker: {
                          enabled: false,
                          symbol: 'circle',
                            fillColor: '#f00',
                          radius: 2,
                          states: {
                              hover: {
                                  enabled: true
                              }
                          }
                      }
                  }
              },
              series: [{
                  name: 'USA',
                  lineColor: '#4adefa',
                  color: '#f1faf7',
                  data: [251, 122, 511, 424, 291, 426, 121, 342, 110, 235, 369, 640,250]
              }, {
                  name: 'USSR/Russia',
               lineColor: '#44d99f',
               color: '#f1faf7',
                  data: [215, 125, 450, 120, 150, 200, 426, 660, 869, 1060, 900, 340, 429]
              }]
          });
      });
    });

      </script> 
   </head> 
   <body> 
      <div id="main-chart" style="width:100%;height:300px;"></div>  
   </body>
</html>

Related Tutorials