Skip to content
Advertisement

Chart.js — drawing an arbitrary vertical line

How can I draw an vertical line at a particular point on the x-axis using Chart.js?

In particular, I want to draw a line to indicate the current day on a LineChart. Here’s a mockup of the chart: http://i.stack.imgur.com/VQDWR.png

enter image description here

Advertisement

Answer

Update – this answer is for Chart.js 1.x, if you are looking for a 2.x answer check the comments and other answers.

You extend the line chart and include logic for drawing the line in the draw function.


Preview

enter image description here


HTML

JavaScript

Script

JavaScript

The option property lineAtIndex controls which point to draw the line at.

Fiddle – http://jsfiddle.net/dbyze2ga/14/

User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement