Pre loader

How to display the name of the clicked polyline after clicking it?

1
0

Implementation scenario: multiple polylines are displayed. After clicking the polyline, the name of the polyline is displayed in the icon.

Question: I can get the Series Name through the SeriesSelectionModifier now, but I don’t know how to display the Series Name in the chart when the user clicks a polyline. Is there a corresponding API?

Version
2.2.2415
  • You must to post comments
1
0

Hello

I want to show the text.

I have also considered the annotation you recommend. However, there are several problems in the implementation. I hope you can help me

  1. How to identify the notes corresponding to each polyline?

Example: I created 3 lines D1, D2 and D3. How can I create comments on corresponding polylines?

  1. I checked the note document and found that the corresponding x and y are required for creating notes. At present, I cannot accurately obtain the x, y of the corresponding polyline.
  • You must to post comments
0
0

How do you want to display it?

As a text label? Try adding a TextAnnotation to the chart.

Take a look at our Annotations API documentation.

With some code like this, you will add an annotation to the top-left of the chart

sciChartSurface.annotations.add(
    // Add label into top left of the SciChartSurface
    new TextAnnotation({
        text: seriesNameHere,
        horizontalAnchorPoint: EHorizontalAnchorPoint.Left, // Left aligned
        verticalAnchorPoint: EVerticalAnchorPoint.Top
        x1: 0.0, // 0,0 when coordinateMode Relative means top left corner of viewport
        y1: 0.0,
        xCoordShift: 20, // Acts like margin/padding on x/y coord
        yCoordShift: 20, 
        fontSize: 16,
        textColor: "#FFFFFFFF",
        xCoordinateMode: ECoordinateMode.Relative,
        yCoordinateMode: ECoordinateMode.Relative,
    }),
);

You can remove it by removing this annotation from sciChartSurface.annotations.

If you wanted the label to be top-right aligned, then set

sciChartSurface.annotations.add(
    // Add label into top left of the SciChartSurface
    new TextAnnotation({
        text: seriesNameHere,
        horizontalAnchorPoint: EHorizontalAnchorPoint.Right, // Right aligned 
        verticalAnchorPoint: EVerticalAnchorPoint.Top
        x1: 1.0, // 1,0 when coordinateMode Relative means top right corner of viewport
        y1: 0.0,
        -xCoordShift: 20, // Acts like margin/padding on x/y coord
        yCoordShift: 20, 
        fontSize: 16,
        textColor: "#FFFFFFFF",
        xCoordinateMode: ECoordinateMode.Relative,
        yCoordinateMode: ECoordinateMode.Relative,
    }),
);

Let me know if this helps.

Best regards,
Andrew

  • You must to post comments
0
0

OK so you do want to display a text label but you want to display it next to the series that was selected near the mouse location?

When you ask a question make sure to include all the requirements. Be specific – share screenshots if you have any or diagrams of the behaviour you want.

Anything is possible in SciChart, for example, we can place labels and animated markers/lines next to series when clicking. This is from our staging-demo (soon to be published on demo.scichart.com) showing the hit-test API

Try clicking on the chart in this demo.

http://stagingdemo2.scichart.com/javascript-chart-hit-test-on-click

The source code is available here.

Best regards,
Andrew

  • You must to post comments
0
0

Yes, I think it is more clear to display text next to the selected series near the mouse position.

My requirement: In the chart, render 1000 polylines in the polyline chart, and click the polyline to display the name of the polyline.

After rendering the chart, zoom the chart, click the polyline, and the response time should not exceed 0.5s.

http://stagingdemo2.scichart.com/javascript-chart-hit-test-on-click I’m quite satisfied with the effect. But I still have some questions. I want your guidance

  1. Will this method cause performance problems? When the number of polylines is greater than 1000

You can use tooltips to click the information that appears, but adding tooltips will cause the page to get stuck. Does this approach cause page stuttering?

  1. The source code of the dom does not match its effect. Can I ask you for a correct source code? Is this method still not published?

Thanks again for your help

  • You must to post comments
0
0

In order to be able to click on polylines and display tooltips you will need a custom chart modifier, which uses Hit-Test API to identify a renderable series being clicked and a custom SVG annotation. Take a look at this examples: Hit-Test Example HitTestingPointsDemo, Custom Annotations Example AnnotationAtSeriesYValue. If you will have problems implementing the chart modifier please provide us with a minimal working project showcasing the issue.

  • You must to post comments
Showing 5 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies