changing color on hover ranking spline chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

changing color on hover ranking spline 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-2.0.2.js"></script> 
      <script type="text/javascript">
    $(function(){/*  w w w.  j  a v  a2  s.c  om*/
x = null;
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'spline'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    },
    yAxis: {
        title: {
            text: 'Rank'
        },
        allowDecimals: false,
        reversed: true,
        min: 0.5,
        startOnTick: false,
        endOnTick: false,
        max: 3.5
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                align: 'left',
                x: 5,
                y: 4,
                formatter: function () {
                    if (this.point.x == this.series.data.length - 1) {
                        return this.series.name;
                    } else {
                        return null;
                    }
                }
            }
        }
    },
    series: [{
        data: [1, 1, 2, 1, 1],
        name: 'Ada',
        events: {
            mouseOver: function () {
                this.update({
                    color: '#0000FF'
                });
            },
            mouseOut: function () {
                this.update({
                    color: '#C0C0C0'
                });
            }
        },
        color: '#C0C0C0'
    }, {
        data: [2, 3, 1, 2, 3],
        name: 'Bob',
        color: '#FF0000'
    }, {
        data: [3, 2, 3, 3, 2],
        name: 'Caesar',
        events: {
            mouseOver: function () {
                this.update({
                    color: '#0000FF'
                });
            },
            mouseOut: function () {
                this.update({
                    color: '#C0C0C0'
                });
            }
        },
        color: '#C0C0C0'
    }]
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 300px"></div> 
      <div id="report"></div>  
   </body>
</html>

Related Tutorials