Tent pole chart test

author(s): Mike Zavarello

by Mike Zavarello

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>

<div id="container" style="min-width: 310px; height: 500px; max-width: 700px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'scatter'
    },
    title: {
        text: 'Tent pole chart test'
    },
    xAxis: {
        gridLineWidth: 1, gridLineDashStyle: 'Dash', gridLineColor: 'gray', tickInterval: 0.25, min: 1.25, max: 2.5, minorTickInterval: 0.125
    },
    yAxis: {
    		min: 0, tickInterval: 0.25, minorTickInterval: 0.125, max: 1,
        title: {
            text: 'Value'
        }
    },
    legend: {
        enabled: true,
        title: { text: 'Target Range' },
        layout: 'vertical'
    },
    exporting: {
        enabled: false
    },
    plotOptions: {
        series: {
            lineWidth: 1,
            marker: { symbol: 'circle' }
        }
    },
    series: [{
        name: '1.375', data: [{x: 1.375, y: 0, marker: { enabled: false }},{x: 1.375, y: 0.165, marker: { enabled: true }}]
    },{
        name: '1.625', data: [{x: 1.625, y: 0, marker: { enabled: false }},{x: 1.625, y: 0.05, marker: { enabled: true }}]
    },{
        name: '1.875', data: [{x: 1.875, y: 0, marker: { enabled: false }},{x: 1.875, y: 0.875, marker: { enabled: true }}]
    },{
        name: '2.125', data: [{x: 2.125, y: 0, marker: { enabled: false }},{x: 2.125, y: 0.025, marker: { enabled: true }}]
    },{
        name: '2.375', data: [{x: 2.375, y: 0, marker: { enabled: false }},{x: 2.375, y: 0.0125, marker: { enabled: true }}]
    }]
});