Tee Chart for Angular & Draw a Painting Manually

[aaron]

Hello Team,

I have been working on Angular and HTML 5, we are looking to draw a painting using a mouse event before the draw series.

[Marc]

Hello,

There is a Series "onbeforedraw" event you can use in a similar way to the ondraw event in this example:

Code: Select all

Chart1.ondraw=function() {
    var x1 = Chart1.axes.bottom.calc(4),
        y1 = Chart1.axes.left.calc(70),
        x2 = Chart1.axes.bottom.calc(7),
        y2 = Chart1.axes.left.calc(40);

    // X,Y, Width, Height
    myFormat.rectangle(x1,y1, x2-x1, y2-y1);
}

see: https://www.steema.com/files/public/tee ... _paint.htm

Regards,
Marc Meumann

[aaron]

Hello,

I have been facing paint loss while moving the mouse hover on it.
Can you please provide me with an angular example with paint?

there are so many issues if I draw a rectangle before the chart.draw(),
chart.ondraw() does not work before chart draw and if I draw before it, it will be removed after hover

Code: Select all

 	this.TChart.draw();
        this.TChart.ondraw = this.onChartDraw(this._tagData$);

[Marc]

Hello,

This example (mousedown-drag line draw) includes code that I think is relevant to what you want:

https://www.steema.com/files/public/tee ... /lines.htm

I'll have a look to porting some elements over to the angular example,

Regards,
Marc Meumann

[Marc]

Hello,

The standard angular example has been modified. The location has changed to:

https://gitlab.com/steema/teechartjs/-/ ... ns/angular

drawline.jpg (124.78 KiB) Viewed 27247 times

The demo includes code for mouse movement and custom output to the canvas.

Regards,
Marc Meumann