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: 100,
                marginRight: 100,
                width: 1024
            },
            title: {
                text: ''
            },
            credits: {
                enabled: false
            },
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            labels: {
                items: [{
                    html: '<b style="color: red;font-size: 10px;">LEAST ATTRACTIVE</b>',
                    style: {
                        left: '0px',
                        top: '240px'
                    }
                },
                {
                    html: '<b style="color: green;font-size: 10px;">MOST ATTRACTIVE</b>',
                    style: {
                        left: '740px',
                        top: '0px'
                    }
                }]
            },
            xAxis: {
                title: {
                    enabled: true,
                    size: 10,
                    text: 'BASE RETURN / AVG VOLATILITY',
                    y: 10
                    // style: {
                    //     color: 'rgb(162,163,165)'
                    // }
                },
                min: 6,
                max: 24,
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true,
                lineWidth: 1,
                gridLineWidth: 0,
                minorGridLineWidth: 0,
                minorTickLength: 0,
                tickLength: 0,
                offset: 10,
                plotLines: [{
                    color: 'red',
                    width: 0.5,
                    stroke: 'black',
                    value: 15,
                    dashStyle: 'ShortDash'
         ...