Rollover Marker + axis labels drawing order

Hi João

The order of addition to the sciChartSurface.chartModifiers collection determines the draw order.

However, if you simply swap the order of modifiers with this code:

sciChartSurface.chartModifiers.add(
new CursorModifier({
  id: "cmid",
  modifierGroup: `shared`,
  axisLabelFill: "white",
  axisLabelStroke: "black",
  crosshairStroke: "white",
  showTooltip: false,
  showAxisLabels: true,
  showYLine: false
}),
new RolloverModifier({
  modifierGroup: `shared`,
  showTooltip: false,
  rolloverLineStrokeThickness: 5,
  rolloverLineStrokeDashArray: [5, 10],
  rolloverLineStroke: "blue"
}),

);

you get this:

..which is also unusable as the rollover marker is now over the top of the axis label.

What’s the desired outcome here?

1. Make the axis wide enough so that the CursorModifier AxisLabel is off the chart
2. Have an AxisLabel on the RolloverModifier itself (using two modifiers here is superfluous unless that was your goal)
3. Control the order of drawing the lines and rollover markers individually?

I’m assuming (1) so perhaps aonther solution is to synchronise the axis widths. Many ways you could do this.

First simple solution: Don’t hide labels, just set them to transparent. They will take up the full space but not be visible.

   const xAxis = new NumericAxis(wasmContext, {
     axisTitle: !rightChart ? "X" : "",
     // drawLabels: !rightChart,
     visibleRange: new NumberRange(0, 10),
     axisAlignment: EAxisAlignment.Left,
     flippedCoordinates: true
   });
   if (rightChart) {
     xAxis.labelStyle.color = "Transparent";
   }

This results in the following output.

Second solution, use SciChartVerticalGroup feature which is designed to synchronise axis sizes across many charts. This is a little more complex but useful when you want to preserve layout and keep viewport sizes the same.

I’ve modified your codepen here to show how to use this. Unfortunately it synchronises the entire axis size (including title) resulting in this.

Third and final solution: It’s possible to hook into the SciChart layout engine and provide custom code to configure axis sizes. However it’s beyond the scope of this forum Q to go into that (and probably overly complex).

Short answer:

• There is more than one way to do things in SciChart.js
• It’s worth considering overall requirements to arrive at the best solution (we’re happy to help with these)
• Simplest solution from the above is just transparent labels to ensure axis size is sufficient
• Ensuring axis takes into account cursor label size is probably not a solution, as the cursor label could be visible/invisible or grow or shrink independently to the axis size

Let me know if this helps

Best regards
Andrew

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?