score:2

Accepted answer

TL:DR

Make your x axis tick marks fall at midnight with tickInterval: (24 * 3600 * 1000)

Detailed answer

You said that you saw "multiple labels with same caption are created on X Axis". However when I view your fiddle in a recent version of Google Chrome, the x axis looks clean, though the tickmarks don't align perfectly with the days:

screenshot from jsfiddle

I suggest you try different browsers to see if your issue is caused by a particular browser version.

You said in your comment that if you maximize the chart in a larger window, some of the date labels are repeated.

I suggest you make a simpler plot to try to nail down your issue(s).

Update

If you change your formatter function to include the time as well as the date:

Highcharts.dateFormat('%d-%b-%y %H:%M', moment.unix(this.value))

each tickmark will have a different label, even if they fall on the same day:

time format on axis labels

Alternatively, customize the layout of the tick marks so that they always fall on midnight.

Update 2

I made a simplified demo to show tick marks and data both aligned with midnight. The important features are:

tickInterval: (24 * 3600 * 1000) // the number of milliseconds in a day.

and:

[Date.UTC(2015, 11, 01), 75],  // pure JavaScript to return a unix time (in milliseconds since unix epoch) of midnight on the 1st of December

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'scatter',
      zoomType: 'xy'
    },
    title: {
      text: 'Datetime scatter plot demo'
    },
    subtitle: {
      text: 'for Stack Overflow'
    },
    xAxis: {
      tickInterval: (24 * 3600 * 1000), // the number of milliseconds in a day
      allowDecimals: false,
      title: {
        text: 'Date',
        scalable: false
      },
      type: 'datetime',
      labels: {
        formatter: function() {
          return Highcharts.dateFormat('%d-%b-%y', (this.value));
        }
      }
    },
    yAxis: {
      title: {
        text: 'Value'
      }
    },
    series: [{
      "name": "Demo values",
      "data": [
        [Date.UTC(2015, 11, 01), 75],
        [Date.UTC(2015, 11, 02), 70],
        [Date.UTC(2015, 11, 02), 80],
        [Date.UTC(2015, 11, 02), 45],
        [Date.UTC(2015, 11, 03), 65],
        [Date.UTC(2015, 11, 03), 40],
        [Date.UTC(2015, 11, 05), 75]
      ]
    }],
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>


Related Query

More Query from same tag