Chart.js積み重ねを取り除く

Question

積み上げ棒グラフと2つの折れ線グラフがあります。 2番目の折れ線グラフは最初の折れ線グラフの上に積み重ねられていますが、私はこの振る舞いを望んでいません。

私が試みたのは、明示的にスタックモードをfalseに設定することですが、このオプションは実行されません。

  ... 
      type: 'line', 
      label: 'lineChart1', 
      data: lineData1, 
      borderWidth: 1, 
      fill: false, 
      options: { 
       legend: { 
       display: false 
       }, 
       scales: { 
        xAxes: [{ 
         stacked: false, 
        }], 
        yAxes: [{ 
         stacked: false 
        }] 
       } 
      } 
     } 
     ... 

Answer 1

ここでは、2つの積み重なった棒と2つの積み重なった線でチャートを構成する例を示します。私はあなたの棒グラフに積み重なっている理由は、バーにstackedオプションを設定してスタックIDを与えなかったためです。ここで

var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [{ 
     type: 'line', 
     label: 'Dataset 1', 
     borderColor: window.chartColors.green, 
     borderWidth: 2, 
     fill: false, 
     data: [5, 3, 4, 10, 8, 9, 2] 
    }, { 
     type: 'line', 
     label: 'Dataset 2', 
     borderColor: window.chartColors.orange, 
     borderWidth: 2, 
     fill: false, 
     data: [8, 5, 2, 8, 7, 2, 6] 
    }, { 
     type: 'bar', 
     label: 'Dataset 3', 
     backgroundColor: window.chartColors.red, 
     stack: 'Stack 0', 
     data: [2, 4, 1, 3, 7, 3, 6], 
     borderColor: 'white', 
     borderWidth: 2 
    }, { 
     type: 'bar', 
     label: 'Dataset 4', 
     backgroundColor: window.chartColors.blue, 
     stack: 'Stack 0', 
     data: [7, 2, 4, 5, 6, 4, 2] 
    }] 
    }, 
    options: { 
    responsive: true, 
    title: { 
     display: true, 
     text: 'Chart.js Stacked Bar and Unstacked Line Combo Chart' 
    }, 
    tooltips: { 
     mode: 'index', 
     intersect: true 
    }, 
    scales: { 
     xAxes: [{ 
     stacked: true, 
     }] 
    } 
    } 
}); 

は、それがどのように見えるかを示していcodepen exampleです。