Pre loader

Axis labels near the start and stop are not aligned

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

Answered
1
0

Please see attached chart that my users will be seeing.

Y axis range is from 0 to 100. Notice the axis labels, these are all aligned with other major grid lines but for the ones at the top and the bottom.

Please let us know if and how we can fix it.

Version
6.5
  • You must to post comments
Good Answer
1
1

Hi Kapil

There is a good reason for this. The SciChartSurface can only draw to the area that it owns. This is shown in the green highlighted area below.

enter image description here

If the label were drawn any higher, it may clip to the edge of the ScichartSurface.

You can try setting AxisBase.AutoFitMarginalLabels = false, this will force the label to be shown at it’s exact location, but this might result in clipping.

Try it out, let us know if it works

Best regards
Andrew

  • You must to post comments
0
0

I understand and I like the default behavior (adjusting the labels). However, there is space around the chart using padding and I need to fulfill same as before requirement.

Is there anyway I can do it through NumericAxisViewModel (set AutoFitMarginalLabels to False)? All Y Axes are being created and added in my viewmodel.

  • Andrew Burnett-Thompson
    ok, am talking to the team about this to see if we can come up with a solution
  • You must to post comments
1
0

See attachment

  • You must to post comments
1
1

Hi Kapil

This should be really simple to apply the AutoFitMarginalLabels property on an axis when MVVM is used. Please see our documentation page about Styling a Series in MVVM

The technique for an axis is very similar

1/ Create a Style in Xaml with a stylekey
2/ Set the AxisViewModel.StyleKey equal to that string

Now you can apply properties like AutoFitMarginalLabels in the style.

Here’s an example (full project on github)

<Window x:Class="AxisMvvmApplyStyle.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AxisMvvmApplyStyle"
        xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <local:MainViewModel x:Key="vm"/>

        <!-- this style is applied to the YAxis by stylekey (see MainViewModel ctor) -->
        <!-- Styles can be anywhere. e.g. App.xaml, resource dictionaries or here in the same file as the SciChartSurface -->
        <Style x:Key="YAxisStyle" TargetType="{x:Type s:NumericAxis}">

            <!-- Certain properties can only be set in xaml/code, not via the viewmodel -->
            <Setter Property="BorderBrush" Value="Crimson"/>
            <Setter Property="BorderThickness" Value="2, 0, 0, 0"/>

            <Setter Property="TickTextBrush" Value="Crimson"/>

            <!-- this property allows you to override clipping of labels on the axis --> 
            <Setter Property="AutoFitMarginalLabels" Value="False"/>

        </Style>

        <!-- this style is applied to the XAxis by stylekey (see MainViewModel ctor) -->
        <Style x:Key="XAxisStyle" TargetType="{x:Type s:NumericAxis}">
            <Setter Property="BorderBrush" Value="ForestGreen"/>
            <Setter Property="BorderThickness" Value="0, 2, 0, 0"/>
            <Setter Property="TickTextBrush" Value="ForestGreen"/>
            <Setter Property="AutoFitMarginalLabels" Value="False"/>
        </Style>
    </Window.Resources>

    <Grid DataContext="{StaticResource vm}" Background="#222">
        <s:SciChartSurface Margin="20" 
                           YAxes="{s:AxesBinding YAxisViewModels}"
                           XAxes="{s:AxesBinding XAxisViewModels}">

        </s:SciChartSurface>
    </Grid>
</Window>

using System.Collections.ObjectModel;
using SciChart.Charting.Model.ChartSeries;
using SciChart.Data.Model;

namespace AxisMvvmApplyStyle
{
    public class MainViewModel : BindableObject // replace this for your BaseViewModel of choice
    {
        public MainViewModel()
        {
            YAxisViewModels.Add(new NumericAxisViewModel()
            {
                // Apply a style key here to apply a named style to this axis
                StyleKey = "YAxisStyle",
                AxisTitle = "Y Axis"
            });

            XAxisViewModels.Add(new NumericAxisViewModel()
            {
                StyleKey = "XAxisStyle",
                AxisTitle = "X Axis"
            });
        }

        public ObservableCollection<IAxisViewModel> YAxisViewModels { get; } =
            new ObservableCollection<IAxisViewModel>();

        public ObservableCollection<IAxisViewModel> XAxisViewModels { get; } =
            new ObservableCollection<IAxisViewModel>();
    }
}

This results in the desired behaviour:

enter image description here

Best regards
Andrew

  • You must to post comments
0
0

Perfect – got rid 10 lines of code in code behind through this trick. Also while, writing that code I introduced two bugs regarding refreshes and new axis creations. All that is gone now.
@Andrew – this trick is nice. Can you put this as part of the mvvm tutorials (if it is not there yet)? I am working with NumericAxisViewModel but I can define a style for NumericAxis

To make matters worse, i was also able to use this to pass FontFamily through data binding. Don’t know how and why but it works. It would be great if you can explain .

    <Style x:Key="YAxisStyle" TargetType="{x:Type s:NumericAxis}">

        <!-- Certain properties can only be set in xaml/code, not via the viewmodel -->
        <Setter Property="BorderBrush" Value="Blue"/>
        <Setter Property="BorderThickness" Value="2, 0, 0, 0"/>

        <Setter Property="TickTextBrush" Value="Blue"/>
        <Setter Property="FontFamily" Value="{Binding FontFamily}"/>

        <!-- this property allows you to override clipping of labels on the axis -->
        <Setter Property="AutoFitMarginalLabels" Value="False"/>

    </Style>

        YAxes.Add(new UnitAxis
        {
            DrawMajorBands = false,
            DrawMinorGridLines = false,
            DrawMinorTicks = false,
            StyleKey = "YAxisStyle",
            AxisTitle = "new Y Axis",
            FontFamily = "Arial"
        });

internal class UnitAxis : NumericAxisViewModel
{
    private string fontFamily;
    public UnitAxis()
    {

    }

    public string FontFamily { get => fontFamily; set => fontFamily = value; }
}
  • You must to post comments
Showing 5 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