[Chartjs]-ChartJS / Chartjs-plugin-annotation How to draw multiple vertical lines using an array?

by

2👍

✅

Considering you have two arrays (marketing and amount) as such :

var marketing = ['2017-08-05', '2017-08-12'];
var amount = [50, 70];

You can create/populate the annotations array dynamically based on one of those arrays (marketing/amount) to draw multiple vertical lines, like so :

// populate 'annotations' array dynamically based on 'marketing'
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: "center",
         content: amount[index]
      }
   }
});

see a working example.

Leave a comment