Highchart : xaxis Adding extra Dates randomly

Question

I have two stacked column graphs. Both Provided below

Both contain very similar data with the same number of columns.

All Location jsfiddle

Location 3 jsfiddle

Both have the exact same initialisation code and the data is the only difference between them.

chart: { renderTo:'hcweeklySnapshotLoc_container', animation: { animation: true }, defaultSeriesType: 'column', height: 500, marginBottom: 140, zoomType: 'x' }, 
    credits: { enabled: false }, 
    plotOptions: { column: { dataLabels: { enabled: true }, stacking: 'normal' }, line: { lineWidth: 1, marker: { enabled: false, states: { hover: { enabled: true } } } }, series: { pointInterval: 7 }, spline: { lineWidth: 3, marker: { enabled: false, states: { hover: { enabled: true } } } } }, 
    title: { text: 'Location 3', x: -20 }, 
    tooltip: { formatter: function() { if(this.series.name == 'Target'|| this.series.name == 'Stretch' || this.series.name == 'Failure') { return '<b>'+ this.series.name +'</b><br/>' + Highcharts.dateFormat('%e %B %Y', this.x) +': <b>'+ this.y + '</b>' } else { return '<b>'+ this.series.name +'</b>' +'<br/>' + 'Week Ending :' + Highcharts.dateFormat('%e %B %Y', this.x) +': '+ this.y +'<br/>' + 'Total: '+ Math.round(this.point.stackTotal*Math.pow(10,2))/Math.pow(10,2);} } }, 
    xAxis: { dateTimeLabelFormats: { month: '%b %Y' }, minRange: 86400000, startOfWeek: 5, tickInterval: 604800000, tickmarkPlacement: 'on', title: { text: 'Week ending' }, type: 'datetime' }, 
    yAxis: { allowDecimals: false, min: 0, title: { text: 'Number of People' } }

The Other locations ( Location 1 and Location 2) also face the same problem as the All Location graph.

My problem is that the All Location graph is showing an extra date tick at the end while the Location 3 graph is not. Is this some bug in Highcharts or is this a problem with my data. I am using MVC4/Razor to generate the highcharts using Highchart.Net

Answer 1

The reason this is happening is because your series are not all in ascending time order. The same is true on both of your charts. The reason why the All Locations one looks worse is that it is guessing differently on how to render the chart. If you put your time series in chronological order you should be good to go. See this example.

Your code:

{
            data: [
                [Date.parse('05/31/2013 00:00:00'), 1],
                [Date.parse('03/15/2013 00:00:00'), 3],
                [Date.parse('05/03/2013 00:00:00'), 2],
                [Date.parse('04/26/2013 00:00:00'), 3],
                [Date.parse('03/29/2013 00:00:00'), 2],
                [Date.parse('04/05/2013 00:00:00'), 1],
                [Date.parse('03/22/2013 00:00:00'), 4],
                [Date.parse('04/19/2013 00:00:00'), 6],
                [Date.parse('05/17/2013 00:00:00'), 4],
                [Date.parse('04/12/2013 00:00:00'), 1],
                [Date.parse('05/24/2013 00:00:00'), 4],
                [Date.parse('05/10/2013 00:00:00'), 1]
            ],
            name: 'Loc3',
            type: 'column',
            color: '#003E69',
            lineWidth: 1,
            pointInterval: 7
        }

Chronological code:

{
            data: [
                [Date.parse('03/15/2013 00:00:00'), 3],
                [Date.parse('03/22/2013 00:00:00'), 4],
                [Date.parse('03/29/2013 00:00:00'), 2],
                [Date.parse('04/05/2013 00:00:00'), 1],
                [Date.parse('04/12/2013 00:00:00'), 1],
                [Date.parse('04/19/2013 00:00:00'), 6],
                [Date.parse('04/26/2013 00:00:00'), 3],
                [Date.parse('05/03/2013 00:00:00'), 2],
                [Date.parse('05/10/2013 00:00:00'), 1],
                [Date.parse('05/17/2013 00:00:00'), 4],
                [Date.parse('05/24/2013 00:00:00'), 4],
                [Date.parse('05/31/2013 00:00:00'), 1]
            ],
            name: 'Loc3',
            type: 'column',
            color: '#003E69',
            lineWidth: 1,
            pointInterval: 7
        }