Pre loader

Draw surface background color

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



Annotation chart sample Drag Horizontal Threshold allow us to draw custom controllable color for the data series. The same way I need to draw the chart surface background color. I couldn’t find the appropriate API to do this job. Could you advise how to draw surface background color.


Attached the graph image, I like to draw the grey and white backgrounds based on horizontal and vertical line positions.


  • You must to post comments
Best Answer

Thanks for the clarification Santhosh,

The gray area to the left of the vertical line can be achieved using a BoxAnnotation. Please try this code for size:

NOTE: This is not tested, please give me feedback if it works

          <s:VerticalLineAnnotation x:Name="verticalLine" ShowLabels="True" Stroke="Red"/>
          <s:BoxAnnotation CoordinateMode="RelativeY" Y1="0" Y2="1" X1="TO BE DECIDED" X2="{Binding ElementName=verticalLine, Path=X1, Mode=OneWay}" Background="#33000000"/>

This is not a complete code sample, but points you in the right direction. The BoxAnnotation has CoordinateMode.RelativeY, which allows you to enter coordinates of 0, and 1, for Y1,Y2 which sets the box height to the height of the viewport.

The X2 of the BoxAnnotation is bound to the X1 of the VerticalLineAnnotation. As the line moves, I would expect the box to move with it.

The X1 of the BoxAnnotation has TO BE DECIDED. This is going to need to be changed dynamically as your viewport zooms. I would suggest handling the SciChartSurface.Rendered event and in code-behind setting the BoxAnnotation.X1 equal to SciChartSurface.XAxis.VisibleRange.Min.

Best regards,

  • Santhoshkumar
    Thanks Andrew, Your sample works for left side of Vertical line :-) As of now X1 value assign as Zero and I could increase and decrease the BoxAnnotation from vertical line movement. And I used FastMountainRenderableSeries to draw gray color background for bottom of horizontal curved line.
  • Andrew Burnett-Thompson
    Yes it is, simply set the <FastMountainRenderableSeries AreaBrush="#33000000"/>. This will draw a gray fill below the mountain. Is that what you need? Please be advised that if you set BoxAnnotation X1="0" but 0 is not on the screen (or far away) it can cause a very large annotation to be created which can cause WPF to issue an OutOfMemoryException. If your XAxis.VisibleRange.Min = 0 it will be fine, but if you are scrolling or zooming into the chart, I would recommend dynamically changing BoxAnnotation.X1 as the chart redraws.
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.