C3JS Custom Legend

c3js-custom-legend.markdown

C3JS Custom Legend

A Pen by Lucus Crawford on CodePen.

License.

index.html

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading">
          Test
        </div>
        <div class="panel-body">
          <div class="col-md-10">
          <div id="chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

script.js

var chart = c3.generate({
  data: {
    columns: [
      ['data1', 100],
      ['data2', 300],
      ['data3', 200],
      ['data4', 100],
      ['data5', 300],
      ['data6', 200]
    ],
    type: 'pie'
  },
  legend: {
    show: false
  },
  tooltip: {
    format: {
      value: function(value, ratio) {
        var percentFormat = d3.format('.1%');
        var twoDecimal = d3.format('.2f');
        return '<ul class="list-inline">' +
          '<li><span class="badge">' + percentFormat(ratio) + '</span></li>' +
          '<li><span class="badge">' + twoDecimal(value) + '</span></li>' +
          '<ul>';
      }
    }
  },
});

d3.select('.panel-body').insert('div', ':first-child')
  .attr('class', 'legend col-md-2')
  .insert('ul').attr('class', 'list-group')
  .selectAll('span')
  .data(['data1', 'data2', 'data3', 'data4', 'data5', 'data6','data7', 'data8', 'data9', 'data10', 'data11', 'data12'])
  .enter().append('li').attr('class', 'list-group-item')
  .append('div').attr('class', 'legend-label')
  .attr('data-id', function(id) {
    return id;
  })
  .append('div', '.legend-label')
  .html(function(id) {
    var data = chart.data(id);
    return id + '&nbsp&nbsp&nbsp';
  })
  .on('mouseover', function(id) {
    chart.focus(id);
  })
  .on('mouseout', function(id) {
    chart.revert();
  })
  .insert('span', '.legend-label').attr('class', 'badge')
  .each(function(id) {
    d3.select(this).style('background-color', chart.color(id));
  })
  .html(function(id){
    return '&nbsp&nbsp&nbsp&nbsp&nbsp'
});

chart.resize({width:400, height:400})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

li.list-group-item { border: 0 none; }

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />