Highcharts Demo

author(s): Torstein Hønsi

by core972

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/en-gb.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.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="chartContainer"></div>

CSS

#container {
  min-width: 310px;
  height: 400px;
  margin: 0 auto;
}

JavaScript

let data = [  
   {  
      "name":"Something",
      "data":[  
         {  
            "x":1541096421,
            "y":2
         },{  
            "x":1541436378,
            "y":4
         },{  
            "x":1553621371,
            "y":2
         }
       ]
   },{  
      "name":"Something else",
      "data":[  
         {  
            "x":1541096421,
            "y":2
         },{  
            "x":1541436378,
            "y":4
         },{  
            "x":1553621371,
            "y":2
         }
       ]
   }
];

$('#chartContainer').highcharts({
                chart: {
                    type: 'scatter',
                    zoomType: 'xy'
                },
                title: {
                    text: "chartTitle()"
                },
                xAxis: {
                    allowDecimals: false,
                    title: {
                        text: 'Date completed',
                        scalable: false
                    },
                    type: 'datetime',
                    labels: {
                        formatter: function () {
                            if (true) {
                                return Highcharts.dateFormat('%d-%b-%y', moment.unix(this.value));
                            }
                            else {
                                if (this.value > 0 && this.value < 24) {
                                    return this.value;
                                }
                                else
                                    return 0;

                            }
                        }
                    },
                    tickPixelInterval: 100
                },
                yAxis: {
                    title: {
                        text: 'Score'
                    }
                },
                plotOptions: {
                    scatter: {
                        marker: {
                            radius: 5
                        }
                   ...