C3 Stacked Charting Ordering

It seems as though c3 uses the cumulative values of a row to determine stack ordering.

by Sai Baba Satchitanand

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<div id="chart"></div>

CSS

path.domain { stroke: #B6B6B6; stroke-width:0.5px }
.tick text { stroke: #B6B6B6; stroke-width:0.5px }
.c3-legend-item text { stroke: #B6B6B6; stroke-width:0.5px }
.tick line{ stroke: #B6B6B6; stroke-width:0.5px}
[class^="c3-axis-"] {
    stroke: #B6B6B6; stroke-width:0.5px
}
.c3-axis-y2-label {
  stroke: #F8BBD0;
}

JavaScript

var chart = c3.generate({
    bindto: '#chart',
    data: {
	    x: 'x',
      columns: [
	      ['x', 'Q1', 'Q2', 'Q3', 'Q4', 'Q5'],
        ['Promo Sales', 30, 200, 100, 400, 150],
        ['Total Sales', 35, 250, 100, 100, 20],
        ['Incremental Sales', 50, 20, 10, 40, 15]
      ],
      axes: {
        'Incremental Sales': 'y2'
      },
      types: {
      	'Promo Sales': 'bar',
        'Total Sales': 'bar' // ADD
      },
      colors: {
        'Promo Sales': '#f6be1a',
        'Total Sales': '#B6B6B6',
        'Incremental Sales': '#ed4b82'
      },
    },
    subchart: {
        show: true
    },
    
    axis: {
      y: {
        label: {
          text: 'Sales',
          position: 'outer-middle'
        }
      },
      y2: {
        show: true,
        label: {
          text: '% Incremental Sales',
          position: 'outer-middle'
        }
      },
      x: {
            type: 'category'
        }
    }
});