c3js

Trying to get icon tiles

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.3/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.3/c3.css">
<div id="chart"></div>

CSS

.c3-chart-text .c3-text {
  font-family: 'FontAwesome';
}

.c3-legend-item-tile::before {
  font-family: 'FontAwesome';
  content: '\uf080'!important;
  font-weight: 900!important;
  margin: 0 5px 0 -15px!important;
}

JavaScript

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, -200, -100, 400, 150, 250],
            ['data2', -50, 150, -150, 150, -50, -150],
            ['data3', -100, 100, -40, 100, -150, -50]
        ],
   
        type: 'bar',
        labels: {
//            format: function (v, id, i, j) { return "Default Format"; },
            format: {
                data1: function (v, id, i, j) { return "\uf080"; },
                data2: function (v, id, i, j) { return "\uf080"; },
                data3: function (v, id, i, j) { return "\uf080"; },
            }
        }
    },
    grid: {
        y: {
            lines: [{value: 0}]
        }
    },
    onrendered: function () {
    	d3.selectAll(".c3-legend-item-tile")
      		.attr("mask", "url(#iconMask)")
          .each (function (d,i) {
          		var d3this = d3.select(this);
              d3this.attr("y2", +d3this.attr("y1") + 10);
          })
          
          ;
    }
});


d3.select("svg defs").append("mask")
	.attr("id", "iconMask")
	.attr("x", 0)
  .attr("y", 0)
  .attr("width", 1)
  .attr("height", 1)
  .attr("maskContentUnits", "objectBoundingBox")
  .append("rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", 1)
  .attr("height", 1)
  .style("fill", "url(#iconPattern)")
;

d3.select("svg defs").append("pattern")
	.attr("id", "iconPattern")
	.attr("x", 0)
  .attr("y", 0)
  .attr("width", 1)
  .attr("height", 1)
  .style("fill", "#fff")
  .attr("patternContentUnits", "objectBoundingBox")
  .append("text")
  .attr("x", "0.2em")
  .attr("dy", "0.7em")
  .attr("font-size", 0.8)
  .attr ("font-family", "FontAwesome")
  .text("\uf080")
;