Problem with FastBubbleRenderableSeries.hovered

Hi Pham,

RenderableSeries.hovered requires that a SeriesSelectionModifier is added to the chart, for example, from our Series Selection documentation

// Add the SeriesSelectionModifier to the chart to enable series hover/selection
sciChartSurface.chartModifiers.add(new SeriesSelectionModifier( { enableHover: true, enableSelection: true ));

Also, we have a nice example on the demo site which shows how to add selection & hover to various series.

Click through to the example above then ‘View Source in Github’ to see how we’ve done it.

// Custom function called when series is hovered
const onHoveredChanged = (sourceSeries: IRenderableSeries, isHovered: boolean) => {
    console.log(`Series ${sourceSeries.dataSeries.dataSeriesName} isHovered=${isHovered}`);
    const targetSeriesOpacity = 1;
    const otherSeriesOpacity = isHovered ? 0.3 : 1;

    const sciChartSurface = sourceSeries.parentSurface;
    const otherSeries = sciChartSurface.renderableSeries.asArray().filter((rs) => rs !== sourceSeries);

    // Use the genericanimations feature to animate opacity on the hovered series
    sciChartSurface.addAnimation(
        new GenericAnimation({
            from: sourceSeries.opacity,
            to: targetSeriesOpacity,
            duration: 100,
            onAnimate: (from, to, progress) => {
                const opacity = (to - from) * progress + from;
                sourceSeries.opacity = opacity;
                sourceSeries.pointMarker.opacity = opacity;
            },
        })
    );
    // Dim opacity on the other non-hovered series
    sciChartSurface.addAnimation(
        new GenericAnimation({
            from: otherSeries[0].opacity,
            to: otherSeriesOpacity,
            duration: 100,
            onAnimate: (from, to, progress) => {
                const opacity = (to - from) * progress + from;
                otherSeries.forEach((rs) => {
                    rs.opacity = opacity;
                    rs.pointMarker.opacity = opacity;
                });
            },
        })
    );
};

// Custom function called when a series is selected or deselected
const onSelectedChanged = (sourceSeries: IRenderableSeries, isSelected: boolean) => {
    console.log(`Series ${sourceSeries.dataSeries.dataSeriesName} isSelected=${isSelected}`);

    // When selected, set the stroke = white, or reset previous value
    const targetSeriesStroke = isSelected ? appTheme.ForegroundColor : sourceSeries.pointMarker.fill;
    sourceSeries.stroke = targetSeriesStroke;
    sourceSeries.pointMarker.stroke = targetSeriesStroke;
};

sciChartSurface.chartModifiers.add(
    new SeriesSelectionModifier({
        enableHover: true,
        enableSelection: true,
    })
);

sciChartSurface.renderableSeries.add(
    new SplineLineRenderableSeries(wasmContext, {
        dataSeries: new XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: "First Series" }),
        pointMarker: {
            type: EPointMarkerType.Ellipse,
            options: { fill: AUTO_COLOR, stroke: AUTO_COLOR, strokeThickness: 3, width: 20, height: 20 },
        },
        strokeThickness: 3,
        onHoveredChanged,
        onSelectedChanged,
    })
);

Best regards,
Andrew

I’ve successfully used the SeriesSelectionModifier, and it works perfectly. However, I’m wondering if it’s possible to use event.sourceSeries.hitTestProvider.hitTest() within the bubbleSeries.hovered.subscribe event to retrieve information about the point being clicked on the canvas. I noticed that the event does not provide mouse.offsetX or mouse.offsetY. I reviewed the documentation at SciChart Hit-Test API, but it suggests adding a new event listener to sciChartSurface.domCanvas2D. I would prefer to handle this within the bubbleSeries.hovered.subscribe. Is this approach feasible?

Thank you for your support!

Best regards,
Phat

Hi Phat,

Your only option at the moment would be to perform a hit-test call again as you’ve suggested within the hovered callback. The problem is you’ve got to know the x,y mouse location at that time.

Your best option is therefore to subscribe to sciChartSurface.domCanvas2D and store the x,y location of the mouse. Or, you could also try inheriting SeriesSelectionModifier and overriding modifierMouseMove. This approach would avoid another listener on the dom canvas.

In future it would be trivial for us to pass HitTestInfo through to the series which was hovered or selected.

By the way you may find it useful to know that the global SeriesSelectionModifier.hoverChanged event has a HoveredChangedArgs which includes the nearest HitTestInfo. Try this code therefore:

const seriesSelectionModifier = new SeriesSelectionModifier({ enableHover: true, onHoverChanged: args => {
        console.log(`HoveredSeries: ` + args.hitTestInfo.hitTestPoint.x + `, ` + args.hitTestInfo.hitTestPoint.y);
    }});