[Chartjs]-Chart.JS Vertical Line with Moment.JS Horizontal Axis

by

2👍

✅

I tried multiple plugins, but none could handle Charts with cartesian axes of type time. My rather simple solution:

First register the chart plugin globally:

Chart.plugins.register({
  drawLine: function (chart, xValue, color = 'rgba(87,86,86,0.2)') {
    const canvas = chart.chart
    const context = canvas.ctx

    context.beginPath()
    context.moveTo(xValue, 6) // top
    context.lineTo(xValue, canvas.height - 73) // bottom
    context.strokeStyle = color
    context.stroke()
  },

  afterDraw: function (chart) {
    const xScale = chart.scales['x-axis-0']

    if (chart.options.verticalLine) {
      chart.options.verticalLine.forEach((line) => {
        const xValue = xScale.getPixelForValue(line)

        if (xValue) {
          this.drawLine(chart, xValue)
        }
      })
    }
  }
})

Then add verticalLine Array to your chart definition:

options: {
   scales: { xAxes: [{ type: 'time' }] },
   verticalLine: ['2019-04-1', '2019-07-01', '2019-10-01'],
 }

Leave a comment