Tag: Axis

Hi,

i have an horizontal line annotation in my chart at a fixed value (some hint for the user “minimum level”) that i always want to be visible. Thus, i’d like to set the axis/chart so that it always shows a range from 0 to 0.05, or larger range if the chart values exceed this range.
I’ve tried to set-up the VisualRangeLimit property to fit my needs but could not achieve my goal.

<s:NumericAxis AxisAlignment="Left"
               Id="MagnitudeAxis"
               VisibleRangeLimit="0, 0.05"
               AxisTitle="{lex:Loc MagnitudeAxisLabel}" />

Are there other options to achieve this or am i doing somthing wrong?

Hi,

I have some charts binded to a viewmodel. I wanted to produce a bar chart, so I want to modify the AxisAlignment.

If I specify a hardcoded alignment in the XAML, it works fine.

If I bind the alignment to the viewModel, the chart does not render, and I get the following error in the output:

 SciChartSurface didn't render, because an exception was thrown:
      Message: The specified Visual and this Visual do not share a common ancestor, so there is no valid transformation between the two Visuals.

Stack Trace:    at System.Windows.Media.Visual.TransformToVisual(Visual visual)
   at A.cac257c85637821690b32a44bda9b120f.cd0eaed29fc1e87dfe7aa912a7f678b57(FrameworkElement c5aaca7e2018a1512249ec2e2170b4cc6, UIElement c708323fb6eac118d4fd2c5913dc2a6ed)
   at A.cac257c85637821690b32a44bda9b120f.cd0eaed29fc1e87dfe7aa912a7f678b57(FrameworkElement c5aaca7e2018a1512249ec2e2170b4cc6, IHitTestable cc9d5fbe91f2861ee865bbb5439d3b84d)
   at Abt.Controls.SciChart.Visuals.Axes.AxisBase.GetAxisOffset()
   at Abt.Controls.SciChart.Visuals.Axes.AxisBase.GetAxisParams()
   at Abt.Controls.SciChart.Visuals.Axes.AxisBase.OnBeginRenderPass()
   at A.cda144392e546b245ef5bb1ee71f22b3a.c64a51c8ba6b7cbda8b9d9380d6337036(ISciChartSurface c17037e8328cd0abc02d2a6957dfa450c, RenderPassInfo c16b8d70d2b6ecad8f9fca7ac3f5177b8)
   at A.cda144392e546b245ef5bb1ee71f22b3a.c1a2306a5cc0452a04d135e77f0de4ff1(ISciChartSurface c17037e8328cd0abc02d2a6957dfa450c, Size cacf0a4a95d1143f0c11e20d4508e7132)
   at A.cda144392e546b245ef5bb1ee71f22b3a.RenderLoop(IRenderContext2D renderContext)
   at Abt.Controls.SciChart.Visuals.SciChartSurface.ca065c0b671221e0e603d0e9bf2792494()

This is the axis XAML:

 <s:SciChartSurface.XAxis>
                                    <s:NumericAxis AxisAlignment="{Binding XAxisAlignment}" LabelProvider="{Binding LabelProvider}" AutoTicks="False" MajorDelta="1" MinorDelta="1" DrawMinorGridLines="False">
                                    </s:NumericAxis>
                                </s:SciChartSurface.XAxis>

                                <s:SciChartSurface.YAxis>
                                    <s:NumericAxis AxisAlignment="{Binding YAxisAlignment}" AxisTitle="Number of crimes" GrowBy="0,1"/>
                                </s:SciChartSurface.YAxis>

And the properties I’m binding to:

public AxisAlignment XAxisAlignment { get; private set; }

public AxisAlignment YAxisAlignment { get; private set; }

Any help is appreciated.

Thanks,
Charbel

I have a few problems that I’m trying to address with y-axis labelling.

1. I am including a y-axis on the left side of my graph but want the text of the labels to be right-aligned. Each label uses two lines of text. How can I do that?
2. I want the margin of the text to be a specific width so that I can line up the y-axis of multiple scichart surfaces that are stacked vertically. How can I set each of my scichart surfaces to use a particular margin for the y-axis labelling?
3. The y-axis label text will wrap when I don’t want it to (see attached image — The text of the label should be “1m \n Left” and I am currently seeing “1m \n Lef \n t”). How do I turn off the wrapping of text on the y-axis?

———-

This is how I am currently implementing the y-axis:

NumericAxis(context).apply {
    drawLabels = true
    axisAlignment = AxisAlignment.Left
    this.labelProvider = labelProvider
    this.tickProvider = tickProvider
    drawMajorBands = false
    drawMajorTicks = false
    drawMinorTicks = false
    drawMajorGridLines = false
    drawMinorGridLines = false
    isLabelCullingEnabled = false
    visibleRange = DoubleRange(
            dataRange.first,
            dataRange.second
    )
    autoRange = AutoRange.Never
    tickLabelStyle = FontStyle(
            TypefaceManager.obtainTypeface(context, CustomTypeface.PROXIMA_NOVA_REG),
            context.resources.getDimension(R.dimen.results_screen_graph_labels_text_size),
            Color.LTGRAY
    )
}

Hi, guys

Is it possible to draw axis line at axis area? See attachment.

I want to paint my time axis like this:

Or just highlight last week, day, hour.
Is there way to apply style only on part of axis?

I am showing tooltip with CursorModifier. My tooltip bigger than SciChartSurface and I am using ClipModifierSurface=”False” in order to show whole tooltip. But in this case axis labels and scroll bar are on top of tooltip.
Described problem can be seen on Featured Apps > Scientific Charts > Oscilloscope Demo.
Is there any way to bring tooltip on top of chart surface?

Thanks
Samvel

Hi

I’m using auto range on a numeric axis. The data can be anything, but I want the axis to never have a range of less than 5.
E.g.: -100 to -95
E.g.: 17 to 22
E.g.: 0 to 5
etc.

What do I need to set to be able to do this? I have tried MinimalZoomConstrain and VisibleRangeLimit without success. Preferably something to set in XAML on my axis.

Thanks.

in IOS SDK there are SCIAxisRangeSyncronization and SCIAxisAreaSizeSyncronization for dealing with axis sync. I would like to ask are there any similar classes in Android to do this ? Thanks.

Hello,

I am trying to set the interval on the x-axis in a polar plot but it doesn’t appear to be accepting it and plotting accordingly. My axis definition is quite simple:

<s:SciChartSurface.XAxis>
       <s:PolarXAxis Name="TFxAxis" MajorDelta="15"/>
</s:SciChartSurface.XAxis>

I am plotting angles and radii so one data point might be (45, 1) and the next (50, 2) and so on where my visible range is TFxAxis.VisibleRange = new DoubleRange(-180.0, 180.0). Very simple plot but it keeps returning to a default of 1 on my MajorDelta for the x-axis and then showing major axes at 50 degree intervals. I’ve tried a variety of solutions but nothing seems to work properly.
Thanks,
Christina

Hi,

Can Axis show the value of 10-15 level data? Is there any limitation for the numeric axis?

take the SciChart Trader as an example, x-Axis is type of CategoryDateTimeAxis. I want a way to show the index of the time in the collection, when mouse moves over the price bar in some mode like Rollover or Cursor.

regards
chunxi

Hello!

I am trying to render a HeatMap and align labels next to squares (see the attached image). However, I am running into two issues.

Firstly, I am using RenderTransform to shift labels so that they are aligned with the squares instead of being on the borders between them. It works, but does not look good as I resize the control.

Second, the axes render the last label outside the view. I tried setting VisualRange and VisualRangeLimit but it did not help. It hides the last data column (or row) and still displays the last label.

Any suggestions on how I can solve it?

I am attaching a sample project.

Thank you in advance!

Hi, i’m developing an app in WPF and i found that it crashes when i’m dereferencing the user control where my chart lives in and have 1 or more points selected by code in one chart when the other one is not visible.

i would be very apreciated if someone could tell me a hint of where i have to look for the solution or what do this methods do or touch.

more data about the chart:

• I have 2 fastlinerenderable series each with 2 Yaxis for itselves and 2 shared XAxis.
• I also have a modified listbox which is have it’s sincronization synced to the chart.
• have a modifiergroup to pan,zoom and select.

this is my Selectionmodifier:

<scicharts:DataPointSelectionModifier
                        Name="ChartSelection"
                        SelectionFill="#B1B5B2B2" 
                        XAxisId="{Binding XAxisType, NotifyOnTargetUpdated=True}"
                        TargetUpdated="ChartSelection_TargetUpdated"
                        SelectionStroke="#009E9C9C"
                        IsEnabled="{Binding SelectionMode}" >

I think that this is the axis that breaks my program but it needs it to not crash when i select.

this is my stacktrace:

An unhandled exception of type ‘System.NullReferenceException’ occurred in SciChart.Charting.dll

en SciChart.Charting.ChartModifiers.DataPointSelectionModifier.DeselectAllPointMarkers()
en SciChart.Charting.ChartModifiers.DataPointSelectionModifier.OnXAxisIdDependencyPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

I tried to make a program that could replicate the error but i couldn’t.

thanks in advance.

Hi, I want to color the axis label by its value,
eg. value< 0 -> show with red color
value = 0 -> show grey color
value > 0 -> show green color

similar to this question, but in android platform, it seems the LabelProvider has function related to the value(string) formatting only. Is there any ways to styling the label? Thanks!

Is it possible to set different color to axis ticks and axis title.
In 2D-Chart i did it by changing the style of DefaultTickLabel:

<Style x:Key="NumericAxisForMvvm" TargetType="axis:NumericAxisForMvvm">

  <Setter Property="FontSize" Value="12" />
  <Setter Property="FontFamily" Value="Arial" />
  <Setter Property="FontWeight" Value="Bold" />
  <Setter Property="TickTextBrush" Value="Red" />

  <Setter Property="TickLabelStyle">
    <Setter.Value>
      <Style TargetType="s:DefaultTickLabel">

        <Setter Property="FontSize" Value="16" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="FontFamily" Value="Courier New" />
        <Setter Property="Foreground" Value="Blue" />

        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="s:DefaultTickLabel">
              <ContentControl Content="{Binding}"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              IsTabStop="False" 
                              Foreground="{TemplateBinding Foreground}" 
                              FontFamily="{TemplateBinding FontFamily}"
                              FontSize="{TemplateBinding FontSize}"
                              FontWeight="{TemplateBinding FontWeight}"/>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
    </Setter.Value>
  </Setter>
</Style>

Same procedure seems doesn’t work for 3D-Charts.
How can i achieve this?
Is that currently possible?

Best Regards
Silvester

SciChart WPF control

I’m trying to configure the axis range using VisibleRange. Is it possible that in Visible range, I set only min value and then max value is set automatically by tracking the maximum value series has? Same way, if I set max value of VisibleRange then min value is set automatically by tracking min value of the series? How to achieve the VisibleRange setting by just setting one of Min/Max value?

Hi there,

I’m trying to display little icons as axis labels using the LabelProvider API and NSAttributedString (with NSTextAttachmet). Is this supported? Here’s a minimal example:

import UIKit
import Foundation
import SciChart
import SciChart.Protected.SCILabelProviderBase

class ViewController: UIViewController {

    private lazy var chart: SCIChartSurface = {
        let c = SCIChartSurface(frame: .zero)
        c.xAxes.add(items: SCINumericAxis())

        let yAxis = SCINumericAxis()
        yAxis.labelProvider = SymbolLabelProvider()
        c.yAxes.add(items: yAxis)
        return c
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        SCIChartSurface.setRuntimeLicenseKey(myLicenseKey)

        view.addSubview(chart)
        chart.translatesAutoresizingMaskIntoConstraints = false
        let guide = self.view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            chart.leadingAnchor.constraint(equalTo: guide.leadingAnchor),
            chart.trailingAnchor.constraint(equalTo: guide.trailingAnchor),
            chart.topAnchor.constraint(equalTo: guide.topAnchor),
            chart.bottomAnchor.constraint(equalTo: guide.bottomAnchor),
        ])
    }
}

class SymbolLabelProvider: SCILabelProviderBase<SCINumericAxis> {

    lazy var numberFormatter: NumberFormatter = {
        let f = NumberFormatter()
        f.allowsFloats = true
        f.maximumFractionDigits = 2
        return f
    }()

    init() {
        super.init(axisType: ISCINumericAxis.self)
    }

    override func formatLabel(_ dataValue: ISCIComparable!) -> ISCIString! {

        let intValue = Int(dataValue.toDouble())
        let font = UIFont.init(descriptor: axis.tickLabelStyle.fontDescriptor, size: UIFont.systemFontSize * 4)

        if intValue.isMultiple(of: 2) {
            let i = UIImage(systemName: "circle", withConfiguration: UIImage.SymbolConfiguration(font: font))
            return NSAttributedString(attachment: NSTextAttachment(image: i!))
        } else {
            let attributes: [NSAttributedString.Key: Any] = [
                .font: font,
                .foregroundColor: UIColor.yellow,
            ]
            return NSAttributedString(string: numberFormatter.string(for: dataValue.toDouble())!, attributes: attributes)
        }
    }
}

See attached screenshot for the result.

If this is not supported: any suggestions / ideas for a workaround?

Thanks
—Matthias

Hi, I want to make the YAxis show only certain label (max, min, or others) only like the attached image. I want to ask if it is possible to show axis value unevenly. Thanks!

I am using the CategoryDateTimeAxis to fetch data in minute resolution for a few days and then append realtime data in one second resolution to it. Since the CategoryDateTimeAxis uses equidistance calculations I was wondering if it is possible to override that behaviour somehow? I.e. can I control the distance calculation somehow?

I am currently switching to CategoryDateTimeAxis because DiscontinuousDateTimeAxis provides to much of a performance hit for our use case.

Hello.
Thanks for previous answer but I can’t check how it work because of new problem. I develop WPF application and try to use MVVM as architecture pattern. In the Model part of my application I used a loop started in the new thread. In that loop I get some data which received to ViewModel and used as chart data. Looks as usual.
But then I tried to set visible range updated object which bound to axis I get exception ‘System.InvalidOperationException: ‘The calling thread cannot access this object because a different thread owns it.’ in my loop. I know it happens in WPF applications and need to use Dispatcher to solve it. But as I know if you try to use MVVM you not needed to use Dispatcher often because WPF-binding in most cases is thread-safe. That happend in my case? How to solve it?
Parts of my code:

XAML

<Window x:Class="HMI.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:s="http://schemas.abtsoftware.co.uk/scichart"
        xmlns:localVM="clr-namespace:MyCom.HMI.ViewModel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <localVM:HMIViewModel/>
    </Window.DataContext>
    <Window.Resources>
        <localVM:InverseBooleanConverter x:Key="InverseBooleanConverter"/>
        <localVM:ProcessStateToColorConverter x:Key="ProcessStateToColorConverter"/>
        <localVM:ProcessStateToStartedConverter x:Key="ProcessStateToStartedConverter"/>
        <localVM:ProcessStateToStoppedConverter x:Key="ProcessStateToStoppedConverter"/>
    </Window.Resources>
    <DockPanel>
        <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
            <StackPanel DockPanel.Dock="Left" Orientation="Vertical" Width="520">
                <Border DockPanel.Dock="Top" Margin="5" Padding="5" BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="5">
                    <StackPanel DockPanel.Dock="left" Orientation="Horizontal" Height="40">
                        <Ellipse Margin="5" Height="20" Width="20" HorizontalAlignment="Left" VerticalAlignment="Center" Stroke="Black" Fill="{Binding ProcessState, Converter={StaticResource ProcessStateToColorConverter}}"/>
                        <Label Content="State" Margin="5" Width="90" HorizontalContentAlignment="Left" VerticalContentAlignment="Center"/>
                    </StackPanel>
                </Border>
                <Border DockPanel.Dock="Top" Margin="5" Padding="5" BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="5">
                    <Grid DockPanel.Dock="Left" Height="300">
                        <s:SciChartSurface ChartTitle="Profil" RenderableSeries="{s:SeriesBinding RenderableSeries}">
                            <s:SciChartSurface.XAxis>
                                <s:NumericAxis AxisTitle="Position, m" VisibleRange="{Binding XVisibleRange, Mode=TwoWay}"/>
                            </s:SciChartSurface.XAxis>
                            <s:SciChartSurface.YAxis>
                                <s:NumericAxis AxisTitle="Size, um" VisibleRange="{Binding YVisibleRange, Mode=TwoWay}"/>
                            </s:SciChartSurface.YAxis>
                        </s:SciChartSurface>
                    </Grid>
                </Border>
            </StackPanel>
...

ViewModel

namespace MyCom.HMI.ViewModel
{
    public class HMIViewModel : BindableBase
    {      
        private readonly HMIModel _model = new();

        public HMIViewModel()
        {
            _renderableSeries = new ObservableCollection<IRenderableSeriesViewModel>();

            ((INotifyCollectionChanged)_model.TestControlData).CollectionChanged += (s, e) =>  { TestControlDataChanged(e); };

            InitCharts();
        }

...

        private ObservableCollection<IRenderableSeriesViewModel> _renderableSeries;
        public ObservableCollection<IRenderableSeriesViewModel> RenderableSeries
        {
            get { return _renderableSeries; }
            set
            {
                SetProperty(ref _renderableSeries, value, nameof(RenderableSeries));
            }
        }

        private IRange _xVisibleRange;
        public IRange XVisibleRange
        {
            get => _xVisibleRange;
            set
            {
                if (_xVisibleRange != value)
                {
                    SetProperty(ref _xVisibleRange, value, nameof(XVisibleRange));
                }
            }
        }

        private IRange _yVisibleRange;
        public IRange YVisibleRange
        {
            get => _yVisibleRange;
            set
            {
                if (_yVisibleRange != value)
                {
                    SetProperty(ref _yVisibleRange, value, nameof(YVisibleRange));
                }
            }
        }

        private XyDataSeries<double, double> _lineDataDiameter1;

...

        private void InitCharts()
        { // TODO
            _lineDataDiameter1 = new XyDataSeries<double, double>()
            { 
                SeriesName = "Diameter1"
            };

            RenderableSeries.Add(new LineRenderableSeriesViewModel()
            {
                StrokeThickness = 2,
                Stroke = Colors.SteelBlue,
                DataSeries = _lineDataDiameter1,
                StyleKey = "LineSeriesStyle"
            });
        }

        private void TestControlDataChanged(NotifyCollectionChangedEventArgs args)
        {
            if (args.Action == NotifyCollectionChangedAction.Add && args.NewItems?.Count > 0)
            {
                var testControlActualState = args.NewItems.Cast<TestControlActualState>();

                List<double> xValues = new();
                List<double> yValuesDiameter1 = new();

                foreach (var item in testControlActualState) 
                {
                    if (item.Diameter1 > 0f)
                    {
                        xValues.Add(item.FiberLength);
                        yValuesDiameter1.Add(item.Diameter1);
                    }
                }

                _lineDataDiameter1.Append(xValues, yValuesDiameter1);

                // TODO
                if (xValues.Count > 0)
                {
                    var cuurMaxValueX = xValues.Max();
                    XVisibleRange.Max = cuurMaxValueX;
                    XVisibleRange.Min = cuurMaxValueX - 7000f > 0 ? cuurMaxValueX - 7000f : 0;
                }

                // TODO
                if (yValuesDiameter1.Count > 0)
                {
                    var cuurMaxValueY = yValuesDiameter1.Max();
                    YVisibleRange.Max = cuurMaxValueY + 50;
                    YVisibleRange.Min = 0;
                }
            }
        }

Model

namespace MyCom.HMI.Model
{
    public class HMIModel : BindableBase, IDisposable
    {
        private readonly ObservableCollection<TestControlActualState> _testControlData;
        internal ReadOnlyObservableCollection<TestControlActualState> TestControlData { get; }

        public HMIModel()
        {
            _testControlData = new ObservableCollection<TestControlActualState>();
            TestControlData = new ReadOnlyObservableCollection<TestControlActualState>(_testControlData);
        }

...

        private void StartPollerThread()
        {
            _pollerCancellationToken ??= new CancellationTokenSource();

            if (!_pollerCancellationToken.IsCancellationRequested)
            {
                Task.Factory.StartNew(() => PollerDoWork(_pollerCancellationToken.Token), TaskCreationOptions.LongRunning);
            }
        }

        private void PollerDoWork(CancellationToken cancellationToken)
        {
            try
            {
                Thread.CurrentThread.Priority = ThreadPriority.Lowest;
                IsPollerStarted = true;

                while (!cancellationToken.IsCancellationRequested && (_isKeepConnection || _countOfTrying <= MAX_COUNT_OF_TRYING))
                {
                    try
                    {
                        _testControlData.Add(_emulator.GetTestControlActualState());

                        if (!_isKeepConnection && _countOfTrying > 0)
                        {
                            Thread.Sleep(_pollerTimeout / REASK_COEFICIENT);
                            continue;
                        }
                    }
                    catch
                    {
                        // Thread must be alive!!! ...ALWAYS!!!
                    }
                    Thread.Sleep(_pollerTimeout);
                }
            }
            finally
            {
                IsPollerStarted = false;
                _pollerCancellationToken = null;
            }
        }

Hi,

I’m actually working on new wpf application using Scichart and I’m wondering how to plot only XAxis and YAxis without labels and without gridlines.

Here is my code, I cannot not figure out what is missing to do that:

            <s:SciChartSurface.YAxis>
                <s:NumericAxis VisibleRange="{Binding ...}"
                               MajorGridLineStyle="{Binding ...}"
                               TickLabelStyle="{Binding ...}"
                               MajorDelta="{Binding ...}"
                               MinorDelta="1"
                               AutoTicks="False"
                               AxisAlignment="Left"
                               DrawMajorGridLines="false
                               DrawMinorGridLines="false"
                               DrawMajorBands="false"
                               DrawMajorTicks="false"
                               DrawMinorTicks="false"
                               DrawLabels="false"
            </s:SciChartSurface.YAxis>


        <Style x:Key="NoGraphGridLineStyle" TargetType="s:NumericAxis">
            <Setter Property="Visibility" Value="Collapsed" />
        </Style>

Hi SciChart support,

we experience problems with clipping x axis values, depending on x-axis value range.
assume we have xaxis range from 1000000 to 1000001 and a diagram with a margin of lets say 10 pixels to the right of the container control. Depending on the zoom, the label of the mostright xaxis value(e.g. “1000001”) may be clipped just because the string is just too long. Would you recommend to change the margin dynamically to avoid the clipping or is there a way to prevent the chart from putting the rightmost xaxis value label if it exceeds the diagram bounds?

Hope you could help me.

Thanks in advance, Andreas

Someone recently asked the question on priority support tickets

Q: How do I have two YAxis on the left and right of the chart but with
the same VisibleRange?

e.g. how to mirror the YAxis on both sides of the chart

We are replicating the answer below for benefit of our userbase:

Hi,

I’m trying to achieve the looks of DateTimeCategory XAxis as shown on uploaded screenshot.

Formatting a single row of tick labels is not a hard task (setTextFormatting). The problem arises when there are 2 rows with same frequency (days of the week and dates) and third row with lower frequency (years).

I tried using new line character in text formatting property to break the line for days and dates and it didn’t work. I also tried having two axes bound to the same data series, each one having different formatting and majorDelta, but it seems that they don’t stack up (only first one added is shown).

Any ideas?

I’m trying to have a two charts which have a x-axis points (datetime) that doesn’t intersect. And i want charts was synchronized like this:

How you can see here upper chart doesn’t have a point at 10.12.2013, but lower has. Can i reach same effect by SciChart?