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">
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.6"></script>
<script src='http://mbostock.github.com/d3/d3.layout.js?2.4.6' type='text/javascript'></script>

<div id="chart"></div>

CSS

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

JavaScript

/* ~~~ compare line 115 ~~~ */

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;
           ...