Highcharts test tool

HTML

<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

CSS

#container {
  min-width: 300px;
  max-width: 800px;
  height: 300px;
  margin: 1em auto;
}

JavaScript

/**
 * Highcharts Marimekko study
 *
 * To do: 
 * - X axis categories should be placed under columns. Move translation 
 *   computations up to processData, then use these to move axis labels as well as columns.
 * - Tooltip positions
 * - Inherited Z value for stacks? Otherwise it must be set for each series.
 */

(function(H) {
  var seriesTypes = H.seriesTypes,
    each = H.each,
    extendClass = H.extendClass,
    defaultPlotOptions = H.getOptions().plotOptions,
    merge = H.merge;

  defaultPlotOptions.marimekko = merge(defaultPlotOptions.column, {
    pointPadding: 0,
    groupPadding: 0
  });

  seriesTypes.marimekko = extendClass(seriesTypes.column, {
    type: 'marimekko',
    pointArrayMap: ['y', 'z'],
    parallelArrays: ['x', 'y', 'z'],
    processData: function() {
      var series = this;
      this.totalZ = 0;
      this.relZ = [];
      seriesTypes.column.prototype.processData.call(this);

      each(this.zData, function(z, i) {
        series.relZ[i] = series.totalZ;
        series.totalZ += z;
      });

    },
    translate: function() {
      var series = this,
        totalZ = series.totalZ,
        xAxis = series.xAxis;

      seriesTypes.column.prototype.translate.call(this);

      // Distort the points to reflect z dimension
      each(this.points, function(point, i) {
        var shapeArgs = point.shapeArgs,
          relZ = series.relZ[i];
          
        shapeArgs.x *= (relZ / totalZ) / (shapeArgs.x / xAxis.len);
        shapeArgs.width *= (point.z / totalZ) / (series.chart.xAxis[0].pointRange / series.xAxis.max);
      });
    }
  });

}(Highcharts));


$('#container').highcharts({

  title: {
    text: 'Highcharts Marimekko study'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]
  },

  series: [{
    type: 'marimekko',
    data: [{
      x: 1,
      y: 1,
      z: 10
    }, {
      x: 2,
      y: 2,
      z: 20
    }, {
      x: 3,
      y: 3,
    ...