はじめに

今回ポートフォリを制作するにあたってChart.jsを使用し折れ線グラフを表示させました。
その中で折れ線グラフの縦軸を反対にしました。
あまり需要がないのか、実際に記事にされているものが無かったため公式を調べ実装を行いました。
この知識が誰かの役に立てば幸いと思い記事を書かせてもらいます。

今回記述するグラフについて

修正前

line_graph.html.erb

document.addEventListener('turbolinks:load', function() {
  var ctx = document.getElementById('line_graph');
  var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['1回前', '2回前', '3回前', '4回前', '5回前', '6回前', '7回前', '8回前', '9回前', '10回前'],
        datasets: [{
          label: '順位',
          data: <%= user.limit(10).pluck(:rank) %>,
          borderColor: 'rgba(0, 128, 0, 1)',
          lineTension: 0,
          fill: false,
          borderWidth: 3
        }]
      },
      options: {
        // animation: false// アニメーションOFF
        scales: {
          yAxes: {
              ticks: {
                  stepSize: 1,
              }
          }
        }
      }
  });
});

少しグラフについて説明させてください。
直近１０回でのゲームでの順位を表示するグラフです。
なので１０回戦まで表示出来るようにしてあります。
options内のanimationをコメントアウトしてあります。ここのコメントを外すことで、アニメーションをカットしてロードを少し早く出来ます。
このコードで記述されるグラフがこちらです。

Y軸に順位が表示されるのですが、4位が上になってるのが気持ち悪いな〜っといった感じです。

修正

optionsのscales内にreverse: trueを記述してあげます。

line_graph.html.erb

document.addEventListener('turbolinks:load', function() {
  var ctx = document.getElementById('line_graph');
  var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['1回前', '2回前', '3回前', '4回前', '5回前', '6回前', '7回前', '8回前', '9回前', '10回前'],
        datasets: [{
          label: '順位',
          data: <%= user.limit(10).pluck(:rank) %>,
          borderColor: 'rgba(0, 128, 0, 1)',
          lineTension: 0,
          fill: false,
          borderWidth: 3
        }]
      },
      options: {
        // animation: false// アニメーションOFF
        scales: {
          yAxes: {
              ticks: {
                  stepSize: 1,
              }
              reverse: true
          }
        }
      }
  });
});

このコードで表示されるグラフがこちらです。

Y軸が反対で表示されるようになりました。
以上です。
もしこの記事が誰かの役に立てたなら幸いです。