Chartjs-Adding Vertical lines to charts

by

1👍

✅

The reason why it wasn’t drawing the annotations was because in my main.js I wasn’t importing or registering it

import ChartAnnotationsPlugin from 'chartjs-plugin-annotation'
Chart.plugins.register(ChartAnnotationsPlugin)

0👍

annotations parameter value corresponds to the value on the x-axis or y-axis, you need to convert the time until annotations’s value is in the range of the x-axis, and equal to one of them：

annotations: [
  {
    type: 'line',
    mode: 'vertical',
    scaleID: 'x-axis-0',
    // example: value "2019/1/23" ability to match in the x-axis collection
    value: '2019/1/23',
    // value: 'Wed Jan 23 2019 10:31:27 GMT-0500 (Eastern Standard Time)',
    borderColor: 'red',
    label: {
      content: 'TODAY',
      enabled: true,
      position: 'top'
    }
  }
]

Leave a comment