chart.js annotation 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 marketing = ['2017-08-05', '2017-08-12'];
var amount = [50, 70];
var annotations = marketing.map(function(date, index) {
   return {
      type: 'line',
      id: 'vline' + index,
      mode: 'vertical',
      scaleID: 'x-axis-0',
      value: date,
      borderColor: 'green',
      borderWidth: 1,
      label: {
         enabled: true,
         position: "center2",
         content: amount[index]
      }
   }
});


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",
          },
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          },
          annotation: {
            drawTime: 'afterDatasetsDraw',
            annotations: annotations          
          }
        }
      };
    },
    mounted () {
      this.renderChart(this.data, this.options);
    }
  })
  
new Vue({
   el: '#app',
 })