c3 custom legend

c3 custom legend

by nimishgoel056

HTML

<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/c3/0.4.10/c3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div class="box">
  <div id="chart"></div>
  <div class="container"></div>
  
</div>
<div class="container2"></div>

CSS

#chart,
.container {
  float: left;
}

.legend span {
  display: inline-block;
  margin-left: 7px;
  margin-right: 7px;
  padding: 5px;
}
.container .legned div {
  width: 100%;
}
.container .legend {
  width: 150px;
  height: 230px;
  overflow: scroll;
}

JavaScript

var chart = c3.generate({
  size: {
    width: 200,
    height: 240,
  },
  data: {
    columns: [
      ['data1', 100],
      ['data2', 300],
      ['data3', 200],
      ['data11', 100],
      ['data21', 300],
      ['data31', 200],
      ['data12', 100],
      ['data22', 300],
      ['data32', 200],
      ['data13', 100],
      ['data23', 300],
      ['data33', 200],
      ['data41', 100],
      ['data42', 300],
      ['あいうえおかきくけこさしすそたちつてと', 200],
    ],
    type: 'pie'
  },
  legend: {
    show: false
  }
});

function toggle(id) {
  chart.toggle(id);
}


  
  // example2
d3.select('.container2').insert('div', '.chart').attr('class', 'legend').selectAll('div')
  .data(['data1', 'data2', 'data3', 'data11', 'data21', 'data31', 'data12', 'data22', 'data32', 'data13', 'data23', 'data33', 'data41', 'data42', 'あいうえおか'])
  .enter().append('div')
  .attr('data-id', function(id) {
    return id;
  })
  .html(function(id) {
    return '<span></span>'+id;
  })
  .each(function(id) {
    //d3.select(this).append('span').style
    d3.select(this).select('span').style('background-color', chart.color(id));
  })
  .on('mouseover', function(id) {
    chart.focus(id);
  })
  .on('mouseout', function(id) {
    chart.revert();
  })
  .on('click', function(id) {
  $(this).toggleClass("c3-legend-item-hidden")
    chart.toggle(id);
  });