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

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

data

JavaScript

data: {
  labels:
  datasets: [{
    label: &#039;String&#039; //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: &#039;top&#039; //legendのポジション（&#039;top&#039;, &#039;left&#039;, &#039;bottom&#039;, &#039;right&#039;）
  },
  tooltips: {
    enabled: false, //Tooltipの非表示
  },
  scale: {
    reverse: true //数字を逆向き
  },
  hover: { //ホバーの設定
    mode: &#039;single&#039; //ホバー時の動作（single, label, dataset）
  },
  animation: { //アニメーションの設定
    animateRotate: false //アニメーションの有無
  },
  scales: { //軸の設定
    yAxes: [{ //Y軸の設定
      ticks: { //目盛りの設定
        beginAtZero: true, //開始値を0
        min: 0, //最小値
        max: 1000 //最大値
      },
      scaleLabel: {
        display: true, //Y軸ラベルの表示
        labelString: &#039;String&#039; //ラベル名
      }
    }]
  },
  layout: { //レイアウトの設定
    padding: {
      left: 50,
      right: 0,
      top: 0,
      bottom: 0
    }
  }
}