Remove space between yAxis and data in highcharts

Question

I would like to remove the space between y-axis and the chart as shown below:

Here is a fiddle used to create this chart : jsFiddle for this chart

Here is the code used to setup (same as jsFiddle):

$(function () {
   var chart;
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    spacingLeft: 2,
                    spacingRight: 2
                },
                credits: { enabled: false },
                title: { text: '' },
                yAxis: {
                    title: '',
                    labels: {
                        style: {
                            fontSize:'9px'
                        }
                    }
                },
                xAxis: { labels: { enabled: false } }, //hide the x axis labels 

                series: [{
                    type: 'area',
                    name: 'speed',
                    showInLegend: false,
                    data: [
                        71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6,
                        71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6,
                        54.4]
                }],
                /* To make it pretty */
                plotOptions: {
                    area: {
                        animation: false,
                        lineWidth: 1,
                        marker: {
                            enabled: false,
                            states: {
                                hover: {
                                    enabled: true,
                                    radius: 5
                                }
                            }
                        },
                        shadow: false,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        threshold: null
                    }
                }
            });
        });

});

Answer 1

The right way to do it is set the offset to -15.

yAxis: {
    offset: -15
}

demo

offset:

The distance in pixels from the plot area to the axis line. A positive offset moves the axis with it's line, labels and ticks away from the plot area. This is typically used when two or more axes are displayed on the same side of the plot. Defaults to 0.

reference

Answer 2

Consider using the following using your xAxis object:

        maxPadding:0,
        minPadding:0

Also make sure your labels closure doesn't include a 'step'

min and max are also a handy way to bind