LineAnnotation user interaction

Answered

Hello,
We are developing an application whose main task is to display charts and allow users to add indicators to these charts. We have two requirements for drawing lines on the chart upon button click:

Option 1 (2 clicks):
– The user clicks on point A.
– The user moves the cursor over the chart and sees a line from point A to
the cursor (the line changes length with each mouse movement).
– On the second click, the line takes on the final parameters of the
second click.

Option 2 (mousedown && mouseup ):

I press the mouse on point A but do not release it.
I move the cursor over the chart (the line changes length with each mouse movement).
I release the mouse, and the line is drawn.

Is either of these options feasible? If not, is there any possibility of drawing lines through any user interaction?

At the moment, we have implemented line drawing by clicking on a point, and at that point, a short line is drawn that the user can adjust as they wish. However, there is a minor issue with retrieving the X and Y values:
const mouseX = clickEvent.offsetX;
const mouseY = clickEvent.offsetY;

const xValue = this.sciChartSurface.xAxes.get(0).getCurrentCoordinateCalculator().getDataValue(mouseX);
const yValue = this.sciChartSurface.yAxes.get(0).getCurrentCoordinateCalculator().getDataValue(mouseY);
These values are always shifted to the right and downward. Is there any additional trick I should use to fix it?

Thanks in advance.

Best regards,
Kamil

Link to chart: https://ibb.co/fnG9NV8

Version

3.3.567

JavaScript Annotations LineAnnotation CoordinateCalculator javascript

Kamil Macura asked 2 months ago
last edited 2 months ago

You must login to post comments

Answers (3)

Best Answer

Hello, yes both are possible.
You can implement the logic within a custom chart modifier to add the behaviour.

The coordinates probably must be adjusted in correspondence to the series view rect with a “translate” function.

Check our examples here:
https://demo.scichart.com/react/user-annotated-stock-chart
and
https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/CustomerExamples/CreateAnnotationsDynamically

Jim Risen answered 2 months ago

You must login to post comments

Once again, thank you for the previous response. It works very well. I have one more question regarding LineAnnotations and Annotations in general: is it possible to handle double-click and RMB (right mouse button) and, for example, display a small menu over the clicked annotation?

RMB, I assume I can use on the entire chart (addEventListener), and if an id LineAnnotation is selected, display the menu. But is there another way to achieve the required logic?

Thanks in advance.

Best regards,
Kamil

Kamil Macura answered 2 months ago
last edited 2 months ago

You must login to post comments

Hello, sorry for late response.
I would still recommend creating a custom modifier.
SciChart already attaches event listeners to the chart and disables pointer events on most of the internal elements.
So adding your own listeners could conflict with its functionality.

Here is a doc page on CustomModifier API: https://www.scichart.com/documentation/js/current/CustomChartModifierAPI.html

So you can use modifierDoubleClick for double click event and modifierMouseDown for RMB event by cheking the args.nativeEvent.button property.

Here is another example of a custom modifier: https://www.scichart.com/documentation/js/current/DetectingClicksOnChartParts.html