Highcharts Line Chart does not fit data into all of categories

Question

Highcharts seems to create numbers that are not inside categories. Is there a way to auto-adjust data to fit into the categories.

this.options = {
            chart: {
            type: 'line'
    },
    title: {
        text: 'Line Test Chart'
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017],
        crosshair: true
    },
    yAxis: {
      stackLabels: { enabled: true}
    },
    tooltip: {
             headerFormat: '<b>{point.x}</b><br/>',
             pointFormat: '{series.name}: {point.y}'
            },
    plotOptions: {
        column: {
          stacking: 'normal',
           grouping: false,
          dataLabels: {enabled: true},
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Construction--Spending Non-Residential',
        data: [100, 99, 98, 99, 99, 100, 99, 97, 98, 99, 100, 99, 97, 99, 98, 99]
            },{
        name: 'Construction--Spending Residential',
        data: [100, 98, 99, 97, 96, 98, 100, 97, 98, 96, 98, 97, 98, 100, 98, 97]
            }]
        };
    }
    options: Object;

See: Plunker Example

Image Example of what I am trying to achieve: Image Link

Answer 1

It happens, because in your case you have more points that categories defined in the categories array and pointInterval is equal 1. You can for example change xAxis type to 'datetime' and set different pointInterval (e.g. 6 months) but it is up to you how you arrange your data.

API Reference:
http://api.highcharts.com/highcharts/xAxis.type
http://api.highcharts.com/highcharts/plotOptions.series.pointStart
http://api.highcharts.com/highcharts/plotOptions.series.pointInterval

Example:
https://plnkr.co/edit/KBDyCQsEPXNc3GUtUukr?p=preview