C3チャートデータラベルのカスタムアライメント

Question

私のアプリケーションでは、c3チャートを使用して行付きのグループ化棒グラフを実装しました。グループ化された棒グラフを達成するために、私はオーバーレイ線を描き、cssを使ってその線のデータテーブルを隠すために同じ値の棒を使用しています。

しかし、残り2つのデータラベルは中央に整列されていません。この問題を解決するにはどうすればよいですか？

JSFiddle

JSコード：

var chart = c3.generate({ 
    data: { 
     x : 'Year', 
     columns: [ 
      ['Year', '2007', '2008', '2009', '2010','2011','2012','2013','2014','2015','2016'], 
      ['test1', 20, 20, 25, 35, 45, 50, 50,55, 58, 58], 
      ['test2', 80, 81,76, 66, 56, 51, 50, 46, 44, 44], 
      ['Line Data', 20, 20, 25, 35, 45, 50, 50,55, 58, 58] 
     ], 
     groups: [ 
      ['test1', 'test2'] 
     ], 
     type: 'bar', 
     types: { 
      'Line Data': 'line' 
     }, 
     colors: { 
      'test1': '#c0c0c0', 
      'test2': '#d4b012', 
      'Line Data': '#000' 
     } 
    }, 
    axis: { 
     x: { 
      type: 'category' 
     }, 
     y : { 
      tick: { 
       format: function (d) { return d+"%"; } 
      } 
     } 

    }, 
    grid: { 
     y: { 
      show: true 
     } 
    } 
}); 

HTMLコード：

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

CSSコード：

g .c3-legend-item.c3-legend-item-Line-Data,.c3-tooltip-container .c3-tooltip-name--Line-Data { 
    display: none; 
} 

Answer 1

のではなく、CSSとその凡例項目を隠し、使用凡例のC3の設定構文：

... 
grid: { 
    y: { 
     show: true 
    } 
} 
legend: { // add this bit 
    hide: ['Line Data'], 
} 

http://c3js.org/reference.html#legend-show（伝説に隠すには、以下のものですが、そのアンカーリンクが壊れている）