c3 - legend as circle example

example for usage of new c3 overriding method

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<div id="chart"></div>

CSS

.c3-legend-item-tile {
  shape-rendering: initial;
}

JavaScript

c3.chart.internal.fn.additionalConfig = {
  legend_radius: 5
};

c3.chart.internal.fn.updateLegend = function(targetIds, options, transitions) {
  var $$ = this,
    config = $$.config,
    base = this.__proto__,
    CLASS = base.CLASS;

  var xForLegend, xForLegendText, xForLegendRect, yForLegend, yForLegendText, yForLegendRect;
  var paddingTop = 4,
    paddingRight = 36,
    maxWidth = 0,
    maxHeight = 0,
    posMin = 10;
  var l, totalLength = 0,
    offsets = {},
    widths = {},
    heights = {},
    margins = [0],
    steps = {},
    step = 0;
  var withTransition, withTransitionForTransform;
  var hasFocused = $$.legend.selectAll('.' + CLASS.legendItemFocused).size();
  var texts, rects, tiles;

  options = options || {};
  withTransition = base.getOption(options, "withTransition", true);
  withTransitionForTransform = base.getOption(options, "withTransitionForTransform", true);

  function updatePositions(textElement, id, reset) {
    var box = $$.getTextRect(textElement.textContent, CLASS.legendItem),
      itemWidth = Math.ceil((box.width + paddingRight) / 10) * 10,
      itemHeight = Math.ceil((box.height + paddingTop) / 10) * 10,
      itemLength = $$.isLegendRight || $$.isLegendInset ? itemHeight : itemWidth,
      areaLength = $$.isLegendRight || $$.isLegendInset ? $$.getLegendHeight() : $$.getLegendWidth(),
      margin, maxLength;

    // MEMO: care about condifion of step, totalLength
    function updateValues(id, withoutStep) {
      if (!withoutStep) {
        margin = (areaLength - totalLength - itemLength) / 2;
        if (margin < posMin) {
          margin = (areaLength - itemLength) / 2;
          totalLength = 0;
          step++;
        }
      }
      steps[id] = step;
      margins[step] = $$.isLegendInset ? 10 : margin;
      offsets[id] = totalLength;
      totalLength += itemLength;
    }

    if (reset) {
      totalLength = 0;
      step = 0;
      maxWidth = 0;
      maxHeight = 0;
    }

    if (config.legend_show &&...