Chartjs：ティックとスケールラベルの間にパディングを作成する方法

Question

chartjs-nodeを使用してグラフを作成しています.Y軸にラベルを使用しています。

私の問題は、Y軸ティックとラベルの間の距離が最小であり、見栄えが悪いということです。私は文書を見てきましたが、このシナリオに役立つものは何も見つかりませんでした... オプション - >スケール - > yAxes - >ティック - >パディングのオプションがありますが、 。

現在、私はオプションの下での回避策がある - 私は手動でスペースを挿入>コールバック>スケール - > yAxes - - >ダニ： callback: (val) => ` ${val}%`

これは動作しますが、明らかに正しい使用方法ではない、と私は信じているがスケールが線形である場合、このアプローチは、リニアスケールで利用可能な機能のいくつかを使用することを妨げるでしょう。

もっときれいな方法で、ティックとラベルの間の分離をどのように作成することができますか？

Answer 1

このy軸のafterFitコールバック関数を使用して達成することができる。

scales: { 
    yAxes: [{ 
     afterFit: function(scale) { 
     scale.width = 80 //<-- set value as you wish 
     }, 
     ... 
    }] 
} 

ɪɴᴀᴄᴛɪᴏɴ

var chart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     labels: ['Jan', 'Feb', 'Mar'], 
 
     datasets: [{ 
 
     label: 'LINE', 
 
     data: [3, 2, 4], 
 
     backgroundColor: 'rgba(0, 119, 290, 0.2)', 
 
     borderColor: 'rgba(0, 119, 290, 0.6)' 
 
     }] 
 
    }, 
 
    options: { 
 
     responsive: false, 
 
     scales: { 
 
     yAxes: [{ 
 
      afterFit: function(scale) { 
 
       scale.width = 80 //<-- set value as you wish 
 
      }, 
 
      scaleLabel: { 
 
       display: true, 
 
       labelString: 'y-axis label', 
 
      } 
 
     }] 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="ctx" height="180"></canvas>