scatterchart

by Dhamotharan

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container">

</div>

JavaScript

$('#container').highcharts({
		chart: {
            type: 'scatter',
            zoomType: 'xy'
        },
        title: {
            text: ' Value vs Hours'
        },
        subtitle: {
            text: ''
        },
        credits: {
		    enabled: false
    },
        xAxis: {
            title: {
                enabled: true,
                text: ' Hours'
            },
            labels: {
                formatter: function() {
                  if (this.value == 500) return '>=' + this.value
                  else return this.value;
                 }
            },
            startOnTick: false,
            endOnTick: false,
            showLastLabel: true,
            plotLines: [{
                color: '#000',
                width: 1,
                value:  220}],
            max: 500,maxPadding: 0,
            min: 0,
            tickInterval: 50
        },
        yAxis: {
            title: {
                text: 'Value'
            },
           labels: {
                formatter: function() {
                  if (this.value == (12)) return '>=' + this.value
                  else return this.value;
                 }
            },
            startOnTick: false,
            endOnTick: false,
            plotLines: [{
                color: '#000',
                width: 2,
                value: 6}],
            max: 12,maxPadding: 0,
            min: 0,
            tickInterval: 1
        },
        legend: {
            layout: 'vertical',
            align: 'bottom',
            verticalAlign: 'top',
            x: 0,
            y: -200
        },
        plotOptions: {
            scatter: {
                marker: {
                    radius: 5,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(100,100,100)'
                        }
                    },
                    symbol: "circle"
                },
               ...