Risk and Return

Risk And Returns Chart

by Sushil Mahajan

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript

$(function () {
    var data = [{x:3,y:5, name : "SC", dataLabels: {shape: 'triangle'}},
                
                {x:10, y:12, name : "LC"},
                {x:13.3, y:20, name : "MC"},
                {x:21.4, y:34.43, name : "FI",
                     dataLabels: {
                         shape: 'diamond', 
                         backgroundColor: 'white',
                        borderWidth: 3 }
                },
                {x:34, y:44.89, name : "e"}

];
        // Create the chart
        $('#container').highcharts({


           
            credits : {
                enabled : false
            },

            title : {
                text : ''
            },
            
            legend: {
                enabled : false
            },
            
            xAxis: {
                labels: {
                    format: '{value} %'
                },
                title: {
                    text: 'Risk Returns'
                }
            },
            
            yAxis: {
                labels: {
                    format: '{value} %'
                },
                 title: {
                    text: 'Average Annual Returns'
                }
            },

            series : [{
                name : 'AAPL Stock Price',
                data : data,
                lineWidth : 0,
                marker : {
                    enabled : false
                },
                dataLabels: {
                    shape: 'circle',
                    
                    backgroundColor: 'rgba(252, 255, 197, 0.7)',
                    borderWidth: 2,
                    borderColor: '#AAA',
                    style: {
                        
                        textShadow: 'none'
                    },
                    enabled: true,
                    inside: true,
                    formatter: function () {
                        return this.point.name;
                    }
                },
            ...