score:4

Accepted answer

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

score:1

Fixed : http://jsfiddle.net/basarat/pfkbX/1/

Basically need to add yAxis.align = 'left'. Also move the labels up a bit (so they are on the line instead of under the line by setting the y=2 property) and also bring them into focus with x=0 property: 


$(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'
                        },
                      y:-2,
                      x:0,
                      align:'left'
                    }
                },
                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
                    }
                }
            });
        });

});

score: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


Related Query

More Query from same tag