javascript - Highcharts 24 hour clock -

javascript - Highcharts 24 hour clock -

i have chart that's displaying flow of hashtags based on when posted. want have x-axis display time in hourly fashion starting 00:00 , 1 hr in between display entire cycle of 24 hours 23:00. here's problem, shows 00:00-22:00 , can't life of me understand why. here's code:

var chart = (function () { function chart() { var _this = this; this.data = { "tw": [174, 5, 278, 269, 282, 283, 271, 316, 251, 265, 273, 261, 265, 265, 45, 45, 60, 60, 46, 370, 428, 465, 404, 372], "ig": [266, 217, 221, 240, 220, 206, 193, 219, 186, 233, 213, 213, 243, 243, 109, 115, 128, 136, 196, 360, 483, 432, 382, 303], "gp": [31, 14, 13, 17, 14, 11, 8, 13, 12, 11, 20, 45, 22, 29, 17, 19, 27, 21, 18, 24, 37, 35, 20, 21], "total": 12009, "toptags": [{ "tag": "#paradisehotelse", "count": 3600 }, { "tag": "#tv4", "count": 3240 }, { "tag": "#idolse", "count": 3126 }] }; this.load(function () { _this.googleplus = _this.getdata('googleplus'); _this.twitter = _this.getdata('twitter'); _this.instagram = _this.getdata('instagram'); _this.init(); }); chart.prototype.init = function () { var hr = 3600 * 1000; $('#graph').highcharts({ chart: { backgroundcolor: 'none', type: 'spline', spacingbottom: 0, spacingtop: 0, spacingleft: 1, spacingright: 1, width: null, height: 270, animation: 2000 }, title: { text: '' }, subtitle: { text: '' }, legend: { enabled: false }, credits: { enabled: false }, xaxis: { labels: { y: 12, align: 'left', style: { color: 'white', fontweight: 'normal', fontfamily: 'open sans' } }, showlastlabel: false, tickmarkplacement: 'on', tickposition: 'inside', tickwidth: 0, tickpixelinterval: 60, linewidth: 2, linecolor: 'rgba(255,255,255,0.6)', maxpadding: 0, minpadding: 0, gridlinewidth: 0, offset: 20, startontick: true, type: 'datetime', datetimelabelformats: { day: '%h:%m' } }, yaxis: { minortickposition: 'inside', gridlinecolor: 'rgba(255,255,255,0.3)', gridlinewidth: 0, title: { enabled: false, text: 'temperature' }, labels: { enabled: false } }, tooltip: { backgroundcolor: 'rgba(0,0,0,0.0)', bordercolor: 'none', shadow: false, style: { color: 'white', fontsize: '12px', padding: '8px' }, enabled: true, crosshairs: false, shared: false, snap: 30, formatter: function () { homecoming math.floor(this.y); } }, plotoptions: { flags: { shape: 'squarepin' }, spline: { dashstyle: 'shortdot', linewidth: 4 } }, series: [ { pointstart: 0 * hour, pointinterval: hour, color: '#fda345', name: 'google plus', marker: { enabled: false }, data: this.googleplus }, { pointstart: 0 * hour, pointinterval: hour, color: '#00aced', name: 'twitter', marker: { enabled: false }, data: this.twitter }, { pointstart: 0 * hour, pointinterval: hour, color: '#f49ac1', name: 'instagram', marker: { enabled: false }, data: this.instagram }] });

this javascript related chart, lot looking it.

you plot indeed show info 22:00 23:00. problem is, though, 23:00 tick getting suppressed.

why? problem one, you've told highcharts startontick haven't enabled corresponding endontick option. problem two, maxpadding option. setting 0 , having info ends on 23:00, you've given highcharts no space add together lastly tick label.

//maxpadding: 0, endontick: true

here's fiddle.

javascript html5 highcharts