Highcharts Demo

author(s): Torstein Hønsi

by itsjustcarlos

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

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'scatter',
            zoomType: 'xy'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
  lineWidth: 1,
  minorGridLineWidth: 20,
            categories: [ 'Jan 15' ,  'Jan 16' ,  'Jan 17' ,  'Jan 18' ,  'Jan 19' ,  'Jan 20'  ],
            title: {
                enabled: true,
                text: 'Date'
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true
       

 },
        yAxis: {
  lineWidth: 1,
            title: {
                text: 'Tickets'
            },
           plotBands: [{ // Below
                from: 0,
                to: 10,
                color: 'rgb(255, 228, 225)',
                label: {
                    text: 'Below',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Light breeze
                from: 11,
                to: 39,
                color: 'rgb(255, 230, 204)',
                label: {
                    text: 'Warning',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Gentle breeze
                from: 40,
                to: 100,
                color: 'rgb(230, 254, 230)',
                label: {
                    text: 'Expectation',
                    style: {
                        color: '#606060'
                    }
                }
            }]
        },

        plotOptions: {
            scatter: {
                marker: {
                    radius: 5,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(100,100,100)'
                        }
                    }
                },
                states: {
            ...