title: how to add multi custom vertical line in chart js using annotation
body: <p>I added annotation for adding custom multiple vertical lines in my chart, if I add statically it working fine 
  my static code:</p>
  
  <pre><code>annotation: {
          annotations: [
            {
              type: 'line',
              mode: 'vertical',
              scaleID: 'x-axis-0',
              value: 0.019,
              borderColor: 'rgba(189, 189, 189, 0.5)',
              borderWidth: 1,
            },
            {
              type: 'line',
              mode: 'vertical',
              scaleID: 'x-axis-0',
              value: 0.033,
              borderColor: 'rgba(189, 189, 189, 0.5)',
              borderWidth: 1,
            },
            {
              type: 'line',
              mode: 'vertical',
              scaleID: 'x-axis-0',
              value: 0.305,
              borderColor: 'rgba(189, 189, 189, 0.5)',
              borderWidth: 1,
            },
          ],
        },
  </code></pre>
  
  <p>this code is working fine in my chart js i want to change the code in dynamice way so that i modified the code like this.</p>
  
  <pre><code>const testValue = ['0.019', '0.033', '0.305', '0.428', '0.582', '0.826'];
      const annotations = map(testValue, el =&gt; ({
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-label',
        value: el,
        borderColor: 'green',
        borderWidth: 1,
      }));
  </code></pre>
  
  <p>but this not displaying the line in my chart can any one tell me what is the problem in my code. 
  Note: this chart is implemented in react js I am using this npm <code>react-chartjs-2</code> only for displaying the chart my version is also up to date only.</p>