Highcharts's width is not able to fill 100% of parent

Question

I'd like to fill the Highcharts to fill its width to 100% of its parent without any padding left/right.

I read HighCharts full width issue and tried set : margin minPadding and maxPadding to 0 but does not work.

Demo to demonstrate the problem

From the demo, the xAxis is to expand 100% of the container, and part of x categories value is not shown.

How can I setup the options to solve the problem?

Answer 1

You need to set min/max values as workaround.

xAxis:{
      type:'categories',
      min:0.49,
      max: categories.length - 1.49,
      categories: categories,
      minPadding:0,
      maxPadding:0,
      gridLineWidth:0,
      tickmarkPlacement: 'between',//仅适用于类别轴categories值时候，刻度线位于在类别名称的中心
      labels: {
          align:'center',
          y:-3,//垂直偏移
          style:{
              color:'white'
          }
      }
    },

http://codepen.io/anon/pen/PZWxwa