Highcharts bar chart with varied bar widths?

Question

I want to make stacked bar chart where each portion has a width that encodes one value (say "Change" in the data below) and a height that encodes another value ("Share")

In some ways this is like a histogram with different bin sizes. There are a few "histogram" questions but none seem to address this. Plot Histograms in Highcharts

So given data like this:

Category        Share   Price Change
Apples          14.35   0.1314192423
Horseradish     46.168  0.1761474117
Figs            2.871   0.018874249
Tomatoes        13.954  0.0106121298
Mangoes         7.264   0.1217297011
Raisins         5.738   0.0206787136
Eggplant        6.31    0.0110160732
Other produce   3.344   0.0945377722

I can make a stacked bar that captures the "share" column in widths:

And another that captures the "change" column in heights:

And I can use an image editor to combine those into this histogram-like beast:

Which really captures that horseradish is a huge deal. So my question is, can I do that within Highcharts?

Answer 1

You can realise that by using snippet.

 (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.pointRange / series.xAxis.max); 
            });
        }
    });

}(Highcharts));

Example: http://jsfiddle.net/highcharts/75oucp3b/