1

Hello Joerg,

Axis Label styling was introduced in SciChart v3.0. You can now set a Style for a label including margins, LayoutTransforms etc…

Please see the answer on Styling Axis Labels for more information.

Best regards,
Yuriy

Hello Joerg,

As part of SciChart v3.0 all axis types now show labels at VisibleRange.Max and Min, so long as VisibleRange.Max, Min fall at ‘nice’ values, e.g. 1.0, 1.5, 2.0, 2.5 etc… By default the chart will choose these nice values when first showing or autoranging.

When you scroll however, the labels scroll too – you lose the labels at the edges of the axis. In this case you might want to use our new StaticAxis Feature, which fixes axis labels at fixed intervals and updates the label value instead.

Best regards,
Yuriy

Hi George,

This is a problem we’re trying to solve (MVVM in general) and there’s no good answer at the moment! Just a note, there may be some changes in the SeriesSource API in the next major release (quite a while off though) to make this easier.

The problem is we need to separate view & viewmodel, yet retain control over series-type, colors, point-markers from the viewmodel which are much better defined in the XAML.

If you wanted to apply the same RolloverMarker to all series, you could use an unnamed style, e.g.

<!-- Define in UserControl.Resources, or Application resources, with no key -->
<Style TargetType="{x:Type SciChart:FastLineRenderableSeries}">
            <Setter Property="RolloverMarkerTemplate">
                <Setter.Value>
                    <ControlTemplate>
                        <Ellipse Width="7" Height="7" Fill="SlateGray" Stroke="SlateGray" StrokeThickness="1" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

This will apply the same Rollover Marker to all FastLineRenderableSeries’ in that scope.

Perhaps another solution is to define a ResourceDictionary which contains your styles (this time keyed) and set them using an attached property? E.g. if a resource dictionary was added to the App.xaml you can retrieve styles and templates from it by calling Application.Current.Resources[“key”]. Rather than getting application resources in your viewmodel sometime’s it’s better to define a property in your viewmodel of type string, and use attached properties to apply the style.

For example:

        <!-- TODO: ControlTemplates can be defined in resource dictionaries and added to App.Xaml -->
        <ControlTemplate x:Key="GrayMarkerTemplate">
            <Ellipse Width="7" Height="7" Fill="SlateGray" Stroke="SlateGray" StrokeThickness="1" />
        </ControlTemplate>

        <ControlTemplate x:Key="BlueMarkerTemplate">
            <Ellipse Width="7" Height="7" Fill="SteelBlue" Stroke="SteelBlue" StrokeThickness="1" />
        </ControlTemplate>

// Create attached properties and attached behaviours to assist and work around MVVM's limitations
public class RolloverMarkerHelper : DependencyObject
    {
        public static readonly DependencyProperty RolloverTemplateKeyProperty =
            DependencyProperty.RegisterAttached("StyleKey", typeof (string), typeof (RolloverMarkerHelper), new PropertyMetadata(default(string), OnRolloverTemplateKeyChanged));

        public static void SetRolloverTemplateKey(UIElement element, string value)
        {
            element.SetValue(RolloverTemplateKeyProperty, value);
        }

        public static string GetRolloverTemplateKey(UIElement element)
        {
            return (string) element.GetValue(RolloverTemplateKeyProperty);
        }

        private static void OnRolloverTemplateKeyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var element = d as BaseRenderableSeries;

            if (element == null)
                return;

            if (e.NewValue == null)
            {
                element.RolloverMarkerTemplate = null;
                return;
            }

            if (Application.Current != null)
            {
                var resource = Application.Current.TryFindResource(e.NewValue) as ControlTemplate;
                element.RolloverMarkerTemplate = resource;
            }
        }
    }

Then the template can be applied like this

            _chartSeries = new ObservableCollection<IChartSeriesViewModel>();

            var rSeries0 = new FastLineRenderableSeries();
            RolloverMarkerHelper.SetRolloverTemplateKey(rSeries0, "GrayMarkerTemplate");
            _chartSeries.Add(new ChartSeriesViewModel(ds0, rSeries0));

            var rSeries1 = new FastLineRenderableSeries();
            RolloverMarkerHelper.SetRolloverTemplateKey(rSeries1, "BlueMarkerTemplate");
            _chartSeries.Add(new ChartSeriesViewModel(ds1, rSeries1));

I’ve attached a full example to this post. It’s not the most elegant of solutions but it does show how you can work around some of these issues by using attached properties or attached behaviours.

Hope this helps!
Andrew

Hi Egbert,

We have added the ability to show Min Max ticks on an axis, as well as many other axis enhancements such as the TickProvider API in v3.0 of SciChart. Please see this related post on CategoryDateTimeAxis Grid Lines.

Using the TickProvider API

In SciChart v3.0 and above, there is now a way to override the exact Tick Intervals.

See this KB article on Advanced Tick Frequency Overriding which introduces the TickProvider API. This allows exact calculation of ticks (Axis Major, Minor gridlines and labels) as the axis is drawn.

Best regards,
Andrew

Update: June 2014

We have gone through all the tutorials on Screenshots, Printing to XPS, Export to Bitmap and updated them. Please see the updated links below below.

• Export chart from screen to bitmap
• Exporting chart with legend to bitmap
• Rendering chart to bitmap in memory
• Screenshots, XPS Printing, X-Axis Text Labels

The Screenshots, XPS Printing, X-Axis Text Labels article now has an updated sample which compiles against SciChart v3.0 so you can download it and get started.

Hope this helps!
Andrew

Hello there,

The Annotations feature in v1.5 uses UIElements. These are very flexible (as they are WPF elements) but are also very slow compared to the bitmap rendering that we employ in SciChart.

We did have a user once who added 50,000 annotations to a WPF SciChart. It did take a few seconds to redraw but it did perform. We got his performance down from minutes (like you) to a few seconds by using the following code:

      using (sciChartSurface.SuspendUpdates())
      {
        // Create temporary AnnotationCollection
        var myAnnotations = new AnnotationCollection();
 
        double minx = double.MaxValue;
        double maxx = double.MinValue;
 
        foreach (var c in cmdList)
        {
          if (c.X < minx) minx = c.X;
          if (c.X > maxx) maxx = c.X;
 
          var a = new BoxAnnotation
          {
            // Assign X1,Y1, Background etc... 
          };
 
           myAnnotations.Add(a);
        }

        // Reassign annotation collection
        sciChartSurface.Annotations = myAnnotations;
 
        sciChartSurface.ZoomExtents();
      }

Assigning the annotation collection in one go will prevent internal updates/redraws occurring on each add. Please try this and let me know if it helps.

Thanks!
Andrew

Hello lovely SciChart people,

An update for you. SciChart v3.0 now supports templating of Axis Titles natively. Please see the SciChart v3.0 Release Notes.

5. Axis Styling improvements

• Chart Titles, Axis Titles and Labels can now be styled
• Can set font size, font style, font weight on Axis labels
• Now supports optional rotation of axis tick labels (e.g. 90 degrees)

Usage:

<!-- Styling Tick Labels with rotation and custom font-size and foreground -->
<s:DateTimeAxis>
    <s:DateTimeAxis.TickLabelStyle>
        <Style TargetType="s:DefaultTickLabel">
            <Setter Property="Foreground" Value="Blue" />
            <Setter Property="FontSize" Value="25" />
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <RotateTransform Angle="45" />
                </Setter.Value>
            </Setter>
        </Style>
    </s:DateTimeAxis.TickLabelStyle>
</s:DateTimeAxis>
</pre>

<!-- Styling Numeric Axis Tick Labels -->
<s:NumericAxis>
    <s:NumericAxis.TickLabelStyle>
        <Style TargetType="s:NumericTickLabel">
            <Setter Property="Foreground" Value="Blue" />
            <Setter Property="FontSize" Value="25" />
        </Style>
    </s:NumericAxis.TickLabelStyle>
</s:NumericAxis>

<!-- Declare an Axis Title Template -->
<Style x:Key="BottomAxisTitleStyle" TargetType="s:AxisTitle">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Margin="0,3,0,0"
                                Style="{StaticResource TitleTextStyle}"
                                Text="Showing time on"/>
                    <TextBlock HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Text="{Binding}" />
                    <TextBlock Margin="0,0,0,3"
                                Style="{StaticResource TitleTextStyle}"
                                Text="(daily Timeframe)"/>
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- Apply an Axis Title Template -->
<s:DateTimeAxis AxisTitle="Time Axis Title" TitleStyle="{StaticResource BottomAxisTitleStyle}"  Style="{StaticResource AxisStyle}"/>

<!-- Apply an Axis Title Template -->
<s:DateTimeAxis AxisTitle="Time Axis Title" TitleStyle="{StaticResource BottomAxisTitleStyle}"  Style="{StaticResource AxisStyle}"/>

Also the XAML Styling application demonstrates this.

Best regards,
Andrew

Hi Miles,

This is because all mouse clicks are relative to the parent SciChartsurface. If you want to get the coordinates relative to the ModifierSurface itself, you have to perform a simple translation operation.

public override void OnModifierMouseMove(ModifierMouseArgs e)
{
   // gets the bounds of the ModifierSurface with respect to the RootGrid
   // which hosts the SciChartSurface
   var modifierRect = ModifierSurface.GetBoundsRelativeTo(RootGrid);

   // Translates the mouse point (from root grid coords) to ModifierSurface coords
   var mousePoint = base.GetPointRelativeTo(e.MousePoint, ModifierSurface);
}

Can you try the above translation and let me know if it works?

Hi Joerg,

Sounds like what you need is annotations! We have a rich annotations API as of SciChart v1.5, you can see this article which demonstrates how to use it:

Annotations Are Easy!

Also there is an MVVM sample that does the same thing in the demo app here:

Drag Horizontal Threshold Example

Now if you were to set up something like this:

• A SciChartSurface with two HorizontalLineAnnotations and two VerticalLineAnnotations
• A ViewModel with X1, X2, Y1, Y2 properties, type double. All properties should implement PropertyChanged
• Bind each HorizontalLineAnnotation.X1 to each X property in the ViewModel
• Bind each VerticalLineAnnotation.Y1 to each Y property in the ViewModel

When the user drags the mouse on an annotation you will be notified in the setter of the property in your view model. Likewise you can set the view model properties and the annotation positions will update.

Let me know if that helps,

Hello there,

As of SciChart v2.0 this is now possible. ScIChart supports unlimited X or Y Axes on the left, top, right, bottom of the chart. You can use this feature to place XAxis on the Left and YAxis on the Top as per our Vertical Charts Example.

Best regards,
Yuriy

Hi Danila,

Please take a look on this thread – Correlating metadata with datapoints. It shows several possible approaches to add additional information for data points in your series.

Hope it helps!

Hello Ian,

I’m cleaning the threads and found your solution to bind the Overview to the first SciChartSurface inside an ItemsControl

Hi Andrew

In the end I looked at this problem from a completely different angle and came up with this solution.

This is the full SciChartOverviewExtension code.

Thanks & Regards
Ian

SciChartOverviewExtension Source Code

public class SciChartOverviewExtensions
{
    public static readonly DependencyProperty ItemsControlParentSurfaceProperty =
        DependencyProperty.RegisterAttached("ItemsControlParentSurface",
        typeof(ItemsControl),
        typeof(SciChartOverviewExtensions),
        new PropertyMetadata(default(ItemsControl), OnItemsControlPropertyChanged));

    public static void SetItemsControlParentSurface(UIElement element, ItemsControl value)
    {
        element.SetValue(ItemsControlParentSurfaceProperty, value);
    }

    public static ItemsControl GetItemsControlParentSurface(UIElement element)
    {
        return (ItemsControl)element.GetValue(ItemsControlParentSurfaceProperty);
    }

    private static void OnItemsControlPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var overview = (SciChartOverview)d;
        var itemsControl = e.NewValue as ItemsControl;
        if (itemsControl == null)
        {
            overview.ParentSurface = null;
            return;
        }

        itemsControl.ItemContainerGenerator.StatusChanged += (_, __) =>
        {
            if (itemsControl.ItemContainerGenerator.Status != GeneratorStatus.ContainersGenerated) return;

            var item0Element = itemsControl.ItemContainerGenerator.ContainerFromIndex(0) as FrameworkElement;
            if (item0Element == null)
            {
                overview.ParentSurface = null;
                return;
            }

            item0Element.Loaded += (s, a) =>
            {
                var sciChartSurfaceOnLoad = item0Element.FindChild<SciChartSurface>();

                overview.ParentSurface = sciChartSurfaceOnLoad;

                overview.ParentSurface.RenderableSeries.CollectionChanged += (o, args) =>
                {
                    if (args.Action == NotifyCollectionChangedAction.Add)
                        overview.DataSeries = overview.ParentSurface.RenderableSeries[0].DataSeries;

                };
            };

        };
    }
}

Usage:

<ItemsControl x:Name="ItemsControl" ItemSource="{Binding ViewModelList}">
    <ItemsControl.ItemTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

<SciChartOverview local:SciChartOverviewExtensions.ItemsControlParentSurface="{Binding ElementName=ItemsControl}"/>

UPDATE v3.2

The above solution will only work with ItemsControl in WPF. It will not work with the SciChartGroup. To add an Overview in the SciChartGroup we have created an FAQ titled How to add a SciChartOverview to a SciChartGroup using the ScrollBar API in v3.2

Hope this helps!

Andrew

Hi Jonny,

Try testing Keyboard.Modifiers instead of e.Modifier to see if the CTRL key is pressed.

Then, try setting ExecuteOn=MouseLeftButton for the RubberBandXyZoomModifier.

Like this:

public class RubberBandXyZoomModifierEx : RubberBandXyZoomModifier
{
    public override void OnModifierMouseDown(ModifierMouseArgs e)
    {
        IsXAxisOnly = !e.IsMaster;

        if (!(Keyboard.Modifiers == ModifierKeys.Control))
        {
            base.OnModifierMouseDown(e);
        }
    }
}

public class ZoomPanModifierEx : ZoomPanModifier
{
    public override void OnModifierMouseDown(ModifierMouseArgs e)
    {
        if ((e.MouseButtons == MouseButtons.Left) && (Keyboard.Modifiers == ModifierKeys.Control))
        {
            base.OnModifierMouseDown(e);
        }
    }
}

Hope this helps!
Andrew