html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

img {

  display: none;

}

anychart.onDocumentReady(function() {

​

  // minimum size of a series logo in px

  var sizeThreshold = 30;

​

  var data = anychart.data.set([

    ["2018-01-01", 12, 32, 10],

    ["2018-01-02", 8, 2, 12],

    ["2018-01-03", 34, 15, 1],

    ["2018-01-04", 2, 19, 7],

    ["2018-01-05", 10, 12, 9]

  ]);

​

  var chart = anychart.column();

  chart.yScale().stackMode("value");

  chart.legend(true);

  chart.pointWidth('65%');

  chart.palette(["#087dc9", "#ff8500", "#fd0002"]);

​

  // set data from the table

  var mapping1 = data.mapAs({'x': 0, 'value': 1});

  var mapping2 = data.mapAs({'x': 0, 'value': 2});

  var mapping3 = data.mapAs({'x': 0, 'value': 3});

  var series1 = chart.column(mapping1);

  series1

    .name('AnyChart')

    .meta('image', 'http://cdn.anychart.com/ts/icons/anychart.svg');

​

  var series2 = chart.column(mapping2);

  series2

    .name('AnyStock')

    .meta('image', 'http://cdn.anychart.com/ts/icons/anystock.svg');

​

  var series3 = chart.column(mapping3);

  series3

    .name('AnyMap')

    .meta('image', 'http://cdn.anychart.com/ts/icons/anymap.svg');

​

  for (var i = 0; i < chart.getSeriesCount(); i++) {

    setupDrawer(chart.getSeriesAt(i), sizeThreshold);  

  }

​

  chart.container("container").draw();

​

  //custom drawer

  function setupDrawer(series, sizeThreshold) {

    var images = [];

    var tmp = series.rendering().shapes();

    tmp.push({

      name: 'image',

      shapeType: 'path',

      fillName: 'fill',

      canBeHoveredSelected: true,

      strokeName: 'stroke',

      isHatchFill: false

    });

​

    series.rendering()

      .shapes(tmp)

      .needsZero(true)

      .point(function() {

      // get shapes group

      var shapes = this.getShapesGroup(this.pointState);

​

      // calculate the left value of the x axis

      var leftX = this.x - this.pointWidth / 2;

      // calculate the right value of the x axis

      var rightX = leftX + this.pointWidth;

​

      shapes['path']

      // resets all 'line' operations

        .clear()

        .moveTo(leftX, this.zero)

        .lineTo(leftX, this.value)

        .lineTo(rightX, this.value)

        .lineTo(rightX, this.zero)

      // close by connecting the last point with the first straight line

        .close();

​

      // draw the logo if the image is greater than a threshold

      if (Math.abs(this.zero - this.value) >= sizeThreshold) {

        shapes['image']

        // resets all 'line' operations

          .clear()

          .moveTo(leftX, this.zero)

          .lineTo(leftX, this.value)

          .lineTo(rightX, this.value)

          .lineTo(rightX, this.zero)

        // close by connecting the last point with the first straight line

          .close()

          .zIndex(3)

          .fill({

          src: series.meta('image'),

          mode: "fit",

          opacity: 1

        });

​

        shapes = this.getShapesGroup(1);

        shapes['image']

        // resets all 'line' operations

          .clear()

          .moveTo(leftX, this.zero)

          .lineTo(leftX, this.value)

          .lineTo(rightX, this.value)

          .lineTo(rightX, this.zero)

        // close by connecting the last point with the first straight line

          .close()

          .zIndex(2);

      }

    })

  }

});