title: Highcharts - Bar - Setting the X axis width and the chart area width to be constant
body: <p>Can anyone recommend a method of setting the X axis to be a constant width across multiple instances of a bar chart?</p>
  
  <p>See this jsFiddle:  <a href="http://jsfiddle.net/LCYwW/1/" rel="nofollow">http://jsfiddle.net/LCYwW/1/</a></p>
  
  <p>The first chart is an example of placing the data for 2 locations in a single chart. In this case, Highcharts automatically adjusts the X axis width to accommodate both location labels. </p>
  
  <p>However, I need to separate these 2 locations into separate charts, but maintain the same proportions of X Axis to bar area width for both charts. See charts 2 and 3 in the example. In this case, Highcharts picks an X axis width that suits just the single location and the 2 charts do not line up when stacked.</p>
  
  <p>Is there a method to get the individual charts to maintain the same proportions as each other? I tried setting the xAxis.labels.style.width attribute, and it does <em>something</em>, but doesn't seem to be a concrete width. See <a href="http://jsfiddle.net/LCYwW/3/" rel="nofollow">http://jsfiddle.net/LCYwW/3/</a></p>
  
  <p>This example is easiest to see in the jsFiddle, but SO is requiring me to post the code:</p>
  
  <pre><code> $('#containerAll').highcharts({
      chart:{
          type: 'bar'
      },
      series: [
          {
          name: 'Male',
          data: [{"name":"58.1%","y":0.581}, {"name":"18.1%","y":0.181}]
      },
          {
              name: 'Female',
              data: [{"name":"58.5%","y":0.585}, {"name":"28.5%","y":0.285}]   
          }
      ],
      xAxis: {
          categories: ['Short Name', 'Much Longer Location Name']   
      }
  });
  
  
  $('#container1').highcharts({
      chart:{
          type: 'bar'
      },
      series: [
          {
          name: 'Male',
          data: [{"name":"58.1%","y":0.581}]
      },
          {
              name: 'Female',
              data: [{"name":"58.5%","y":0.585}]   
          }
      ],
      xAxis: {
          categories: ['Short Name'],
          labels: {
              style: {
                  width: 200
              }
          }
      }
  });
  
   $('#container2').highcharts({
      chart:{
          type: 'bar'
      },
      series: [
          {
          name: 'Male',
          data: [{"name":"18.1%","y":0.181}]
      },
          {
              name: 'Female',
              data: [{"name":"28.5%","y":0.285}]   
          }
      ],
      xAxis: {
          categories: ['Much Longer Location Name'],
          labels: {
              style: {
                  width: 200
              }
          }
      }
  });
  </code></pre>