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

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

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.

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

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