Highcharts graph should start entirely to the left

Question

Using Highcharts I would like to get my graph to start directly next to the labels of the Y-Axis and to end where the x-axis ends. As you can see in the link below it starts with a lot of spacing to the left and a lot of spacing to the right.

Example of the current situation

Answer 1

This is not possible since you are using categories for the xAxis. Labels and points for categories are always set in the middle of the category. The first and last category therefore have the gap you want to get rid of. Try removing categories, the space should be gone.

This is not a bug or problem, it's a feature.

You could try and modify your xAxis to use a normal axis not categories and use a custom label formatter to display the desired values instead of numbers.

Or You could try using data options with points and pass it in the formatter.

Answer 2

  Highcharts.Axis.prototype.init = (function (func) {
     return function (chart, userOptions) {
            func.apply(this, arguments);
            if (this.categories) {
                this.userCategories = this.categories;
                this.categories = undefined;
                this.labelFormatter = function () {
                return this.axis.userCategories[this.value];
            };
      }
     };
    }(Highcharts.Axis.prototype.init));

see result http://jsfiddle.net/xaeSN/2/

Answer 3

The above solutions or accepted answer had an issue, when you mouseover on the graph the tooltip is showing index of the x-axis instead of label name. I fixed the issue with below solution SO link and attached a link to it.

jsfiddle.net/mkpasala/3s0prgau/14/