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 will need chart like below just images in axis.

I am not sure it is possible or not with any of above library.

If anyone has any ideas then please let me know.

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>