SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

1
0

Hello,

We are working on our Angular Dashboard again using the JS Chart component and one item we would like to tidy up is the Meta Data displayed in the Tool Tips against data points.

When the cursor is enabled and a data point is hovered over, tool tips with the meta data is displayed for all data points in the vertical line; please refer to the screenshot attached.

We would like the tool tip to only be shown when the cursor is on a specific data point. We are currently working with an offshore team and any help surrounding this would be appreciated.

Kind regards,

Version
2.2.2401
Images
  • You must to post comments
0
0

Hi there,

One simple override is all you need to create a custom RolloverModifier:

class PointRolloverModifier extends RolloverModifier {
    public hitTestRadius: number = 5;

    public hitTestRenderableSeries(rs: IRenderableSeries, mousePoint: Point): HitTestInfo {
        if (!mousePoint) {
            return undefined;
        }
        return rs.hitTestProvider.hitTestDataPoint(mousePoint.x, mousePoint.y, this.hitTestRadius);
    }
}

Normally RolloverModifier uses hitTestXSlice function which returns all the points on the line. This replaces that behaviour to return only the data point with a radius of the mouse position.

Best regards,
Andrew

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.