chart.jsでY軸の文字の位置の調整をしたい

Question

chart.jsを使用して折れ線グラフを作成しているのですが、optionでY軸にmirrorを設定する事でY軸の表示文字をグラフの内側に表示しています。
内側に表示させる際にY軸の目盛り線に文字が被ってしまうのを避けて、文字を目盛り線の上に表示させたいです。
以下のドキュメントでその他に設定出来そうなoptionを探してみたり、他に実装している人がいないか調べてみたのですが見つかりませんでした。。。
どなたか教えていただけないでしょうか。

参考にしたドキュメント: https://misc.0o0o.org/chartjs-doc-ja/axes/cartesian/
chart.jsバージョン：2.7.3

<div class="contents">
    <canvas id="chart_area"></canvas>
</div>
<script>
const chartData = {
  labels: ["11/20", "11/21", "11/22", "11/23", "11/24",],
  data: ['2000','3500','2900','4000','3100']
};

const loadCharts = function () {
    const chartDataSet = {
        type: 'line',
        data: {
            labels: chartData.labels,
            datasets: [{
                label: 'sample1',
                data: chartData.data,
                backgroundColor: 'rgba(80, 200, 220, 0.2)',
                borderColor: 'rgba(80, 200, 220, 0.9)'
            }]
        },
        options:{
            scales: {
                yAxes: [{
                    ticks: {
                        mirror:true

                    }
                }]
            }
        }
    };

  new Chart('chart_area', chartDataSet);
};

loadCharts();
</script>

↓現在のグラフ画像

Comments

[gh640]

こちらはご解決済みですか？もしまだ解決されていなければ回答させていただこうと思います。

[gh640]

ちなみに、質問文の中で「公式」と書かれている URL は Chart.js の公式ではないの、ではないかと思います。公式のドキュメントは https://www.chartjs.org/docs/ ではありませんか？

[morinagacst]

コメントいただきありがとうございます。公式ドキュメントでは無いのですね、、あくまで日本語訳された非公式のドキュメント？ような感じでしょうか。修正いたします。まだこちらは未解決となっておりますのてご教示いただきたく思いますよ。

[gh640]

ご返信いただきありがとうございます。詳しくはわかりませんが、どなたかが非公式で日本語訳されたページのようですね。回答させていただきましたので、お試しになってみてください。

Answer 1

x_x さんがご回答くださいましたね。

私の環境（ macOS/Chrome ）で動作確認したかぎりでは labelOffset ではなく padding を使うのがよさそうでしたが、まず x_x さんのご回答を参考にされてみてください :)

    const chartDataSet = {
        // ...
        options:{
            scales: {
                yAxes: [{
                    ticks: {
+                        padding: 20,
                        mirror: true
                    }
                }]
            }
        }
    };

  new Chart('chart_area', chartDataSet);

Comments

[morinagacst]

x_xさんの回答で解決が出来ました。
gh640さんも丁寧にご回答いただきありがとうございます。
paddingとゆうオプションも教えていただきありがとうございます。
また何かあったらよろしくお願いいたします。

[gh640]

そうですか。ご丁寧のご報告くださりありがとうございます。よかったです :)

Answer 2

labelOffset で上または下にずらすことができます。

                    ticks: {
                        mirror:true,
                        labelOffset: -4
                    }

https://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration
和訳：https://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration

Comments

[morinagacst]

無事文字位置の調整が出来ました！
ありがとうございます！