How to Create a Vertical Arbitrary Line in Chart JS | Chart JS Plugin Series

What if I want to draw a line between data points, for example if my labels are dates (weekly) and i want to draw a line on the 3th Thursday of the month, my labels are every Monday of each week?

[@samsamco6864]

Thank you very much for your videos, as they are excellent and very much appreciated! Further your presentation and explanations are equally excellent! Thanks again!

[@timblackmore7242]

Great Tutorial. Thank you!

[@FredericoJesus-r2d]

Hi !! I am wondering if beforeDraw function is the correct one here. We can see at some point in the video when you are using console.log inside beforeDraw that we have lots of console.logs, meaning that we are drawing multiple rects but all in the same position ?? Shouldn't we use a function that is only called once and therefore only draw the line once ? In my case I want to draw multiple arbitrary lines but I don't think beforeDraw is the correct function, w

[@ChartJS-tutorials]

This is an older video. If I would change it now I would either use beforeDatasetsDraw or afterDatasetsDraw. That would draw it just before or after the datasets. The multiple redrawing is due to the animation as it redraws the frames to emulate movement.

[@abhishek-soni]

Great video, it would be great if you also add a link to the code

[@hugodigio8027]

Nice video and serie ! I have a question about this one ... Can i do this on runtime without reloading the page ? in my case I have a chart, outside the chart I have a table with some values... when I click on this values, I want to display a vertical line at this value on chart ...

[@serjmarkelov9915]

Hey, first and foremost thank you for your work, sir. But I've got a question - how would we create a line from some external script? For example let's say there's some HTML button and we want to draw this vertical line on a certain point/tooltip? How can we get let's say tooltip with index = 2 and draw the vertical line at this point?

[@ChartJS-tutorials]

Hi Serj, thank you for your question and you kind and funny desert comment :) . I made a video which will be online later this evening which covers your question. Will notify you later on once it is up and running.

[@serjmarkelov9915]

@@ChartJS-tutorials wow, much appreciate it 🙏

[@priyankasejwal7070]

This is an extremely helpful playlist. From scratch, I am able to build custom plugins that do a lot to the charts. I have a doubt though can we use the javascript function inside the custom plugin to get an array of coordinate points that we can plot. If so what way we can plot the array of coordinates?

[@andykarwoski761]

Every time I am looking for how to do something with Chartjs, I can always count on a video you've made. Cheers for this one! One question, have you ever tried to make a button that draws a line on a click event? For example, if you had a timescale as an x-axis and wanted to draw a vertical line for a specific time, you could click on that data point and then draw a line? You have some videos on drawing shapes on hover, so I'll try and reference those, but I'd be curious about your approach!

[@ChartJS-tutorials]

Hi Andy, thank you for your kind words. Happy to hear that my videos are a 'go-to' source. I am trying to cover all possible topics of Chart.js but there are still lots of topics to consider. I created an answer video. This topic was a tough cookie. As it requires a bit more advanced features than any thing else I covered so far. As 2 items will counteract. The onclick / update and the show/hide of vertical lines. Watch the video here: kzbin.info/www/bejne/mp7WiHuibKZ8mqM This is not a timescale but I quickly tested it and it does work as well with timescale. But if you encounter issues let me know.

[@andykarwoski761]

@@ChartJS-tutorials Thank you so much for the video! Really in depth explanation!

[@aldenpoole3484]

This is great. How can I send in multiple data points for more than one line? I have to send in 'n' number of lines, each with their own x and y values as well as colors. And show lines that are at the same c position. Edit: nevermind, i finished it this way: var seconds = []; for(let i = 0; i < 50; i++){ seconds.push(i.toString()); } const arbitraryLine = { id: 'arbitraryLine', beforeDraw(chart, args, options){ const{ctx, chartArea:{top, right, bottom, left, width, height},scales:{x,y}} = chart; ctx.save(); let lineSets = options.lineColorsAndPoints; for(lineSet in lineSets){ if(lineSets[lineSet].length > 1){ let yHeight = height/lineSets[lineSet].length; let initTop = top; for(line in lineSets[lineSet]){ console.log(lineSets[lineSet][line]); let lineColor = lineSets[lineSet][line].color; let lineX = lineSets[lineSet][line].x; ctx.strokeStyle = lineColor; ctx.strokeRect(x.getPixelForValue(lineX), initTop, 0, yHeight); initTop += yHeight; } }else{ for(line in lineSets[lineSet]){ console.log(lineSets[lineSet][line]); let lineColor = lineSets[lineSet][line].color; let lineX = lineSets[lineSet][line].x; ctx.strokeStyle = lineColor; ctx.strokeRect(x.getPixelForValue(lineX), top, 0,height); } } } ctx.restore(); } } const labels = seconds; const data = { labels: labels, datasets: [{ }] }; const config = { type: 'line', data: data, options: { plugins:{ arbitraryLine: { lineColorsAndPoints: [[{color: 'blue', x: 3},{color:'red', x : 3}, {color: 'green', x: 3}], [{color:'red', x : 7, y:0}, {color:'blue', x : 7}], [{color:'yellow', x: 16}], [{color:'green', x:28}]] } } }, plugins:[arbitraryLine] }; const myChart = new Chart( document.getElementById('myChart'), config );

[@samsamco6864]

Interestingly, I am finding that this technique does not render under IE or Edge. Has anyone else experienced this? It works fine in FireFox, Chrome, etc... only MS browsers it seems to have issues

[@ChartJS-tutorials]

Hi Sam, thank you for your question. I personally do not use Edge or IE. I considered those browsers as a laggard within the industry, but many people do use it. I do know that IE is phasing out so it might be that they do not support/update certain canvas options. However, the canvas tech was introduced around 2010. So Edge should support it. There is a site that you can use is I will place the link the comment could be filtered out so in text format: caniuse dot com. This shows what browser supports the canvas tech and the specific commands in canvas. But do not have any solution for the issue.

[@samsamco6864]

@@ChartJS-tutorials Good day, Thank you for your response. I agree that IE or Edge are not used as much, but they still are by some. That said, it looks to me that the issue revolves around the use of plugins. ChartJS works fine if plugins are not included. At first I thought that it could be a IE/Edge property setting, but so far no luck... hence the reason I though I would ask. That said I am not overly concerned about it, but just wanted to see what could be the issue. Thanks again! Cheers, Sam

[@g-g-9]

❤️

[@mayanklaxkar7799]

How to do the same in ReactJs Please consider react developers because you show only for the Web ones but react specific would be a lot thankful of you

[@FredericoJesus-r2d]

test