# Annotation

chartjs-plugin-annotation (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: {
      annotation: {
        annotations: {
          line: {
            drawTime: 'afterDatasetsDraw',
            type: 'line',
            scaleID: 'y',
            value: Utils.rand(-100, 100),
            borderColor: 'black',
            borderWidth: 5,
            label: {
              backgroundColor: 'red',
              content: 'Test Label',
              enabled: true
            }
          },
          box: {
            drawTime: 'beforeDatasetsDraw',
            type: 'box',
            xMin: 0,
            xMax: 0,
            backgroundColor: Utils.transparentize(Utils.CHART_COLORS.purple, 0.5),
            borderColor: Utils.CHART_COLORS.purple,
            borderWidth: 1
          }
        }
      }
    }
  }
};

プレーンな 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-annotation.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 AnnotationPlugin from 'chartjs-plugin-annotation';
import StreamingPlugin from 'chartjs-plugin-streaming';
Chart.register(AnnotationPlugin, StreamingPlugin);