1. ホーム
  2. javascript

[解決済み】Chart.js v2 - グリッド線を隠す

2022-04-15 19:01:30

質問

Chart.js v2を使って、簡単な折れ線グラフを描いています。すべてがうまくいっているように見えますが、いらないグリッド線があるのが残念です。

Line Chartのドキュメントはこちらです。 https://nnnick.github.io/Chart.js/docs-v2/#line-chart しかし、これらのグリッド線を非表示にする方法が見当たりません。

グリッド線を消すにはどうしたらいいですか?

解決方法は?

折れ線グラフのグリッド線を非表示にする方法を発見しました。

を設定します。 gridLines の色を、divの背景色と同じにします。

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }],
        yAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }   
        }]
    }
}

または

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                display:false
            }
        }],
        yAxes: [{
            gridLines: {
                display:false
            }   
        }]
    }
}