add current price line on hover for stock chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

add current price line on hover for stock 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">
$(function () {/*from  w  ww .  j a  v a2s. co m*/
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlc.json&callback=?', function (data) {
        // create the chart
        $('#container').highcharts('StockChart', {
            chart: {
                marginRight: 40
            },
            rangeSelector: {
                inputEnabled: $('#container').width() > 480,
                selected: 1
            },
            title: {
                text: 'Highstock Current Price Indicator Demo'
            },
            series: [{
                type: 'candlestick',
                name: 'AAPL Stock Price',
                data: data,
                dataGrouping: {
                    units: [
                        ['week', // unit name
                        [1] // allowed multiples
                        ],
                        [
                            'month', [1, 2, 3, 4, 6]]
                    ]
                },
                point: {
                    events: {
                        mouseOver: function() {
                             var chart = this.series.chart;
                            chart.yAxis[0].removePlotLine("tooltip-line");
                            chart.yAxis[0].addPlotLine({
                                width: 2,
                                color: "black",
                                id: "tooltip-line",
                                value: this.series.yData[this.series.yData.length - 1][0]
                            });
                        },
                        mouseOut: function() {
                            this.series.yAxis.removePlotLine("tooltip-line");
                        }
                    }
                }
            }],
            yAxis: {
                // dummy plot line
                plotLines: [{
                    lineWidth: 0,
                    id: "tooltip-line",
                    value: 0
                }],
                opposite: true,
                labels: {
                    x: 20
                }
            }
        });
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <div id="container" style="height: 500px; min-width: 310px"></div>  
   </body>
</html>

Related Tutorials