chart.jsで単位を表示したい

chart.jsを用いて、混合グラフを作成したいのですが、
画像赤文字の部分に単位を表示したいのですが、うまくいきません。
イメージ説明
CSSで無理やり重ねれば近い事はできるのですが、
流用したいのでJavaScriptで指定したいです。

色々調べたのですが、画像のような表示にしかできない状況です。
お手数ですが、対処方法をご教示願いたいです。

数値、変数名等は適当なので気にしないでください。

html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #chart-container {
        height: 500px;
        width: 750px;
      }
    </style>
  </head>
  <body>
    <div id="chart-container">
      <canvas id="my_chart"></canvas>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
    <script>
      (function () {
        "use strict";
        var type = "bar"; // 棒グラフ

        var data = {
          labels: [2010, 2011, 2012, 2013],
          datasets: [
            // 棒グラフ１
            {
              label: "Sales",
              data: [100, 200, 221, 350],
              backgroundColor: "green", //棒の色
              yAxisID: "sales-axes",
            },
            // 棒グラフ２
            {
              label: "Sales",
              data: [100, 200, 221, 350], // 実際のデータ
              backgroundColor: "skyblue", //棒の色
              yAxisID: "sales-axes",
            },
            // 棒グラフ３
            {
              label: "Sales",
              data: [100, 200, 221, 350], // 実際のデータ
              backgroundColor: "red", //棒の色
              borderWidth: 0, // 枠線を消す
              yAxisID: "sales-axes",
            },
            // 折れ線グラフ１
            {
              label: "Subscribers",
              data: [800, 1230, 241, 1790],
              type: "line",
              fill: false,
              yAxisID: "subscribers-axes",
              borderColor: "pink",
            },
            // 折れ線グラフ
            {
              label: "Subscribers",
              data: [80, 1350, 1241, 790],
              type: "line",
              fill: false,
              yAxisID: "subscribers-axes",
              borderColor: "skyblue",
            },
          ],
        };

        var options = {
          scales: {
            // X軸の設定
            xAxes: [
              {
                stacked: true, //積み上げグラフの設定　※必須
                scaleLabel: {
                  display: true,
                  labelString: "(年)",
                },
              },
            ],
            // Y軸の設定
            yAxes: [
              {
                stacked: true, // 積み上げグラフの設定　※必須
                scaleLabel: {
                  display: true,
                  labelString: "(人)",
                },
                ticks: {
                  // 最小値、最大値のベース値を固定。超過した場合、値が変動する
                  suggestedMin: 0,
                  suggestedMax: 400,
                },
                id: "sales-axes",
                type: "linear",
                position: "left",
              },
              {
                ticks: {
                  // 最小値、最大値のベース値を固定。超過した場合、値が変動する
                  suggestedMin: 0,
                  suggestedMax: 2000,
                  stepSize: 500, // 1目盛りのサイズ
                },
                id: "subscribers-axes",
                type: "linear",
                position: "right",
                gridLines: {
                  display: false, // グリッド線を消す
                },
              },
            ],
          },
        };

        // 多分二次元という意味の2d
        var ctx = document.getElementById("my_chart").getContext("2d");
        var myChart = new Chart(ctx, {
          type: type,
          data: data,
          options: options,
        });
      })();
    </script>
  </body>
</html>