limit Highcharts x-Axis grouped categories and labels style

Question

I am trying to draw a chart as below but the x axis stops at end of year 11 which it does not at the moment. I set max to 19 but it did not work.How can I get rid of those grey lines after end of Year 11?

Also for x-axis labels I want to decrease the font size of second category ([1,2,3,4]) and Year with bigger font but in label styles the font size property applies to all labels.

var l=19;
var m=-0.6;

new Highcharts.Chart({
            chart: {
                renderTo: elementId,
                spacingLeft: 10,
                spacingRight: 10
            },
            title: {
                text: subject
            },
            xAxis: {
                categories: [{
                    name: "Year 7",
                    categories: [1, 2, 3, 4]
                }, {
                    name: "Year 8",
                    categories: [1, 2, 3, 4]
                }, {
                    name: "Year 9",
                    categories: [1, 2, 3, 4]
                }, {
                    name: "Year 10",
                    categories: [1, 2, 3, 4]
                }, {
                    name: "Year 11",
                    categories: [1, 2, 3, 4]
                }],
                labels: {
                    style: {
                        fontSize: '7.5px'
                    }
                },
                plotLines: [{
                    color: '#5DA06E',
                    width: 2,
                    value: l
                }, {
                    color: '#5DA06E',
                    width: 2,
                    value: -1
                }],
                //max: l
            },

            yAxis: [{
                labels: {
                    enabled: false
                },
                title: {
                    text: null
                },
                min: 0,
                max: 1000
            },
                {
                    title: {
                        text: null
                    },
                    labels: {
                        style: {
                            fontSize: '7.5 px'
                        },
                        align: 'left',
                        x: 3,
                        formatter: function () {
                            var value = change[this.value];
                            return value !== 'undefined' ? value : this.value;
                        }
                    },
                    tickPositions: [0, 280, 360, 440, 520, 600, 680, 760, 840, 920, 1000],
                    gridLineColor: 'white',
                    opposite: true,
                    min: 0,
                    max: 1000
                }],

            series: [{
                type: 'line',
                data: [[m, 0], [l, 280]],
                color: '#A5DEC1',
            }, {
                type: 'line',
                data: [[m, 80], [l, 360]],
                color: '#94D0A3',
            },
...

strong text

Answer 1

Are m and l params constant? Or can you change them? If yes, then see: http://jsfiddle.net/TFhd7/373/

In short: Categories reserves a place from -0.5 to 0.5 with category index. For example Year7 -> 4 means x-values from 3.5 to 4.5. So according to this information let's change that values:

var l = 19.5;
var m = -0.5;

Now modify extremes and plotLines:

        plotLines: [{
            color: '#5DA06E',
            width: 2,
            value: l
        }, {
            color: '#5DA06E',
            width: 2,
            value: m
        }],
        max: l - 0.5,
        min: m + 0.5,