chart.js annotation & draggable plugin

by kenmasu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-draggable.min.js"></script>
<canvas id="ctx"></canvas>

JavaScript

var annotations = [
  {
    type: 'line',
    id: 'vline0',
    mode: 'vertical',
    scaleID: 'x-axis-0',
    value: '2017-08-05',
    borderColor: 'green',
    borderWidth: 1,
    label: {
      enabled: true,
      position: "center",
      content: 50
    },
    onClick: function(e) {
      // The annotation is is bound to the `this` variable
      console.log("###onClick", e);
    },
    draggable: true,
    onDrag: function(event) {
      console.log(event.subject.config.value);
    },
  },{
    id: 'vline1',
    type: 'line',
    mode: 'horizontal',
    scaleID: 'y-axis-0',
    value: '4',
    borderColor: 'green',
    borderWidth: 1,
    label: {
      enabled: true,
      position: "center",
      content: 70
    },
    onClick: function(e) {
      // The annotation is is bound to the `this` variable
      console.log("###onClick", e);
    },
    draggable: true,
    onDrag: function(event) {
      console.log(event.subject.config.value);
    },
  },
  {
    id: "hline",
    type: "line",
    mode: "horizontal",
    scaleID: "y-axis-0",
    value: 2,
    borderColor: "black",
    borderWidth: 5,
    label: {
      backgroundColor: "red",
      content: "Test Label",
      enabled: true
    },
    onClick: function(e) {
      // The annotation is is bound to the `this` variable
      console.log("Annotation", e.type, this);
    },
    draggable: true,
    onDrag: function(event) {
      console.log(event.subject.config.value);
    }
  },  
]


var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['2017-08-02', '2017-08-05', '2017-08-09', '2017-08-12', '2017-08-14'],
      datasets: [{
         label: 'LINE',
         data: [3, 1, 4, 2, 5],
         backgroundColor: 'rgba(0, 119, 290, 0.2)',
         borderColor: 'rgba(0, 119, 290, 0.6)'
      }]
   },
   options: {
      title: {
        display: true,
        text: "test title",
      },
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true
           ...