Highcharts Demo

author(s): Torstein Hønsi

by Haze32

HTML

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

<div id="container"></div>

CSS

body{
  background:#000;
}

JavaScript

$('#container').highcharts({
    chart: {
      type: 'scatter',
      backgroundColor: "transparent",
      height: 500
    },
    credits: {
    	enabled: false
  	},
    title: {
      text: ""
    },
    xAxis: [{
        min: -100,
        max: 100,
        lineColor: 'transparent',
        gridLineWidth: 0,
        tickLength: 0,
        title: {
          y: 10,
          text: 'Lower Return',
          style: {
            fontSize: '16px',
            fontWeight: '400',
            color: '#fff',
          }
        },
        labels: {
          enabled: false,
        },
        plotLines: [{
          color: '#ddd',
          width: 1,
          value: 0
        }]
      }, {
        lineColor: 'transparent',
        opposite: true,
        title: {
          text: 'Higher Return',
          y: -10,
          useHTML: true,
          style: {
            fontSize: '16px',
            fontWeight: '400',
            color: '#fff',
          }
        },
      },
      {
        lineColor: 'transparent',
        title: {
          text: 'VOLATILITY/STANDARD DEVIATION',
          useHTML: true,
          style: {
            fontSize: '17px',
            fontWeight: '400',
            color: '#fff',
            border: '1px solid #fff',
            padding: "0 10px 0 10px",
            textAlign: "center"
          }
        },
      },
    ],
    yAxis: [{
      min: -100,
      max: 100,
      gridLineWidth: 0,
      labels: {
        enabled: false,
      },
      title: {
        text: 'Lower Volatility',
        style: {
          fontSize: '16px',
          fontWeight: '400',
          color: '#fff',
        }
      },
      plotLines: [{
        color: '#ddd',
        width: 1,
        value: 0
      }]
    }, {
      lineColor: 'transparent',
      opposite: true,
      title: {
        text: 'Higher Volatility',
        useHTML: true,
        style: {
          fontSize: '16px',
          fontWeight: '400',
          color: '#fff',
        }
    ...