Pre loader

Rollover Marker + axis labels drawing order

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


Imagine I have a chart with a RolloverModifier, such that I see the point marker, and also a CursorModifier so I see the axis labels with the exact value I’m hovering.
This chart has the axis title hidden, and also the labels hidden, so I can really only see them trough the CursorModifier axis labels.
Since the axis title and labels are hidden, the axis labels spawn inside the chart, and the point marker from the RolloverModifier may be drawn on top of the labels.

I’d like to properly control drawing order here, so my axis labels get prioritised.
Is there a way to do so?

Codepen example:

  • You must to post comments

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:

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:

enter image description here

..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.

enter image description here

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.

enter image description here

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

  • You must to post comments

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?

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies