2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Chart.jsのpointRadiusを用いて、グラフの好きな地点だけをポイントとして表示する方法

Last updated at Posted at 2025-08-15

Chart.jsのポイントについて

Chart.jsはグラフチャートに関するJavascriptのライブラリです。
以下のように、グラフの各地点でpointと呼ばれる節を表示できます。

スクリーンショット 2025-08-15 14.51.40.png

このようなグラフは以下のようなコードになっています。

  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'line',
    data: {
  labels: Utils.months({count: DATA_COUNT}),
  datasets: [
    {
      label: 'Dataset 1',
      data: Utils.numbers(NUMBER_CFG),
      fill: false,
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
      borderWidth: 1,

      // ポイントに関する設定
      pointStyle: 'rectRot',
      pointRadius: 5,
      pointBorderColor: 'rgb(0, 0, 0)'
    },
  ]
};,
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

ここでpointRadius0以上の任意の数字を設定することで、0以上の任意の数字の半径のポイントが各地点で表示されます。 任意の数字を大きくすればポイントの丸や四角は大きくなります。

グラフの一番最後の地点だけポイントを表示する方法

グラフの一番最後の地点だけポイントを表示するには、pointRadiusに配列を渡してあげることで実現します。

例えば、X軸の日付の配列が['月', '火', '水', '木', '金']だとすると、pointRadiusに渡す配列は[0, 0, 0, 0, 5]としてあげることで、最後の金曜日の地点だけがポイントとして表示されます。

X軸の日付の配列の要素の数がn個ある場合、以下のような配列を作ってあげれば、X軸の地点の数がいくつであっても最後の点だけがポイントとして表示されることになります。

const dateArray = ['1/1', '1/2', '1/3', ...];

const pointRadiusArray = Array(date.Array.length - 1).fill(0);
pointRadiusArray.push(5);

=> pointRadiusArray === [0, 0, 0, ..., 5]

今回は最後の地点だけを扱いましたが、実際は好きな地点にポイントを表示することが出来ます!
その場合はそのパターンに即した配列を生成するコードを書くことになりますが、完成した配列を変数に入れてpointRadiusに設定してあげればいい点は共通しています!

もし間違っている点や、よりスマートな方法がある場合はコメントで教えていただけると大変嬉しいです!

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?