【Chart.js】dataとoptionsパラメータのまとめ

Chart.jsにはたくさんのパラメータがあります。
なかなか覚えられないので、data と optionをまとめてみました。
随時更新していく予定です。

data

JavaScript
data: {
  labels:
  datasets: [{
    label: 'String' //legend
    data: array //グラフのデータ
    backgroundColor: //背景色
    hoverBackgroundColor: //背景色(ホバー)
    borderColor:
    borderWidth: 1, //枠線の太さ
    hoverBorderColor: //枠線の色(ホバー)
    pointBackgroundColor: //結合点の背景色
    pointBorderColor: //結合点の枠線の色
    pointHoverBackgroundColor: //結合点の背景色(ホバー)
    pointHoverBorderColor: //結合点の枠線の色(ホバー)
    pointRadius: 0, //結合点のサイズ
    pointHoverRadius: 4, //結合点のサイズ(ホバー)
    pointHitRadius: 15, //結合点より外でマウスホバーを認識する範囲(ピクセル単位)
    lineTention: 0, //lineグラフ線のカーブ
    fill: false, //面の非表示
  }]
}

 

Options

JavaScript
options: {
  responsive: true,
  legend: {
    display: false, //legendの非表示
    position: 'top' //legendのポジション('top', 'left', 'bottom', 'right')
  },
  tooltips: {
    enabled: false, //Tooltipの非表示
  },
  scale: {
    reverse: true //数字を逆向き
  },
  hover: { //ホバーの設定
    mode: 'single' //ホバー時の動作(single, label, dataset)
  },
  animation: { //アニメーションの設定
    animateRotate: false //アニメーションの有無
  },
  scales: { //軸の設定
    yAxes: [{ //Y軸の設定
      ticks: { //目盛りの設定
        beginAtZero: true, //開始値を0
        min: 0, //最小値
        max: 1000 //最大値
      },
      scaleLabel: {
        display: true, //Y軸ラベルの表示
        labelString: 'String' //ラベル名
      }
    }]
  },
  layout: { //レイアウトの設定
    padding: {
      left: 50,
      right: 0,
      top: 0,
      bottom: 0
    }
  }
}