title: Highchart Columns - Space between columns not changing
body: <p>I know this topic is a bit recurrent here on Stackoverflow but after searching a lot of posts I haven't found a way to fix my issue.</p>
  <p>I have a column chart that can have one or multiple columns.
  The columns must have a fixed with and start from the left.
  To be compliant with the client approved mockups, the space between columns must be 1.5times the width of each column.</p>
  <p>I created a fiddle to replicate with I currently have.
  I tried using pointPadding and groupPadding but unless I set the pointWidth the columns don't comply with the mockups.</p>
  <p>How can I set the distance between columns?</p>
  <p>Here's the current configuration:</p>
  <pre><code>Highcharts.chart('container', {
      chart: {
          type: 'column'
      },
      xAxis: {
              maxPadding: 0,
              minPadding: 0,
              lineWidth: 0,
          tickWidth: 0,
          categories: ['Jan', 'Feb', 'Mar', 'Apr'],
          labels: {
              align: 'center',
              reserveSpace: true
          }
      },
      yAxis: {
              max: 399.71,
          lineWidth: 0,
          lineColor: 'transparent',        
          gridLineWidth: 0,
          minorGridLineWidth: 0,
          labels: {
              enabled: false
          },
          plotLines: [{
              value: 77.28,
              color: '#A8AEB7',
              label: {
                  x: 0,
                  formatter: function () {
                      return '&lt;span style=color:#616771;&gt;Média&lt;/span&gt;&lt;br/&gt;77.28'
                  },                
                  align: 'left',
                  style: {
                      color: '#A8AEB7'
                  }
              },
          }]
      },
      tooltip: {
          backgroundColor: '#353C47',
          borderColor: '#353C47',
          shadow: false,
          style: {
              color: '#ffffff',
              fontSize: '10px'
          }
      },
      plotOptions: {
          series: {
                  pointWidth:25,
              pointPadding: 0,
              borderWidth: 0,
              borderRadius: 13,
              point: {
                  events: {
                      mouseOver: function() {    
                          this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x].style='font-weight:bold';
                          },
                          mouseOut: function() {                 
                          this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x].style='font-weight:normal';
                          }
                  }
              }       
          }
      },
  
      series: [{
          data: [-48.54,279.92, -321.99,399.71]
      }]
  });
  </code></pre>
  <p><a href="https://jsfiddle.net/marioandrade/L2u4pkxm/16/" rel="nofollow noreferrer">https://jsfiddle.net/marioandrade/L2u4pkxm/16/</a></p>
  <p>In answer to Sebastian Wędzel comment.
  The ideal layout would be something like this where the number of columns is dynamic, between 1 and 12, but always starting from the left, with the same spacing between columns as shown on the image. Adding empty or value zero columns is not acceptable for the client.</p>
  <p><a href="https://i.stack.imgur.com/civVi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/civVi.png" alt="enter image description here" /></a></p>