Using marker's radius for points in stock chart - Javascript highcharts

Javascript examples for highcharts:Stock Chart

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

Description

Using marker's radius for points in 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 ava  2s .c o m
         // Create the chart
      $('#container').highcharts('StockChart', {
          chart: {
          },
          rangeSelector: {
              selected: 1
          },
            yAxis: {
                offset: 20,
                labels: {
                    align: 'right',
                    x: 0,
                    y: 3
                }
            },
            plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false
                }
            }
        }
    },
          title: {
              text: 'AAPL Stock Price'
          },
          series: getData()
      });
    function getData(){
        var seriesData = [
            {
                name: 'Red',
                id: 'red',
                data: [{
                   x: 1392140700000,
                   y: 2
                },
                      {
                   x: 1392140760000,
                   y: 2
                },
                      {
                   x: 1392140820000,
                   y: 2
                },
                      {
                   x: 1392141000000,
                   y: 2
                },
                      {
                   x: 1392141060000,
                   y: 2
                }],
                color: 'red',
                lineWidth: 0,
                marker : {
               enabled : true,
               radius : 10,
                    symbol: 'square'
            }
            },
            {
                name: 'Green',
                id: 'green',
                data: [{
                   x: 1392140880000,
                   y: 2
                },
                      {
                   x: 1392140940000,
                   y: 2
                }],
                color: 'green',
                linkedTo: 'red',
                lineWidth: 0,
                marker : {
               enabled : true,
               radius : 10,
                    symbol: 'square'
            }
            },
            {
                name: 'Grey',
                id: 'Grey',
                data: [{
                   x: 1392140820000,
                   y: 2
                },
                      {
                   x: 1392140880000,
                   y: 2
                }],
                color: 'grey',
                linkedTo: 'red',
                lineWidth: 0,
                marker : {
               enabled : true,
               radius : 10,
                    symbol: 'square'
            }
            }
        ];
        return seriesData;
    }
});

      </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"></div>  
   </body>
</html>

Related Tutorials