【c3.js】凡例アイコンを四角から丸に変更する

c3.jsでグラフを描画した時、標準では凡例のアイコンが色つきの四角で表示されます。(■)
そのアイコンを丸(●)で描画する方法は下記です。

本執筆では、c3.jsのバージョン0.4.11で動作を確認しています。
c3.jsのバージョンによって動作が異なる場合がありますのでご了承ください。

c3.jsのL4258~の部分をこのように修正してください。

修正前

l.append('text')
	.text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; })
	.each(function (id, i) { updatePositions(this, id, i); })
	.style("pointer-events", "none")
	.attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendText : -200)
	.attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendText);
l.append('rect')
	.attr("class", CLASS.legendItemEvent)
	.style('fill-opacity', 0)
	.attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendRect : -200)
	.attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendRect);
l.append('line')
	.attr('class', CLASS.legendItemTile)
	.style('stroke', $$.color)
	.style("pointer-events", "none")
	.attr('x1', $$.isLegendRight || $$.isLegendInset ? x1ForLegendTile : -200)
	.attr('y1', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendTile)
	.attr('x2', $$.isLegendRight || $$.isLegendInset ? x2ForLegendTile : -200)
	.attr('y2', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendTile)
	.attr('stroke-width', config.legend_item_tile_height);

修正後

l.append('text')
            .text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; })
            .each(function (id, i) { updatePositions(this, id, i); })
            .style("pointer-events", "none")
            .attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendText : -200)
            .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendText);
        l.append('rect')
            .attr("class", CLASS.legendItemEvent)
            .style('fill-opacity', 0)
            .attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendRect : -200)
            .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendRect);
        l.append('rect')
            .attr('class', CLASS.legendItemTile)
            .style("pointer-events", "none")
            .style('fill', $$.color)
            .attr('x', xForLegendRect2)
            .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegend)
            .attr('width', 10)
            .attr('height', 10)
            .attr('rx', 10)
            .attr('ry', 10);

修正後は、X軸の位置がxForLegendRect2で定義されるようになります。
その為、X軸の位置を決める関数xForLegendRect2を追加しましょう。
c3.jsのL4216に下記関数を定義します

 xForLegendRect2 = function (id, i) { return xForLegend(id, i) - 10; };

• 10しているのは、アイコン名から左に10移動した位置にアイコンを表示する為です。

この数値や関数はカスタマイズして使ってください。

最後に、c3.cssのL15の下記の部分を修正します

.c3-legend
-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
  shape-rendering: inherit; }

以上で、凡例アイコンを丸にする事ができました。

サンプルとしてfiddleでソースを公開しています。
jsfiddle.net