chartjsでグラフを表示したが、文字と数値が省略表示(一部消える)されてしまう。

htmlのwidthの部分を変えてみたんですが、全体が拡大されてしまいうまくいきません。

上のlabel数は二つ(名前と値)で大丈夫なんですが、

CSV
1名前,値,,
2リンゴ,1,,
3ミカン,2,,
4スイカ,3,,
5なし,4,,
6ぶどう,5,,
7バナナ,6,,
8パイナップル,7,,
9マンゴー,8,,
10ブルーベリー,9,,
11イチゴ,10,,
12モモ,11,,

こんな感じで11個あります。
実行してみると、グラフが小さくなって前半と後半の文字と数値が省略されてしまいます。
下にjsとhtmlを記述します。

Javascript
1// 2) CSVから２次元配列に変換
2function csv2Array(str) {
3  var csvData = [];
4  var lines = str.split("\n");
5  for (var i = 0; i < lines.length; ++i) {
6    var cells = lines[i].split(",");
7    csvData.push(cells);
8  }
9  return csvData;
10}
11
12function drawBarChart(data) {
13	
14  // 3)chart.jsのdataset用の配列を用意
15  var tmpLabels = [], tmpData1 = [], tmpData2 = [];
16  for (var row in data) {
17    tmpLabels.push(data[row][0])
18    	
19    tmpData1.push(data[row][1])
20    tmpData2.push(data[row][2])
21  };
22
23  // 4)chart.jsで描画
24  var ctx = document.getElementById("myChart").getContext("2d");
25  var myChart = new Chart(ctx, {
26    type: 'bar',
27    data: {
28      labels: tmpLabels,
29      datasets: [
30        { label: "名前", data: tmpData1, backgroundColor: "red" },
31        { label: "値", data: tmpData2, backgroundColor: "blue" },
32      ]
33    }
34  });
35}
36
37function main() {
38  // 1) ajaxでCSVファイルをロード
39  var req = new XMLHttpRequest();
40  var filePath = 'csvfile.csv';
41  req.open("GET", filePath, true);
42  req.onload = function() {
43  	  
44    // 2) CSVデータ変換の呼び出し
45    data = csv2Array(req.responseText);
46    
47    // 3) chart.jsデータ準備、4) chart.js描画の呼び出し
48    drawBarChart(data);
49  }
50  req.send(null);
51}
52
53main();

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
6    <script src="csvfile.js"></script>
7
8    <title>chart of results</title>
9</head>
10<body>
11<!--ここにグラフが挿入されます-->
12<div style="width: 100%; height: 100%;">
13    <canvas id="myChart" style="width: 100%; height: 100%;"></canvas>
14</div>
15</body>
16</html>