Display bar chart with thumbnails in yAxis instead of label

Question

I am using two charts libraries in my project. ECharts and Google Charts.

I want to display bar chart with thumbnails. I need to display log of banners.

So i wil

Answer 1

echarts support rich text as label

in the option yAxis or xAixs -> axisLabel -> rich,

check this example1 example2

yAxis: {
    type: 'category',
    data: ['Sunny', 'Cloudy', 'Showers'],
    axisLabel: {
        formatter: function (value) {
            return '{' + value + '| }\n{value|' + value + '}';
        },
        margin: 20,
        rich: {
            value: {
                lineHeight: 30,
                align: 'center'
            },
            Sunny: {
                height: 40,
                align: 'center',
                backgroundColor: {
                    image: weatherIcons.Sunny
                }
            },
            Cloudy: {
                height: 40,
                align: 'center',
                backgroundColor: {
                    image: weatherIcons.Cloudy
                }
            },
            Showers: {
                height: 40,
                align: 'center',
                backgroundColor: {
                    image: weatherIcons.Showers
                }
            }
        }
    }
}

Answer 2

google charts has a method --> getChartLayoutInterface

this allows you to get the coordinates of various chart elements

in this case, we get the coordinates of the axis labels,
then overlay an image in its place...

var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();

for (var i = 0; i < data.getNumberOfRows(); i++) {
  var axisLabelBounds = chartLayout.getBoundingBox('hAxis#0#label#' + i);
  var path = 'http://findicons.com/files/icons/512/star_wars/32/';
  var thumb = container.appendChild(document.createElement('img'));
  thumb.src = path + data.getProperty(i, 0, 'thumb');
  thumb.style.position = 'absolute';
  thumb.style.top = (axisLabelBounds.top + containerBounds.top) + 'px';
  thumb.style.left = (axisLabelBounds.left + containerBounds.left - 16) + 'px';
}

set the text color to transparent, so the labels are never seen...

hAxis: {
  textStyle: {
    color: 'transparent'
  }
}

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'X');
  data.addColumn('number', 'Y');
  data.addRows([
    [{v: 'a', p: {thumb: 'clone_old.png'}}, 20],
    [{v: 'b', p: {thumb: 'boba_fett.png'}}, 15],
    [{v: 'c', p: {thumb: 'jango_fett.png'}}, 30],
    [{v: 'd', p: {thumb: 'clone_3.png'}}, 5],
    [{v: 'e', p: {thumb: 'clone_2.png'}}, 25]
  ]);

  var options = {
    legend: 'none',
    hAxis: {
      textStyle: {
        color: 'transparent'
      }
    }
  };

  var container = document.getElementById('chart_div');
  var containerBounds = container.getBoundingClientRect();
  var chart = new google.visualization.ColumnChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();

    for (var i = 0; i < data.getNumberOfRows(); i++) {
      var axisLabelBounds = chartLayout.getBoundingBox('hAxis#0#label#' + i);
      var path = 'http://findicons.com/files/icons/512/star_wars/32/';
      var thumb = container.appendChild(document.createElement('img'));
      thumb.src = path + data.getProperty(i, 0, 'thumb');
      thumb.style.position = 'absolute';
      thumb.style.top = (axisLabelBounds.top + containerBounds.top) + 'px';
      thumb.style.left = (axisLabelBounds.left + containerBounds.left - 16) + 'px';
    }
  });

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>