Highcharts Demo

author(s): Torstein Hønsi

by Saurabh Khemka

HTML

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

<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></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: '245px'
                    }
                },
                {
                    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: 0,
                minorGridLineWidth: 0,
                lineColor: 'transparent',
                minorTickLength: 0,
                tickLength: 0,
                offset: 10,
                plotLines: [{
                    color: '#000000',
                    width: 0.5,
                    value: 0
                }]
            },
            yAxis: {
                title: {
                    align: 'high',
                    text: 'Skew (Bull + Bear)/Avg Vol',
                    rotation: 0,
                    y: -20,
                    textAlign: 'left',
                    margin: 0
                },
                gridLineWidth: 0,
               ...