How do I remove padding from both sides of Highcharts area category chart?

Question

There's too much padding on either side of the area chart and minPadding/maxPadding doesn't work with categories.

I want the area chart to start and end without any padding.

My code is below:

http://jsfiddle.net/nx4xeb4k/1/

$('#container').highcharts({
  chart: {
    type: 'area',
    inverted: false
  },
  title: {
    text: 'Too Much Padding On Either Side'
  },
  plotOptions: {
    series: {
      fillOpacity: 0.1
    }
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    title: {
      text: 'Data Point'
    }
  },
  legend: {
    enabled: false
  },
  tooltip: {
    pointFormat: '<b>{point.y}</b> points'
  },
  series: [{
    name: 'Visits',
    data: [
      ["Monday", 58],
      ["Tuesday", 65],
      ["Wednesday", 55],
      ["Thursday", 44],
      ["Friday", 56],
      ["Saturday", 65],
      ["Sunday", 69]
    ],
    dataLabels: {
      enabled: false,
      rotation: -90,
      color: '#FFFFFF',
      align: 'right',
      format: '{point.y:.1f}',
      y: 10,
      style: {
        fontSize: '14px',
        fontFamily: 'Verdana, sans-serif'
      }
    }
  }]
});

Answer 1

You can declare the min / max values to fix the problem.

var categoryLabels = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]; 
//....
xAxis: {
  min: 0.49,
  max: categoryLabels.length - 1.49,
  categories: categoryLabels, 
  type: 'category'
},

Example:

• http://jsfiddle.net/fo04m7k7/

Answer 2

According to API, the default value of highcharts.xAxis.tickmarkPlacement is between and this is why the point of each category drops between two ticks on xAxis in your chart.

By setting highcharts.xAxis.tickmarkPlacement to on and playing around the value of highcharts.xAxis.min and highcharts.xAxis.max like this, you should be able to achieve what you want.

Answer 3

A colleague of mine solved this very situation for some of my charts. Their solution was to remove the type: 'category' from the x-axis (making it a linear type instead) and instead replace the axis labels from an array.

Here's what's been changed:

First, I added an array of your x-axis labels.

var categoryLabels = ["Monday","Tuesday","Wednesday","Thursday","Friday",
"Saturday","Sunday"];

Next, I updated your series values to hold only the y-axis values.

series: [{
  name: 'Visits',
  data: [58, 65, 55, 44, 56, 65, 69],

Then, for your x-axis, I included a formatter function to pull in the labels from the array as substitutes for the default linear values.

xAxis: {
  labels: {
    formatter: function(){
      return categoryLabels[this.value];
    }
  }
},

Lastly, I updated the tooltip options to show the values from the labels array.

    tooltip: {
        formatter: function () {
            return categoryLabels[this.x] + ': ' + Highcharts.numberFormat(this.y,0);
        }
    },

I updated your fiddle with this tweaks: http://jsfiddle.net/brightmatrix/nx4xeb4k/4/

I hope you'll find this solution as useful as I have!