FancyGrid HBar Stacked

by Suman Kumar

HTML

<script src="https://cdn.fancygrid.com/fancy.min.js"></script>

<div id="container" style="margin-top: 10px;margin-left:10px;"></div>

CSS

.fancy-spark-hbar.fancy-spark-stacked {
  margin-top: 4px;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  Fancy.COLORS = ['#0078B2', '#003D58', '#00ACDD'];

  new FancyGrid({
    renderTo: 'container',
    title: 'Measuring emerging-market vulnerability',
    subTitle: {
      text: 'Emerging-market vulnerability to a sudden stop in capital inflows',
      style: {
        color: '#6A7989',
        'font-size': '11px',
        'font-weight': '400'
      }
    },
    width: 600,
    height: 900,
    data: data,
    trackOver: true,
    selModel: 'row',
    cellHeight: 28,
    footer: {
      status: '   ',
      source: {
        sourceText: 'Inspired by',
        text: 'Economist Daily Chart',
        link: 'http://www.economist.com/blogs/graphicdetail/2015/09/capital-freeze-index'
      }
    },
    defaults: {    
      width: 100,
      sortable: true,
      resizable: true
    },
    columns: [{
      index: 'country',
      type: 'string',
      width: 80,
      cellAlign: 'right',
      title: 'Countries'
    },{
      index: ['0','1','2'],
      type: 'hbar',
      width: 400,
      sortable: false,
      title: '',
      sparkConfig: {
        tipTpl: '{value}',
        stacked: true,
        tipFormat: function(o){
          var data = o.data;
          
          return [
            'Overall ranking: ' + (data[0] + data[1] + data[2]) + '<br>',
            'Current-account balance: ' + data[0]+ '<br>',
            'Private-sector credit: ' + data[1]+ '<br>',
            'Foreign debt: ' + data[2]
          ].join("");
        },
        title: ['Balance', 'Credit', 'Foreign debt'],
        legend: {
          type: 'tbar',        
          style: {}
        }
      }
    }]
  });
});

var data = [
  {country: 'Venezuela', 0: 28, 1: 100, 2: 100},
  {country: 'Turkey', 0: 78, 1: 80, 2: 61},
  {country: 'Ukraine', 0: 70, 1: 0, 2: 100},
  {country: 'Indonesia', 0: 65, 1: 67, 2: 28},
  {country: 'Algeria', 0: 72, 1: 65, 2: 0},
  {country: 'Mexico', 0: 60, 1: 46, 2: 27},
  {country: 'Colombia', 0: 75,...