How can I move/show a annotation on a axis?
- Daniel Hartl asked 9 years ago
- You must login 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:SciChartSurface.XAxis>
<s:NumericAxis/>
</s:SciChartSurface.XAxis>
<s:SciChartSurface.YAxis>
<s:NumericAxis/>
</s:SciChartSurface.YAxis>
<s:SciChartSurface.Annotations>
<s:AxisMarkerAnnotation X1="5.5" AnnotationCanvas="XAxis"/>
</s:SciChartSurface.Annotations>
</s:SciChartSurface>
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);
sciChartSurface.XAxis.ModifierAxisCanvas.Children.Add(txt);
Result
See attached images
- Andrew Burnett-Thompson answered 9 years ago
- You must login 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 answered 9 years ago
-
Any suggestions?
-
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 login 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.
Usage:
<SciChartSurface>
...
<SciChartSurface.Annotations>
<!-- Also optionally set YAxis ID in multiple axis scenarios-->
<s:AxisMarkerAnnotation Background="#FF6600"
FontSize="11"
FontWeight="Bold"
Foreground="#EEE"
IsEditable="true"
Y1="32.7" />
</SciChartSurface.Annotations>
</SciChartSurface>
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}}"
BorderThickness="0,1,0,1">
<TextBlock Margin="{Binding Padding,
RelativeSource={RelativeSource AncestorType=a:AxisMarkerAnnotation}}"
VerticalAlignment="Center"
FontSize="{Binding FontSize,
RelativeSource={RelativeSource AncestorType=a:AxisMarkerAnnotation}}"
Foreground="{Binding Foreground,
RelativeSource={RelativeSource AncestorType=a:AxisMarkerAnnotation}}"
Text="{Binding FormattedValue,
RelativeSource={RelativeSource AncestorType=a:AxisMarkerAnnotation}}" />
</Border>
</DataTemplate>
<DataTemplate x:Key="DefaultAxisPointerTemplate">
<Path HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Data="m 0 10 -4 -5 4 -5 z"
Fill="{Binding RelativeSource={RelativeSource AncestorType=a:AxisMarkerAnnotation},
Path=Background}"
Stretch="Fill"
Stroke="{Binding RelativeSource={RelativeSource AncestorType=a:AxisMarkerAnnotation},
Path=Background}"
StrokeEndLineCap="Round"
StrokeLineJoin="Round"
StrokeStartLineCap="Round"
StrokeThickness="1" />
</DataTemplate>
<AxisMarkerAnnotation LabelTemplate="{StaticResource AxisMarkerTemplate}"
PointerTemplate="{}"
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,
Andrew
- Andrew Burnett-Thompson answered 9 years ago
- last edited 9 years ago
-
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?
-
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 login to post comments
Please login first to submit.