Hello SciChart Team,
I’m trying to subscribe to FastBubbleRenderableSeries.hovered, but it doesn’t seem to be working.
const bubbleSeries = new FastBubbleRenderableSeries(wasmContext, {
dataSeries: xyzDataSeries,
pointMarker: new EllipsePointMarker(wasmContext, {
width: 64,
height: 64,
fill: "#4682b477",
}),
});
// Subscribe to the hovered event
bubbleSeries.hovered.subscribe((event) => {
console.log(event);
});
Is there something wrong with my approach? Also, can I extract the yValues, xValues, and zValues of the item being hovered using this method? Any other ideas or different approaches are welcome !
Best regards,
Phat
- Pham Phat asked 3 weeks ago
- last edited 3 weeks ago
- You must login to post comments
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
- Andrew Burnett-Thompson answered 3 weeks ago
- You must login to post comments
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);
}});
- Andrew Burnett-Thompson answered 3 weeks ago
- You must login to post comments
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
- Pham Phat answered 3 weeks ago
- last edited 3 weeks ago
- You must login to post comments
Please login first to submit.