Draw a line on the canvas

TeeChart for Javascript for the HTML5 Canvas

Draw a line on the canvas

Postby myTeeChart219 » Tue May 16, 2017 8:50 am


I've looked at the Canvas demo to draw a rectangle, but I can't see how to draw a line? Is there a specific function that I can't find?

Please could you point me to the documentation or offer some basic code to draw a horizontal line on a line chart.

Many thanks
Posts: 6
Joined: Tue Apr 11, 2017 12:00 am

Re: Draw a line on the canvas

Postby Yeray » Tue May 16, 2017 1:13 pm


You have to use the stroke as explained here.
Here a simple example using a chart:

Code: Select all
            var myFormat = new Tee.Format(Chart1);
            myFormat.stroke.fill = "rgb(250, 83, 55)";

            Chart1.ondraw=function() {

                var x1 = Chart1.axes.bottom.calc(2),
                    y1 = Chart1.axes.left.calc(70),
                    x2 = Chart1.axes.bottom.calc(4),
                    y2 = Chart1.axes.left.calc(40);

                Chart1.ctx.moveTo(x1, y1);
                Chart1.ctx.lineTo(x2, y2);

Best Regards,

ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image ImagePlease read our Bug Fixing Policy
Site Admin
Site Admin
Posts: 8009
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia

Return to Javascript / HTML5

Who is online

Users browsing this forum: No registered users and 2 guests