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

chart.jsを用いて、混合グラフを作成したいのですが、
画像赤文字の部分に単位を表示したいのですが、うまくいきません。

CSSで無理やり重ねれば近い事はできるのですが、
流用したいのでJavaScriptで指定したいです。

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

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

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Document</title>
8    <style>
9      #chart-container {
10        height: 500px;
11        width: 750px;
12      }
13    </style>
14  </head>
15  <body>
16    <div id="chart-container">
17      <canvas id="my_chart"></canvas>
18    </div>
19    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
20    <script>
21      (function () {
22        "use strict";
23        var type = "bar"; // 棒グラフ
24
25        var data = {
26          labels: [2010, 2011, 2012, 2013],
27          datasets: [
28            // 棒グラフ１
29            {
30              label: "Sales",
31              data: [100, 200, 221, 350],
32              backgroundColor: "green", //棒の色
33              yAxisID: "sales-axes",
34            },
35            // 棒グラフ２
36            {
37              label: "Sales",
38              data: [100, 200, 221, 350], // 実際のデータ
39              backgroundColor: "skyblue", //棒の色
40              yAxisID: "sales-axes",
41            },
42            // 棒グラフ３
43            {
44              label: "Sales",
45              data: [100, 200, 221, 350], // 実際のデータ
46              backgroundColor: "red", //棒の色
47              borderWidth: 0, // 枠線を消す
48              yAxisID: "sales-axes",
49            },
50            // 折れ線グラフ１
51            {
52              label: "Subscribers",
53              data: [800, 1230, 241, 1790],
54              type: "line",
55              fill: false,
56              yAxisID: "subscribers-axes",
57              borderColor: "pink",
58            },
59            // 折れ線グラフ
60            {
61              label: "Subscribers",
62              data: [80, 1350, 1241, 790],
63              type: "line",
64              fill: false,
65              yAxisID: "subscribers-axes",
66              borderColor: "skyblue",
67            },
68          ],
69        };
70
71        var options = {
72          scales: {
73            // X軸の設定
74            xAxes: [
75              {
76                stacked: true, //積み上げグラフの設定　※必須
77                scaleLabel: {
78                  display: true,
79                  labelString: "(年)",
80                },
81              },
82            ],
83            // Y軸の設定
84            yAxes: [
85              {
86                stacked: true, // 積み上げグラフの設定　※必須
87                scaleLabel: {
88                  display: true,
89                  labelString: "(人)",
90                },
91                ticks: {
92                  // 最小値、最大値のベース値を固定。超過した場合、値が変動する
93                  suggestedMin: 0,
94                  suggestedMax: 400,
95                },
96                id: "sales-axes",
97                type: "linear",
98                position: "left",
99              },
100              {
101                ticks: {
102                  // 最小値、最大値のベース値を固定。超過した場合、値が変動する
103                  suggestedMin: 0,
104                  suggestedMax: 2000,
105                  stepSize: 500, // 1目盛りのサイズ
106                },
107                id: "subscribers-axes",
108                type: "linear",
109                position: "right",
110                gridLines: {
111                  display: false, // グリッド線を消す
112                },
113              },
114            ],
115          },
116        };
117
118        // 多分二次元という意味の2d
119        var ctx = document.getElementById("my_chart").getContext("2d");
120        var myChart = new Chart(ctx, {
121          type: type,
122          data: data,
123          options: options,
124        });
125      })();
126    </script>
127  </body>
128</html>
129

行動規範の内容に同意します

回答1件

ベストアンサー

stackoverflowでよく似た質問があったので、参考にためしてみました。
https://stackoverflow.com/questions/47312375/chartjs-scalelabel-position

new Chart()の引数に下記のようにpluginsを書く方式です。

js
1       var myChart = new Chart(ctx, {
2         type: type,
3         data: data,
4         options: options,
5	 plugins:[{
6	   afterDraw: chart => {
7             var ctx = chart.chart.ctx;
8             ctx.save();
9             ctx.font = "bold 14px Arial";
10             ctx.fillStyle = "black";
11             var y = 20;
12
13             ctx.textAlign = 'left';
14             ctx.fillText('(人)', 30, y);
15
16             ctx.textAlign = 'right';
17             ctx.fillText('(年)', chart.chart.width - 10, 350);
18             ctx.restore();
19	   }
20	 }],
21     })
22