# Data Labels

chartjs-plugin-datalabels (opens new window) との連携

const config = {
  type: 'line',
  data: data,
  options: {
    scales: {
      x: {
        type: 'realtime',
        realtime: {
          duration: 20000,
          refresh: 1000,
          delay: 2000,
          onRefresh: onRefresh
        }
      },
      y: {
        title: {
          display: true,
          text: '値'
        }
      }
    },
    interaction: {
      intersect: false
    },
    plugins: {
      datalabels: {
        backgroundColor: context => context.dataset.borderColor,
        padding: 4,
        borderRadius: 4,
        clip: true,
        color: 'white',
        font: {
          weight: 'bold'
        },
        formatter: value => value.y
      }
    }
  }
};

プレーンな JavaScript の場合、script タグを以下の順序で指定します。

<script src="path/to/chartjs/dist/chart.min.js"></script>
<script src="path/to/luxon/dist/luxon.min.js"></script>
<script src="path/to/chartjs-adapter-luxon/dist/chartjs-adapter-luxon.min.js"></script>
<script src="path/to/chartjs-plugin-annotation/dist/chartjs-plugin-datalabels.min.js"></script>
<script src="path/to/chartjs-plugin-streaming/dist/chartjs-plugin-streaming.min.js"></script>

バンドラーを使う場合は、モジュールをインポートしてチャートに登録します。

import {Chart} from 'chart.js';
import 'chartjs-adapter-luxon';
import DataLabelsPlugin from 'chartjs-plugin-datalabels';
import StreamingPlugin from 'chartjs-plugin-streaming';
Chart.register(DataLabelsPlugin, StreamingPlugin);