chart.js annotation & draggable plugin with fix

by kenmasu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-chartjs/3.5.1/vue-chartjs.min.js"></script>
<script src="https://gist.githack.com/kenmasumitsu/8dcde5551d57fefc781de2107bcc8184/raw/243fd1f0c332ea2b562d469458ef886319b69b7c/chartjs-plugin-annotation.js"></script>
<div id="app">
    <line-chart></line-chart>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

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);
    }
  },  
]


Vue.component('line-chart', {
    extends: VueChartJs.Line,
    data() {
    	return {
      	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",
          },
     ...