title: Overlapping and rounded stack in stacked column graph in Highcharts
body: <p>I am trying to achieve something like column 2014 but I haven't found a way to provide layering like this. <a href="https://jsfiddle.net/mukeshshamra1201/cyfv64ub/84/" rel="nofollow noreferrer">This</a> is a fiddle of what I have till now.<br>
  <a href="https://i.stack.imgur.com/MobTC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MobTC.png" alt="2 columns having different stacks"></a>
  <br>
  <br>I need to make a stacked column graph that looks like <strong>either 2014 column or 2015 column</strong>.(which ever is feasible)<br></p>
  
  <ul>
  <li><p>The problem with column 2014 is that I am not able to find any property to give (negative) margin to achieve the above result.</p></li>
  <li><p>The problem with the column 2015 is that I am not able to add border radius to the top-left and top-right corners alone. 
  <br></p></li>
  </ul>
  
  <blockquote>
    <p>As links to fiddle must be accompanied by the code</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Highcharts.chart('container', {
    chart: {
      type: 'column',
      spacingBottom: 0
    },
    title: {
      text: ''
    },
    xAxis: {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
      offset: 7,
      lineWidth: 0,
      tickLength: 0
    },
    yAxis: {
      min: 0,
      title: {
        text: ''
      },
      stackLabels: {
        enabled: false,
        style: {
          fontWeight: 'bold',
          color: 'gray'
        }
      },
      visible: false
    },
    legend: {
      align: 'center',
  
      verticalAlign: 'bottom',
  
    },
    tooltip: {
      headerFormat: '&lt;b&gt;{point.x}&lt;/b&gt;&lt;br/&gt;',
      pointFormat: '{series.name}: {point.y}&lt;br/&gt;Total: {point.stackTotal}'
    },
    plotOptions: {
      series: {
  
      },
      column: {
        stacking: 'normal',
        borderWidth: 0,
        borderRadius: 5,
        dataLabels: {
          enabled: true,
          color: 'white'
        }
      }
    },
    series: [{
      name: 'John',
      data: [5, 3, 4, 7, 2],
  
    }, {
      name: 'Jane',
      data: [2, 2, 3, 2, 1]
    }, {
      name: 'Joe',
      data: [3, 4, 4, 2, 5]
    }]
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/export-data.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>