score:2

Accepted answer

EDIT: A more elegant solution that doesn't require you to edit highcharts.js but instead makes use of prototype to extend Highcharts. Add the following Javascript snippet to your code before you instantiate any graphs:

Highcharts.Series.prototype.drawGraph = (function (func) {
        return function () {
            func.apply(this, arguments);
            if (typeof this.options.areaPadding !== "undefined"){
                for (i=2;i<this.areaPath.length;i+=3){
                    this.areaPath[i]+=this.options.areaPadding;
                }
            }
        };
    } (Highcharts.Series.prototype.drawGraph));

Then use the areaPadding parameter like so to add space between the line and the area:

var chart = new Highcharts.Chart({
    plotOptions:{
        area: {
            areaPadding: 4   
        }
    }
});

See it in action here: http://jsfiddle.net/AAQEq/


Related Articles