Pre loader

Tag: X-Axis

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

0 votes
0 answers
702 views

Forked from one of the examples and tried re producing. when rotation is enabled the text overlaps with the axis title
https://codepen.io/govam/pen/Yzgxjjm

1 vote
4k views

The format of the set DateTimeAxis x-axis is (“yyyy-MM-dd hh:mm:ss”), but when the chart is enlarged, if the range is short, it changes to (“hh:mm:ss”). I want to display year/month/day information as well, even if the range is short. Please answer with the MVVM model.

  • Lee Ji Un asked 5 months ago
  • last active 5 months ago
1 vote
2k views

Hi, I want to create info boxes between xAxis and chart, info box will contain text, but the width/position of the box will be base on the xAxis and should sync with the chart (zoom etc). For example, if xAxis is from 1-100, and the first info box start from 1 to 10, then the width/position of the box should cover from 1-10, and if I zoom between 1-10, then info box should also sync and expand.

So far, I have created it using horizontal stacked xAxes and custom axis layout strategy provided by you. But the issue is that the stacked xAxes are not sync with the chart, for now, to make it seem sync, I am recalculating stacked axis length when zoom. But the issue comes when there should be gap between the info boxes, for example, if xAxis is 1-100 and the first box is 1-10 and the second box is 20-40, then there is a gap of 10 between the first and second. Right now, those gap are filled using empty xAxes, but they are not correct. When there is gap, the position of the boxes are wrong.

  • First image is my current implementation of it using custom axis layout and stacked xAxes.
  • Second image is how it look when zoomed
  • Third image is the gap issue with the current implementation
  • Fourth image is how the correct implementation should look like.

Codesanbox example:
https://codesandbox.io/s/scichart-stacked-xaxis-stacked-length-issue-3knt23?file=/src/App.tsx

  • Nung Khual asked 7 months ago
  • last active 7 months ago
0 votes
6k views

Hello! I am try to create chart with axis on top in my react native app, chart is create succesfuly, but when I start add annotation – it shift to top by axis height – whats may be wrong?

`

// create
surface = new CSciChartSurface(context);
surface.setRenderSurface(new RenderSurface(context));

// Initialize the SciChartBuilder
SciChartBuilder.init(context);

// Obtain the SciChartBuilder instance
sciChartBuilder = SciChartBuilder.instance();

 xAxis = sciChartBuilder
      .newCategoryDateAxis()
      .withTextFormatting(DateChartFormatter.defaultDateFormat)
      .withGrowBy(0.0d, 0.04d)
      .withDrawMajorGridLines(true)
      .withDrawMinorGridLines(false)
      .withDrawMajorBands(false)
      .withDrawMajorTicks(false)
      .withAxisAlignment(AxisAlignment.Top)
      .build();
// same yaxis and any

VerticalLineAnnotation verticalLine = sciChartBuilder.newVerticalLineAnnotation()
        .withPosition(10, 16)
        .withStroke(2, ColorUtil.Orange)
        .withIsEditable(true)
        .build();

Collections.addAll(surface.getYAxes(), yAxis);
Collections.addAll(surface.getXAxes(), xAxis);
Collections.addAll(surface.getRenderableSeries(), lineRenderableSeries);
Collections.addAll(surface.getAnnotations(), verticalLine);

// add to view
this.addView(surface);

`

1 vote
2k views

The project is developed on SciChart JS.

The x axis is date time numeric and y axis is numeric.

There is a option for the user to select the x axis interval. The interval values are 5 Min, 10 Min, 15 Min, 30 Min, 1 Hour, 6 Hour, 12 Hour, Days, Weeks, Months & Years.

When the user the selects a interval in the select option, the x axis should be updated with the selected interval.

For Example, If the user selects the 5 Min in the select option, then the x axis interval should be 5 Min.

For 5 Min X Axis Interval

16-Jan-2023 07:00
16-Jan-2023 07:05
16-Jan-2023 07:10
16-Jan-2023 07:15
16-Jan-2023 07:20
16-Jan-2023 07:25
16-Jan-2023 07:30

For 1 Hour X Axis Interval

16-Jan-2023 07:00
16-Jan-2023 08:00
16-Jan-2023 09:00
16-Jan-2023 10:00
16-Jan-2023 11:00
16-Jan-2023 12:00
16-Jan-2023 13:00
16-Jan-2023 14:00

So let me know how to change the interval in the x axis (date time numeric) based on the selection.

I have attached the zip file which contains the HTML file.

  • Leo Leslin asked 1 year ago
  • last active 4 months ago
0 votes
4k views

When I try to bind VisibleRange as a simple binding on the XAxis it works perfectly.

                <scichart:SciChartSurface.XAxis>
                    <scichart:NumericAxis AxisTitle="Tempo (s)" 
                                          VisibleRange="{Binding XVisibleRange, Mode=TwoWay}"/>
                </scichart:SciChartSurface.XAxis>

But, in my case I have only one chart beeing displayed but two “RenderableSeries” in which only one of them is displayed, accordingly to the user selection. I use triggers for this and it works like a charm.

                <scichart:SciChartSurface.Resources>

                    <Style TargetType="{x:Type scichart:SciChartSurface}">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=DAQ1_Selected, Path=IsChecked}" Value="true">
                                <Setter Property="RenderableSeries" Value="{scichart:SeriesBinding RenderableSeriesViewModels[0]}"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding ElementName=DAQ1_Selected, Path=IsChecked}" Value="false">
                                <Setter Property="RenderableSeries" Value="{scichart:SeriesBinding RenderableSeriesViewModels[1]}"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>

                </scichart:SciChartSurface.Resources>

Now I’m trying to set the “VisibleRange” of each “RenderableSeries” with triggers but I cannot achieve that because there is no option to binding on the setter.

<scichart:SciChartSurface.XAxis>
                            <scichart:NumericAxis AxisTitle="Tempo (s)" 
                                              GrowBy="0.01,0.01">

                                <Style TargetType="{x:Type scichart:NumericAxis}">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding ElementName=DAQ1_Selected, Path=IsChecked}" Value="true">
                                            <Setter Property="VisibleRange" Value="{scichart:AxesBinding XVisibleRange[0], Mode=TwoWay}" />
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding ElementName=DAQ1_Selected, Path=IsChecked}" Value="false">
                                            <Setter Property="VisibleRange" Value="{scichart:AxesBinding XVisibleRange[1], Mode=TwoWay}" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>

                            </scichart:NumericAxis>
                        </scichart:SciChartSurface.XAxis>

On the “value” of Setter I have only the following options:

  • AnnotationsBinding AxisBindingBinding MultiBindingCompatible
    SeriesBinding ThemeBinding VerticalLinesBinding

My question is:
Is there a way to binding “VisibleRange” on “Style.Triggers”?

Thank you,
Eduardo Arruda

0 votes
12k views

Hello,

At right chart we have show only one X-axis which needs to update in real time .whenever new values will come we have to update in X-axis in itself instead of adding new line at X-Axis.

Each time New Y – axis will come that will append at left chart (Can be consider left chart showing history of right chart)

Let me know if anything further requred

Thanks.

0 votes
7k views

Hi , many of the charts provide a way to set the date on the x axis for the data series and that makes the axis match the DataSeries value defined for that axis, but for heatmap dataseries when you define xType as date the xAxis of type date is not displaying on surface, I don’t know what I’m doing wrong and there is no sample for dates on GitHub , the samples only use int , would be great if you can provide a date sample for the heatmap , thanks

0 votes
5k views

Hi,

I have a surface with two x-axes and one y-axis. I am plotting 2 lines, which both have a numerical axis for their x-axis. I would like to be able to pan the lines so that I can align them for further analysis. However, I want the scaling on the two x-axes to stay identical. I have implemented the panning, which was straight forward using the XAxisDragModifier DragMode=”Pan”, so that is sorted. However, the scaling on the two axes is not identical, as each of the two lines have values for different x-ranges. This means that when I overlay them, one is more stretched out relative to the other.

Is there a way to lock the scaling for x-axes? See image below, I would like the red lines to be in sync, and equally big. So that 5 cm on the first x-axis is an equal amount of time as 5 cm on the second x-axis

Thank you,
-Lars

1 vote
6k views

iPhone 6, OS 12.4.3., X-axis, Y-axis texts are shown in inverted text. We can see this issue if we download the AppStore version of SciChart app

1 vote
5k views

We are using stacked bar chart, and showing only 6 bars visible at a time.
In the X-Axis, the month labels are missing for alternate months & only displays all month label as a flash when graph is being scrolled. Is there any way to fix this.

0 votes
4k views

Hi
I have a fifo scrolling chart
When I set the axis visibleRangeListener, the chart performance goes down and it gets an exception.
what is the solution?

0 votes
11k views

How can I shift my X Axis position upwards? I need to shift X Axis so that I can place some labels below it.

  • Anil Soman asked 5 years ago
  • last active 5 years ago
1 vote
7k views

I have high sampling data.

Data’s diff is 1 ~ 5 tick.

If data append on chart, do not display at each tick.

I want to append 1 tick diff data, and right display.

How to do set chart property or what should I do?

1 vote
12k views

Hello everyone.

I have chart with adding data every second.

What i want to do:
– by dragging finger left, right – chart scrolls left and right (can go to past data, etc)
– by two fingers zoom gesture – it zooms (only horizontally with autorange by Y axis)
– i set a visible range limit to the right in this way: user can scroll to the right xMax to be in the middle (currently this part not working – and axis zooming, when i continue scrolling to the right)

I tried a lot of different modifiers, but none of them was ok.

My setup:

lineDataSeries.addObserver(new IDataSeriesObserver() {
            @Override
            public void onDataSeriesChanged(IDataSeries<?, ?> iDataSeries, int i) {

                long addTime = 30_000 * currentTimeframe;

                runOnUiThread(() -> {
                    DateRange dateRange = new DateRange();

                    dateRange.setMinMax(new Date(0), new Date(lineDataSeries.getXRange().getMax().getTime() + addTime));

                    mSciChartSurface.getXAxes().getDefault().setVisibleRangeLimit(dateRange);
                });
            }
        });

final DateAxis dateAxis = sciChartBuilder.newDateAxis()
            .withAutoRangeMode(AutoRange.Never)
            .withDrawMajorTicks(true)
            .withDrawMinorTicks(false)
            .withDrawMinorGridLines(false)
            .withAutoFitMarginalLabels(false)
            .withTextFormatting("HH:mm:ss")
            .build();
    dateAxis.setMinimalZoomConstrain(25_000L * currentTimeframe); // 25 - 300 points
    dateAxis.setMaximumZoomConstrain(300_000L * currentTimeframe);

final NumericAxis yAxis = sciChartBuilder.newNumericAxis()
            .withAutoRangeMode(AutoRange.Always)
            .withGrowBy(new DoubleRange(0.1d, 0.1d))
            .withTextFormatting("#.000000")
            .withAutoFitMarginalLabels(false)
            .withDrawMinorTicks(false)
            .withDrawMinorGridLines(false)
            .build();
    yAxis.setMinimalZoomConstrain(0d);

ModifierGroup additionalModifiers = sciChartBuilder.newModifierGroup()
            .withPinchZoomModifier().withXyDirection(Direction2D.XDirection).withScaleFactor(2).build()
            .withZoomPanModifier().withReceiveHandledEvents(true).withXyDirection(Direction2D.XDirection).withClipModeX(ClipMode.ClipAtMax).build()
            //.withZoomExtentsModifier().withReceiveHandledEvents(true).withXyDirection(Direction2D.XDirection).build()
           //
            .withXAxisDragModifier().withReceiveHandledEvents(true).withDragMode(AxisDragModifierBase.AxisDragMode.Pan).withClipModeX(ClipMode.ClipAtMax).build()
            //.withYAxisDragModifier().withReceiveHandledEvents(false).withDragMode(AxisDragModifierBase.AxisDragMode.Scale).build()
            .build();
0 votes
8k views

Hello,
I’m creating a chart where the x-axis are dates. I want to load more (past) data when a button is clicked or when the visible range satisfies some condition. I have been able to do that using the InsertData function with index = 0 (in order to insert in the beginning of the series), but my problem now is how to keep the position I had before inserting the new data. Right now, after the insertion, the x-axis visible range’s indexes are the same instead of being moved to the right in order to show the same part of the data as before.

I have tried different ways to modify the visible range (by moving the range taking into account the new data size) but none of them have performed well.

I would like to display the same before and after inserting the previous data, so when the user scrolls he can find more data on the left but he is shown the same range of data as before.

I’m using the CategoryDateAxis as x-axis and the NumericAxis as y-axis (you can see the configuration of those axis below). The renderable series is a FastCandlestickRenderableSeries and the data series is an OhlcDataSeries<DateTime, double>.

Btw, I’m using the Xamarin wrapper for Android.

Could you help me with this issue?

Thanks!

var yAxis = new NumericAxis(this.Context)
{
        GrowBy = new DoubleRange(0, 0.1),
        AutoRange = AutoRange.Always
};

var xAxis = new CategoryDateAxis(this.Context)
{
       GrowBy = new DoubleRange(0, 0.1),
       VisibleRange = new DoubleRange(dataCount - InitialCandlesShown, dataCount + RightCandlesMargin),
       VisibleRangeLimit = new DoubleRange(-2.0, dataCount + RightCandlesMargin),
       MinimalZoomConstrain = new Java.Lang.Double(MinimumCandlesShown)
 };
0 votes
9k views

Hello support team,

We have to realize the following request:
– Yt chart with DateTime as X-axis and double values on the Y-axis
– The chart should display a user-defined area on startup (e.g. 20 sec) After the chart has run for 20 seconds ( i.e. 20 seconds), the animated scrolling should start. By default, the chart behaves as follows: The X-axis area fills up to 20 seconds and then starts scrolling. We want the chart to display 20 seconds on the X-axis at the start and fill up.

I am aware that I can implement this behavior myself. However, the question arises whether I can realize this directly with a basic functionality.

Thank you!

0 votes
0 answers
8k views

Hello Guys
I want to know how to set up a Xaxis major line manually.(NumericAxis )

For example,
If the range of the x-axis is 1 to 100

Major lines are 0,10,30,35,50 … 100

I want to set it freely.

1 vote
11k views

When I embed my view controller in a navigation controller the top of the chart is hidden behind the navigation bar. So I went to the storyboard and found the view controller attributes section called “extend edges” and turned off the option called “under top bars”. This fixes the top of the chart. Now the bottom of the chart drops off the bottom of the screen. The x-axis is completely missing. Does SciChart support this case?

0 votes
12k views

I am trying to use SciChart library for my project and find out whether it satisfy all requirements.

I am currently trying to display the ECG signal. Therefore the data is coming in realtime.

I have the following configuration

 final NumericAxis xAxis = mSciChartBuilder
                .newNumericAxis()
                .withAxisTitle("Time (seconds)")
                .withDrawLabels(false)
                .withDrawMajorTicks(false)
                .withDrawMinorTicks(false)
                .withDrawMajorBands(false)
                .withDrawMajorGridLines(false)
                .withDrawMinorGridLines(false)
               // .withVisibleRange(0, 2040)
                .withAutoRangeMode(AutoRange.Always)
                //.withAutoRangeMode(AutoRange.Never)
                .build();
        final NumericAxis yAxis = mSciChartBuilder
                .newNumericAxis()
                .withAxisTitle("Voltage (mV)")
                //    .withGrowBy(0.1d, 0.1d)
                .withDrawLabels(false)
                .withDrawMajorTicks(false)
                .withDrawMinorTicks(false)
                .withDrawMajorBands(false)
                .withDrawMajorGridLines(false)
                .withDrawMinorGridLines(false)
                .withVisibleRange(Short.MIN_VALUE, Short.MAX_VALUE)
                .build();

It works but the X axis a little bit scaled/compress.

Here is the result

enter image description here

I need to make it a bit wider.

How can I do this ?

I have tried to set range manually like that

.withVisibleRange(0, 2040)

However in this case it doesn’t show anything.

I would be grateful for any help.

UPDATE

https://drive.google.com/file/d/17p1E-Z_YxiVh_JtwEvlM1PaTVyJ7eyz7/view

0 votes
9k views

Is there an example of building a custom axis using a long or ulong?

So far I’ve tried implementing AxisBase and created necessary types for the given interfaces (IRange, IDeltaCalculator, IAxisDelta). But after implementing the minimum set of pieces, the chart comes up blank.

Also strangely the only two functions that get called on the AxisBase implementation are

GetDefaultNonZeroRange()
IsOfValidType() — This gets called with a DoubleRange rather than my ULongRange.. Somehow a DoubleRange is being introduced, but I can’t see how.

Is there any good documentation/design info out there about how to do this?

I have attached the solution I’ve been working with.

0 votes
9k views

Hi, guys

I’m working with SCIDateTimeAxis type of the X-axis. So my question Is there possibility of skipping non-value period?

Best regards,
Sushynski Andrei

0 votes
9k views

Hi,

I’m trying to limit the x-axis panning up to an annotation that I’ve drawn on the graph. This annotation can be beyond the current data’s position (i.e. data’s timestamp is at 5/4/2017 11:00:00, annotation’s position is at 5/4/2017 16:00:00). Is there a method, or any way that I can use to limit the x-axis panning up to the annotation’s position instead of limiting it to the data series’ max X?

Regards.

0 votes
13k views

I am using trial version of SciChart and doing some tests.

I need to bring scroll bar on top of X axis.

After some research and parsing visual tree, I am planning to change style of SciChartSurface and replace axis and scroll bar, which are placed inside stack panel.

Is this right solution? If AxisAlignment is Top, visual tree may differ. If this is right way to go, where can I find style of surface? Bland does not recognize chart and I can’t use it.

Thanks
Samvel

0 votes
10k views

I have attached a picture showing what a depth track looks like (circled in red). The depth track takes the place of an X axis. In the picture the depth track is between a geology track above, and a normal log track below. Usually one depth track serves as the x axis for multiple plots, which are referred to as tracks.

I think that SciChart elements can be modified to produce this, but I am not sure where to start. Should I consider the depth track as just a plot with no curves and with the tick marks and x axis on the inside, or should I start with an independent x axis enclosed in a box?

1 vote
15k views

From reading the material on the site I know how to do what I want to do in xaml:

    <Style x:Key="AxisLabelStyle" TargetType="s:DefaultTickLabel">
    <Setter Property="RenderTransform">
        <Setter.Value>
            <RotateTransform Angle="30"/>
        </Setter.Value>
    </Setter>
    <Setter Property="HorizontalAnchorPoint" Value="Left"/>
</Style>

Now however my chart will be using two diffrent x-axis, one numeric and one with date and time. Both axis are defined in code:

            _xAxisNum = new NumericAxis
        {
            ...
        };

        _xAxisDat = new DateTimeAxis
        {
            ...
        };

        InitializeComponent();
        sciChartSurface.XAxis = _xAxisDat;

What code must I add to my x-axes to get the same result as the xaml above accomplishes? Or can I achieve what I want with a LabelProvider?

1 vote
14k views

Hi, I’m trying to position vertical line annotations on a chart. I want to position them on a visible part of the chart, but I need to use the Absolute coordinate mode as I want the annotation to move with the data as the chart is panned or zoomed.

My question is then: how can I find the currently visible extents of the X axis? If the chart is zoomed or panned I need to know what the left and rightmost visible X-axis values are (independent of the data).

1 vote
10k views

Hello,

I have a SciChart with as XAxis a DateTimeAxis and a dynamic/changing number of YAxes. Under the chart I have two DatePickers, the left one linked to the start of the DateTimeAxis, the right one linked to the end of the DateTimeAxis.

Now I would like to horizontally align these DatePickers right under the XAxis (so not just under SciChartSurface, see attached screenshot). How do I do this ? Note that the number of YAxes change, so I cannot just hardcode a margin.

Thanks in advance for any help,
Stefaan

  • srillaert asked 10 years ago
  • last active 10 years ago
1 vote
11k views

I have a simple columns chart. The user can use a button that will basically change the data entirely.

The chartsurface has SeriesSource binded. Reassigning the series is changing the data on the chart, but the X-Axis is not being refreshed, so the data is showing up on the wrong part of the chart.

I uploaded 2 images to show the problem. In the “after” image, the long column should actually be at the “10+” label. If I open the same data in a new chart it shows correctly.

What’s the best method to entirely refresh a chart’s data?

Thanks in advance

  • cabdo asked 10 years ago
  • last active 10 years ago
Showing 29 results

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies