title: Highcharts - Multiple Y Axis Stacked Charts
body: <p>I am creating a chart with two Y axes - distance and duration.  Each Y axis will have multiple series ( run, bike, swim, etc.) stacked on top of one another.  Duration is a stacked area or areaspline and distance is a stacked column chart.</p>
  
  <p>Here is the jsfiddle for the chart. <a href="http://jsfiddle.net/baberuth22/u5QCB/3/" rel="nofollow">http://jsfiddle.net/baberuth22/u5QCB/3/</a></p>
  
  <pre><code>$(function() {
  
  var run_data = [[1324771200000,2928000],[1325376000000,2148000],[1327190400000,1001000],[1327795200000,2336000],[1329609600000,2403000],[1330214400000,2456000],[1330819200000,3615000],[1334448000000,1753000],[1338681600000,1998000],[1348358400000,1897000],[1350777600000,8130000],[1353801600000,9402000],[1354406400000,9612000],[1355011200000,4500000]];
  var swim_data = [[1324771200000,1726000],[1348963200000,14520000],[1350777600000,15540000],[1352592000000,7380000],[1353801600000,4571000],[1354406400000,4500000]];
  var bike_data = [[1327190400000,4289000],[1330214400000,4650000],[1330819200000,3655000],[1331424000000,2217000],[1334448000000,4349000],[1348963200000,4241000],[1350777600000,15014000],[1351382400000,4118000],[1353196800000,3362000],[1353801600000,11944000],[1354406400000,5997000]];
  var strength_data = [[1324771200000,3275000],[1334448000000,600000],[1350777600000,4403000],[1351382400000,3339000],[1351987200000,4175000],[1353196800000,3754000],[1354406400000,3890000]];
  var yoga_data = [[1351382400000,2656000],[1352592000000,609000]];
  var other_data = [[1352592000000,309000],[1353196800000,186000]];
  
  
  
  var run_distance_data = [[1324771200000,4],[1325376000000,3.1],[1327190400000,1.5],[1327795200000,3],[1329609600000,3.4],[1330214400000,3.5],[1330819200000,4.9],[1334448000000,2.5],[1338681600000,2.7],[1348358400000,2.6],[1350777600000,10.2],[1353801600000,7.6],[1354406400000,17.2],[1355011200000,10],[1331424000000,0],[1348963200000,0],[1351382400000,0],[1351987200000,0],[1352592000000,0],[1353196800000,0]];
  var swim_distance_data = [[1324771200000,0.5],[1348963200000,1.5],[1350777600000,3.1],[1352592000000,0.2],[1353801600000,6.2],[1354406400000,3.1],[1325376000000,0],[1327190400000,0],[1327795200000,0],[1329609600000,0],[1330214400000,0],[1330819200000,0],[1331424000000,0],[1334448000000,0],[1338681600000,0],[1348358400000,0],[1351382400000,0],[1351987200000,0],[1353196800000,0],[1355011200000,0]];
  var bike_distance_data = [[1327190400000,19.4],[1330214400000,20.2],[1330819200000,16.1],[1331424000000,9.9],[1334448000000,16.3],[1348963200000,16.1],[1350777600000,168],[1351382400000,15.5],[1353196800000,10.7],[1353801600000,47.2],[1354406400000,24],[1324771200000,0],[1325376000000,0],[1327795200000,0],[1329609600000,0],[1338681600000,0],[1348358400000,0],[1351987200000,0],[1352592000000,0],[1355011200000,0]];
  var other_distance_data = [[1352592000000,3.1],[1353196800000,3],[1324771200000,0],[1325376000000,0],[1327190400000,0],[1327795200000,0],[1329609600000,0],[1330214400000,0],[1330819200000,0],[1331424000000,0],[1334448000000,0],[1338681600000,0],[1348358400000,0],[1348963200000,0],[1350777600000,0],[1351382400000,0],[1351987200000,0],[1353801600000,0],[1354406400000,0],[1355011200000,0]];
  
  // one week - 604800000
  var chart = new Highcharts.Chart({
      chart: {
          renderTo: 'graph1',
          zoomType: 'x'
      },
      title: {
          text: 'Workout Duration By Week'
      },
      subtitle: {
          text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Drag your finger over the plot to zoom in'
      },
      xAxis: {
          type: 'datetime'
  
      },
      yAxis: [{
          type: 'datetime',
          //y-axis will be in milliseconds
          dateTimeLabelFormats: { //force all formats to be hour:minute:second
              second: '%H:%M:%S',
              minute: '%H:%M:%S',
              hour: '%H:%M',
              day: '%H'
          },
          title: {
              text: 'Duration (hours)'
          },
          min: 0
  
          }
                      ,
      {
          min: 0,
          title: {
              text: 'Distance ' + '(miles)'
          },
          opposite: true}
                      ],
  
      tooltip: {
          formatter: function() {
              var range_start_date = new Date(this.x);
              //var range_start_date = new Date(this.x * 1000);
              var range_end_date = new Date(range_start_date);
              range_end_date.setDate(range_end_date.getDate() + 6);
              var unix_end_datetime = range_end_date.getTime();
              var return_string = '&lt;b&gt;' + this.series.name + '&lt;/b&gt; ' + Highcharts.dateFormat('%b %e', this.x) + ' - ' + Highcharts.dateFormat('%b %e', unix_end_datetime) + '&lt;br/&gt;';
  
              if (this.series.index &lt;= 5){
                  return_string += Highcharts.dateFormat('%H hours %M minutes', this.y) + ' ';                        
              }else{
                  return_string += this.y + ' (miles) ';
              }
  
              return return_string;
          }
      },
      plotOptions: {
          column: {
              pointRange: 604800000,
              stacking: 'normal'
          },
          area: {
              stacking: 'normal'
          }
      },
      series: [
          {
          name: 'Run',
          data: run_data,
          type: 'column'},
      {
          name: 'Swim',
          data: swim_data,
          type: 'column'},
      {
          name: 'Bike',
          data: bike_data,
          type: 'column'},
      {
          name: 'Strength',
          data: strength_data,
          type: 'column'},
      {
          name: 'Yoga',
          data: yoga_data,
          type: 'column'},
      {
          name: 'Other',
          data: other_data,
          type: 'column'}
          ,
      {
          name: 'Run',
          data: run_distance_data,
          yAxis: 1,
          type: 'area'},
      {
          name: 'Swim',
          data: swim_distance_data,
          yAxis: 1,
          type: 'area'},
      {
          name: 'Bike',
          data: bike_distance_data,
          yAxis: 1,
          type: 'area'},
      {
          name: 'Other',
          data: other_distance_data,
          yAxis: 1,
          type: 'area'
  
          }
      ]
  });
  
  
  var d = new Date();
  chart.xAxis[0].setExtremes(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate() - 7), Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
  chart.showResetZoom();
  </code></pre>
  
  <p>});​</p>
  
  <p>It is the top chart.</p>
  
  <p>The stacking doesn't seem to work properly and I do not see any examples of multiple axes stacked on the highcharts demo page. <a href="http://www.highcharts.com/demo/combo-multi-axes" rel="nofollow">http://www.highcharts.com/demo/combo-multi-axes</a> or <a href="http://www.highcharts.com/demo/column-stacked" rel="nofollow">http://www.highcharts.com/demo/column-stacked</a> , but not both.  </p>
  
  <p>If I set both axes to 'column' type, the stacking works, but the bars are on top of each other.  Ideally I'd like a semi-transparent area chart in the background with column in front.  </p>