Rollover Marker + axis labels drawing order

Hi

First thing is that you don’t need CursorModifier. Just set showAxisLabel: true on the rollover to get the label. You would only need the CursorModifier if you wanted the y axis label as well, since rollover only does the X line.

Since the rollover marker is svg, there’s no simple way to get it to draw behind the labels. svg is always on top of everything. So, to do this we need to draw the marker natively. We don’t (yet) have something like PointMarkerAnnotation to draw an individual pointmarker, but we can just add an extra series with a single data point to do this.

Here is a fork of your codepen that demonstrates this https://codepen.io/scichart/pen/KKEMweo
This is the new code. Note the use of rollover.includeSeries(pointSeries, false); to exclude our ppintmarker series from the rollover.

// XyScatterSeries to render the rollover marker
const pointDataSeries = new XyDataSeries(wasmContext);
const pointSeries = new XyScatterRenderableSeries(wasmContext, {
  dataSeries: pointDataSeries,
  pointMarker: new EllipsePointMarker(wasmContext, {
    stroke: "red",
    fill: "red",
    width: 10,
    height: 10
  })
});
sciChartSurface.renderableSeries.add(series, pointSeries);
const rollover = new RolloverModifier({
    modifierGroup: `shared`,
    showTooltip: false,
    rolloverLineStrokeThickness: 5,
    rolloverLineStrokeDashArray: [5, 10],
    rolloverLineStroke: "blue",
    showAxisLabel: true // Turn on label for rollover.  No CursorModifier needed
  });
// Exclude the marker series from the rollover
rollover.includeSeries(pointSeries, false);
// Hide the rollover marker
series.rolloverModifierProps.markerColor = "transparent";
// Set the data for the marker series to the position of the hidden marker
// update is a protected method which calculates and sets the rollover annotation positions.
const rolloverUpdate = rollover.update;
rollover.update = () => {
  rolloverUpdate.call(rollover);
  pointDataSeries.clear();
  if (!series.rolloverModifierProps.marker.isHidden) {
    const { x1, y1 } = series.rolloverModifierProps.marker;
    pointDataSeries.append(x1, y1)
  }
}
sciChartSurface.chartModifiers.add(rollover);

Regards
David

Thank you for the detailed answer! I’m using both, with different styles on the lines here just to differentiate them, and confirm draw order. This illustrates the issue that even though the CursorModifier is drawn on top of the RolloverModifier, this isn’t the case for the point marker
– I use the RolloverModifier to get the point marker.
– I use the CursorModifier to get the floating axis label.
– The axis label being drawn inside the chart, is intended (I don’t want axis space).
– The issue is the point marker, I want it drawn behind the axis label, not on top.

You mention “Have an AxisLabel on the RolloverModifier itself”, how would I do this? If it is possible, and it ensures the point marker drawn below the axis label, that would be an acceptable solution indeed!

Note: Cursor and Rollover are very similar, at least in my mind. Could they not be one single modifier, with a bit more options to get the desired behaviour?

Can I ask for a second look on this issue?

What I really want is to have both modifiers, with the uses I mentioned, one for the line, the other for the axisLabel, as I haven’t been able to use just one for both cases.
And the point marker should be rendered below the axisLabel. (I don’t want extra space, the axisLabel should be rendered inside the chart area)

I know it’s not trivial as they’re rendered in different worlds, the axisLabel being webgl context, and the point marker being SVG.

Can I hook into the rendered axisLabel positioning at least to decide if I render the point marker or not?
For this I guess I’d need to override the point marker rendering logic, and look into the axisLabel viewRect, calculate if the current point marker would overlap, and decide if I should continue with the render or not. Is this possible at all?

Thanks!