c3js

Trying to get icon tiles

by SharonM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<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">
<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}]
        }
    }
});