javascripthighchartsmarimekko-chart

Highcharts 'bindAxis' for one chart only

I'm trying to integrate a MariMekko / Market type of chart in my application. I found an interesting implementation here:

http://jsfiddle.net/h2np93k1/39/

This code constructs a treemap and adds axis to it. That is done by this snippet:

Highcharts.seriesTypes.treemap.prototype.bindAxes = function() {
    Highcharts.Series.prototype.bindAxes.call(this);
};

However, if I understand correctly, this will cause all my treemap charts to have axis. I don't want this, I'd like to keep the axis only for my marimekko maps.

What whould be the best way to accomplish this? Is there an easy way to extend a charttype for example?

Solution

  • The easy way to do it is to wrap a core function and add conditional statement that checks options and applies the modification when needed.

    In this case I added isMariMekko flag in the series. If it's true the modified code executes. It's false the original function launches:

      Highcharts.wrap(Highcharts.seriesTypes.treemap.prototype, 'bindAxes', function(proceed) {
    if (this.options.isMariMekko) {
      var treeAxis = {
        min: 0,
        dataMin: 0,
        max: 100,
        dataMax: 0
      };

      Highcharts.Series.prototype.bindAxes.call(this);
      Highcharts.extend(this.yAxis.options, treeAxis);
      Highcharts.extend(this.xAxis.options, treeAxis);

    } else {
      proceed.apply(this); // default action
    }

  });

    Docs reference about wrapping: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts