Scatter plot

author(s): Torstein Hønsi

by jeffgw

HTML

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

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

CSS

.highcharts-figure, .highcharts-data-table table {
    min-width: 360px; 
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

data = [[[2800, 5.0], [2810, 12.0], [2820, 12.0], [2830, 23.0], [2840, 1.0], [2850, 14.0], [2860, 4.0], [2870, 4.0], [2880, 16.0], [2890, 8.0], [2900, 8.0], [2910, 30.0], [2920, 30.0], [2930, 0.0], [2940, 0.0], [2950, 0.0], [2960, 23.0], [2970, 9.0], [2980, 16.0], [2990, 16.0], [3000, 16.0], [3010, 15.0], [3020, 15.0], [3030, 12.0], [3040, 14.0], [3050, 18.0], [3060, 8.0], [3070, 1.0], [3080, 1.0], [3090, 13.0], [3100, 15.0], [3110, 15.0], [3120, 1.0], [3130, 10.0], [3140, 22.0], [3150, 19.0], [3160, 19.0], [3170, 13.0], [3180, 13.0], [3190, 5.0], [3200, 11.0], [3210, 3.0], [3220, 3.0], [3230, 8.0], [3240, 8.0]], [[2800, -28.0], [2810, -17.0], [2820, -17.0], [2830, -13.0], [2840, -17.0], [2850, -2.0], [2860, -26.0], [2870, -26.0], [2880, -1.0], [2890, -26.0], [2900, -26.0], [2910, 0.0], [2920, 0.0], [2930, -28.0], [2940, -14.0], [2950, -14.0], [2960, 0.0], [2970, -6.0], [2980, -29.0], [2990, -28.0], [3000, -28.0], [3010, -19.0], [3020, -19.0], [3030, -7.0], [3040, -23.0], [3050, -2.0], [3060, -9.0], [3070, -42.0], [3080, -42.0], [3090, -15.0], [3100, -2.0], [3110, -2.0], [3120, -33.0], [3130, -5.0], [3140, 0.0], [3150, 0.0], [3160, 0.0], [3170, -7.0], [3180, 0.0], [3190, 0.0], [3200, -3.0], [3210, -28.0], [3220, -28.0], [3230, -37.0], [3240, -37.0]]];


Highcharts.chart('container', {
    chart: {
        type: 'scatter',
        zoomType: 'xy'
    },
    title: {
        text: 'SPX Opening IB'
    },
    subtitle: {
        text: 'Lst 200 days'
    },
    xAxis: {
        title: {
            enabled: true,
            text: 'Price'
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
    },
    yAxis: {
        title: {
            text: 'Points'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        x: 100,
        y: 70,
        floating: true,
        backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
        borderWidth: 1
    },
   ...