chart.jsを使った重ね棒グラフの色が別れないバグ？について

2017年お疲れ様です。

imputフォームから値を取得してそれをchart.jsで重ね棒グラフ化しようとしたのですが、なぜか要素が三つ以上になると、グラフ上だけ色が二個目の要素とそれ以降の要素とで同じ色となってしまいます。（要素の数にかかわらず二色にみえてしまう）

一瞬だけ3個目の要素の色が見える事からアニメーションが悪さしているきもしますが、なぜこうなるのかさっぱりわかりません。

chart.jsのバグでしょうか？

二個目も三個目も正しく値は取得しているようなので、さらに意味不明になってしまいました。
大晦日に申し訳ございません、どなたかわかる方いらっしゃいますでしょうか？

回答に関係なくこの質問を見た方の2018年が素敵な年になる事を祈っております。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5</head>
6<header>
7  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
8</header>
9<body>
10
11  <canvas id="myChart"></canvas>
12
13  <form>
14    <div>
15      <label for="textForm1">要素１: </label>
16      <input type="number" id="textForm1" value=3>
17    </div>
18    <div>
19      <label for="textForm2">要素２: </label>
20      <input type="number" id="textForm2" value=2>
21    </div>
22    <div>
23      <label for="textForm3">要素３: </label>
24      <input type="number" id="textForm3" value=5>
25    </div>
26    <div>
27      <label for="textForm4">要素４: </label>
28      <input type="number" id="textForm4" value=2>
29    </div>
30
31
32    <input type="button" id="button" value="グラフ化">
33  </form>
34
35
36
37
38  <script src="test.js"></script>
39</body>
40</html>
41

javascript
1var type = "bar";
2var array_1 =  [];
3var array_2 = [];
4var array_3 = [];
5var array_4 = [];
6var array_5 = [];
7
8var button = document.getElementById("button");
9for(i=0;i<3;i++){
10  array_1.push(i);
11}
12
13button.addEventListener("click", function(e) {
14  var ctx = document.getElementById('myChart').getContext('2d');
15
16  // フォームの値を取得
17  var textForm1 = document.getElementById("textForm1").value;
18  var textForm2 = document.getElementById("textForm2").value;
19  var textForm3 = document.getElementById("textForm3").value;
20  var textForm4 = document.getElementById("textForm4").value;
21
22  array_2[0] = textForm1;
23  array_3[0] = textForm2;
24  array_4[0] = textForm3;
25  array_5[0] = textForm4;
26
27  console.log(array_2[0]);
28  console.log(array_3[0]);
29  console.log(array_4[0]);
30  console.log(array_5[0]);
31
32  var myChart = new Chart(ctx, {
33    type: type,
34    data: {
35      labels:array_1,
36      datasets: [{
37        label: '要素１',
38        data: array_2,
39        backgroundColor: "rgba(153,235,51,0.4)"
40      }, {
41        label: '要素２',
42        data: array_3,
43        backgroundColor: "rgba(255,153,32,0.4)"
44      }, {
45        label: '要素３',
46        data: array_4,
47        backgroundColor: "rgba(205,53,100,0.4)"
48      }, {
49        label: '要素４',
50        data: array_5,
51        backgroundColor: "rgba(55,3,100,0.4)"
52      }]
53    },
54    options: {
55      title: {
56        display: true,
57        text: 'タイトル', //グラフの見出し
58        padding:3
59      },
60      scales: {
61        xAxes: [{
62          stacked: true, //積み上げ棒グラフにする設定
63          categoryPercentage:0.4 //棒グラフの太さ
64        }],
65        yAxes: [{
66          stacked: true //積み上げ棒グラフにする設定
67        }]
68      },
69      legend: {
70        labels: {
71          boxWidth:30,
72          padding:20 //凡例の各要素間の距離
73        },
74        display: true
75      },
76      tooltips:{
77        mode:'label' //マウスオーバー時に表示されるtooltip
78      }
79    }
80  });
81});
82