Chart.js 2.0 radarChart Canvasの余白を調整したい

###前提・実現したいこと
Chart.js 2.0でradar Chartを実装しました。
以下オレンジ矢印の通りグラフ上部にはあまり余白ができませんが
グラフ下部に余分な余白が生成されてしまいます。

基本的には上下左右の余白をゼロにしたいと考えています。
（Responsive＝Trueです）

マニュアル上ではこの点についての記述を見つけられず
方法をご教示いただければ幸いです。

###該当のソースコード

JavaScript
1<table width=300><tr><td><div align="center">
2==========================
3<div class="chart_container" ><canvas id="myChartR_A"></canvas></div>
4==========================
5</div></td></tr></table>
6<script>
7var canvasR = document.getElementById("myChartR_A");
8ctxR = canvasR.getContext("2d");
9  var myChartR = new Chart(ctxR, {
10  type: 'radar',
11  data: {
12    labels: ["","",""],
13    datasets: [
14        {
15            backgroundColor: "rgba(100,100,0,0.2)",
16						pointStyle: "crossRot",
17            borderColor: "rgba(100,100,0,1)",
18            pointBackgroundColor: "rgba(100,100,0,1)",
19            pointBorderColor: "#ff0",
20            pointHoverBackgroundColor: "#ff0",
21            pointHoverBorderColor: "rgba(100,100,0,1)",
22            data: [10,3,2]
23        }
24    ]
25  },
26  options: {
27 		tooltips: {
28      enabled: false
29      },
30    legend: {
31      display: false
32      },
33    scale: {
34			pointLabels: {
35	      display: false,
36        fontSize: 0
37      },
38			gridLines: {
39				drawTicks: false
40			},
41      ticks: {
42				display: false,
43        stepSize: 1,
44        max: 10,
45        beginAtZero: true
46      }
47    }
48  }
49});
50</script>

###試したこと
LabelのFontSize=0にするなど余白を取る可能性のあるパラメータを変更してみました。

行動規範の内容に同意します

回答1件

ベストアンサー

Chart.jsの3項目のレーダーチャートは収まりが悪いので、気になる場合は次のコードを使います。

https://stackoverflow.com/questions/36730861/chart-js-v2-remove-padding-margin-from-radar-chart
より対策コード。

js
1...
2options: {
3    scale: {
4        beforeFit: function (scale) {
5            if (scale.chart.config.data.labels.length === 3) {
6                var pointLabelFontSize = Chart.helpers.getValueOrDefault(scale.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
7                scale.height *= (2 / 1.5)
8                scale.height -= pointLabelFontSize;
9            }
10        },
11        afterFit: function (scale) {
12            if (scale.chart.config.data.labels.length === 3) {
13                var pointLabelFontSize = Chart.helpers.getValueOrDefault(scale.options.pointLabels.fontSize, Chart.defaults.global.defaultFontSize);
14                scale.height += pointLabelFontSize;
15                scale.height /= (2 / 1.5);
16            }
17        },
18            ...