c3グラフは、クロムとサファリブラウザで他のグラフとライニングされていません

Question

この例ではわかるように、https://jsfiddle.net/juanX/atw3edu0/6/i私は2つのグラフを持っていますが、互いにライニングされていません。私はクロームバージョン51.0.2704.84を使用しています。 Firefoxのブラウザで問題なく動作しています。私はいくつかの動的グラフを使用しようとしているので、CSSでこれを行うことはできません。

これをChromeとSafariでどのように使用するにはどうすればよいですか？

var chart = c3.generate({ 
     bindto: '#chart', 
    data: { 
     columns: [ 
      ['data1', 1,52,65,89,200,566,774,200,566,300,700,123,654,852,159,321,756,821,654,123,951,753,926,45,126,345,821,821,921,13], 
     ], 
     types: { 
      data2: 'spline' 
     } 
    }, 
    axis: { 
     y: { 
      padding: {bottom: 0}, 
      min: 0 
     }, 
     x: { 
      padding: {left: 0}, 
      min: 0, 
      show: false 
     } 
    } 

}); 

var chart = c3.generate({ 
     bindto: '#chart2', 
    data: { 
     columns: [ 
      ['data1', 300, 350, 300, 100, 80, 50], 
     ], 
     types: { 
      data1: 'spline', 
     } 
    }, 
    axis: { 
     y: { 
      padding: {bottom: 0}, 
      min: 0 
     }, 
     x: { 
      padding: {left: 0}, 
      min: 0, 
      show: false 
     } 
    } 

}); 

Answer 1

スケールのうちの1つが1,000になるため、c3ではデフォルトでラベルの横幅が広がります。

これは固定が必要なパディングだと思われていますが、c3.generate構文の最上位にパディング設定が必要です。 （X軸のパディングが右軸ない左の、およびXデータ規模に比例し、しないピクセルにスペースを与えると思われる）

https://jsfiddle.net/atw3edu0/9/

のでchart2ため（及びchart1の場合も同様です。

c3.generate({ 
     bindto: '#chart2', 
    data: { 
     columns: [ 
      ['data1', 300, 350, 300, 100, 80, 50], 
     ], 
     types: { 
      data1: 'spline', 
     } 
    }, 
    axis: { 
     y: { 
      padding: {bottom: 0}, 
      min: 0 
     }, 
     x: { 
      padding: {left: 0}, 
      min: 0, 
      show: false 
     } 
    }, 
    /* THIS BIT */ 
    padding: { 
     left: 50 // set same value for for both charts 
    } 
});