SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components


How can I move/show a annotation on a axis?

  • You must to post comments

Hi Daniel,

The only annotation that is supported on an axis is the AxisMarkerAnnotation which is demonstrated in our Interaction with Annotations example.



      <!-- Also optionally set YAxis ID in multiple axis scenarios--> 
      <s:AxisMarkerAnnotation Background="#FF6600"
         Y1="32.7" />


v3.4 AxisMarkerAnnotation Template

You can template the AxisMarkerAnnotation as follows

<DataTemplate x:Key="AxisMarkerTemplate" DataType="r:AxisInfo">
    <Border Background="{Binding Background,
                                 RelativeSource={RelativeSource AncestorType=a:AxisMarkerAnnotation}}"
            BorderBrush="{Binding BorderBrush,
                                  RelativeSource={RelativeSource AncestorType=a:AxisMarkerAnnotation}}"
        <TextBlock Margin="{Binding Padding,
                                    RelativeSource={RelativeSource AncestorType=a:AxisMarkerAnnotation}}"
                   FontSize="{Binding FontSize,
                                      RelativeSource={RelativeSource AncestorType=a:AxisMarkerAnnotation}}"
                   Foreground="{Binding Foreground,
                                        RelativeSource={RelativeSource AncestorType=a:AxisMarkerAnnotation}}"
                   Text="{Binding FormattedValue,
                                  RelativeSource={RelativeSource AncestorType=a:AxisMarkerAnnotation}}" />

<DataTemplate x:Key="DefaultAxisPointerTemplate">
    <Path HorizontalAlignment="Right"
          Data="m 0 10 -4 -5 4 -5 z"
          Fill="{Binding RelativeSource={RelativeSource AncestorType=a:AxisMarkerAnnotation},
          Stroke="{Binding RelativeSource={RelativeSource AncestorType=a:AxisMarkerAnnotation},
          StrokeThickness="1" />

<AxisMarkerAnnotation LabelTemplate="{StaticResource AxisMarkerTemplate}" 
                                                FormattedValue="{Binding AxisInfo.AxisFormattedDataValue, RelativeSource={RelativeSource Self}}" />

Placing just text on axis

If you wish to place text on an axis then you may do so by modifying the control template of the AxisMarkerAnnotation (above), or, by using the AxisBase.ModifierAxisCanvas. This is a simple canvas which is layered over the axis.

However, you will need to calculate the position of the UIElement on the canvas as the scichartsurface is rendered, by using our Data Value to Pixel Coordinate API.

Best regards,

  • Daniel Hartl
    Hello Andrew, Firstly I only want to place a AxisMarkerTemplate in the middle of ther chart: _SciChart.XAxis.ModifierAxisCanvas.Children.Add(new AxisMarkerAnnotation() { XAxisId = _SciChart.XAxes[0].Id, X1 = 512 }); But it get always placed at beginning of the axis, independently of the X1 value?
  • Andrew Burnett-Thompson
    Yes, as I said, if you decide to use AxisBase.ModifierAxisCanvas, this is just a WPF canvas "However, you will need to calculate the position of the UIElement on the canvas as the scichartsurface is rendered, by using our Data Value to Pixel Coordinate API.". Best regards, Andrew
  • You must to post comments

I’ve written a small sample application that demonstrates how to add AxisMarkerAnnotation to the XAxis as well as add a UIElement to the axis canvas (independently of the Annotation API). This demonstrates the two ways of placing text on an XAxis:

Method #1 Using Annotations API

The following code will place an AxisMarkerAnnotation on the XAxis at a given X1 value. In this method the SciChart Annotations API takes care of placement of the marker as the chart resizes and VisibleRange changes.

    <s:SciChartSurface s:ThemeManager.Theme="Chrome" x:Name="sciChartSurface">


            <s:AxisMarkerAnnotation X1="5.5" AnnotationCanvas="XAxis"/>

Method #2 Using Axis.ModifierAxisCanvas

Using this method you can declare any UIElement and place it on the XAxis.ModifierAxisCanvas, using the attached properties AxisCanvas.SetLeft() and AxisCanvas.SetTop() to control placement manually.

You will be responsible for updating the position of the UIElement as the chart resizes and VisibleRange changes. To convert data to pixel coordinates, see our article Convert Pixel to Data Coordinates

            var txt = new TextBlock()
                Text = "Hello World", 
                Background = Brushes.Gray, 
                Foreground = Brushes.White
            AxisCanvas.SetLeft(txt, 100);
            AxisCanvas.SetTop(txt, 10);


See attached images

  • You must to post comments

Sorry for the wrong code lines:

var Calc = _SciChart.XAxes[0].GetCurrentCoordinateCalculator();
var coord = _SciChart.XAxes[0].GetDataValue(12850);
_SciChart.XAxis.ModifierAxisCanvas.Children.Add(new AxisMarkerAnnotation() { XAxisId = _SciChart.XAxes[0].Id, X1 = coord });

For example:
The toal range from the Xaxis is from 12000s to 13000s
The axisMarkerAnnotation shall be positioned at 12850.
The visible range is 200s, and get changed by scrollbar..

But it get always placed at beginning of the axis, independently of the X1 value?

  • Daniel Hartl
    Any suggestions?
    • Guest
    • 7 years ago
    Hi Daniel, please notice that if you set X1 coordinate on an annotation, it's always a chart coord, not a pixel coord. So you should either set X1 = 12850 and add AxisMarkerAnnotation to the Annotations collection (that's approach #1 from Andrew's post above), or use any other control and put it on ModifierAxisCanvas, setting AxisCanvas.Left,AxisCanvas.Right(approach #2). These are just different ways of achieving the same and shouldn't be mixed up.
  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.