Highcharts Demo

author(s): Torstein Hønsi

by Saurabh Khemka

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.chart('container', {
  
            chart: {
                type: 'scatter',
                zoomType: 'xy',
                marginTop: 50,
                marginBottom: 100,
                marginLeft: 50,
                marginRight: 50
            },
            title: {
                text: ''
            },
            credits: {
                enabled: false
            },
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            labels: {
                items: [{
                    html: '<h1>Least attractive</h1>',
                    style: {
                        left: '0px',
                        top: '200px'
                    }
                },
                {
                    html: '<h1>Most attractive</h1>',
                    style: {
                        left: '300px',
                        top: '-20px'
                    }
                }]
            },

            xAxis: {
                title: {
                    enabled: true,
                    text: 'Base Return / Avg Volatility',
                    y: 10
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true,
                
                 lineWidth: 1,
        gridLineWidth: 0,
                
                minorGridLineWidth: 0,
                tickLength: 0,
                plotLines: [{
                    color: '#000000',
                    width: 10,
                    value: 0
                }]
            },
            yAxis: {
                title: {
                    align: 'high',
                    text: 'Skew (Bull + Bear)/Avg Vol',
                    rotation: 0,
                    y: -20,
                    textAlign: 'left',
                    margin: 0
                },
                lineWidth: 0,
        gridLineWidth: 0,
                
               ...