Pre loader

Tag: xaxis

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

1 vote

I’m just started to use SciChart and I have a question. How I can mirror XAxis in order to values will be increased from right to left. It is not negative scale but this view is more familiar for users (now I remake the old application). P.S. And be the best if additionally you show me how to make static XAxis with chosen range. I see the example in demo’s “Create Realtime Charts” section (my chart will be real-time too), but my application created via MVVM and I think this example not fully applicable to my case (but I fink after some investigation I will can remake example, but if you help me it be easier).

1 vote

I want to create two xAxis, the first one will be a normal xAxis and the second one will be an array of date ranges, but the issue then is that since all the xAxis are inside one array together, they all are stacked on top of each other.

I tried sciChartSurface.layoutManager.bottomOuterAxesLayoutStrategy = new BottomAlignedOuterHorizontallyStackedAxisLayoutStrategy(); but that only create all xAxis into one line of xAxis.

I want two line of xAxis, where the first one is normal, but second xAxis should be Horizontally Stacked Axis Layout.

The first image is before horizontal stacked is applied and the second after.

The third image show the xAxes array from sciChartSurface.xAxes, the index(0) of the array is the first xAxis, which should be normal, and the rest (index 1 – 8) should be horizontally stacked.

The horizontal stacked xAxis should be right below the first xAxis.

  • Nung Khual asked 9 months ago
  • last active 9 months ago
1 vote


When annotations and the rollover modifiers are displayed on the very left side of a chart they align with the center of the candlesticks on the chart. However, as they get displayed toward the right side of the chart they get more and more offset to the right side of the candlestick.

Can anyone point me in the right direction to figure out how to fix this issue seemingly with my xAxis?

See attached screenshots,

  • Leland asked 11 months ago
  • last active 11 months ago
1 vote

Hi, I want to create an event that will run when the user checks a zoom square. (see picture: zoom_square.png)
My motivation:
I run realtime samples and set:


It bothers me that I can’t zoom the X axis (because the AutoRange…) The way I found to solve it is to change the NumericAxis.GrowBy property. But I want it to happen automatically when the user checks a zoom square and not manually like it is now.

I added pictures:
1. A given situation in which the samples are seen. (AutoRange="Always")
2. What happens when you zoom (either with the zoom square or with the mouse wheel)- The Y axis is stretched but the X axis is not.
3. What does the graph look like if the user drags the X-axis to the sides and changes the NumericAxis.GrowBy ==> desired state.
I want step 3 to happen automatically according to the size of the square the user marked. (According to the size of the square, I will know how to define the appropriate NumericAxis.GrowBy)


1 vote

Hello I have been having a difficult time getting the correct time displayed on my xAxis and labels.

Passing in an xValue to an OHLC data series of 60 and the setting cursorLabelFormat: ENumericFormat.Date_DDMMHHMM this should produce a label “01/01 00:01” With the year as 1970.

When the computers timezone is set to UTC + 0 this behaves as expected.

However when the computers timezone is set to anything negative (UTC – 7) the label is formatted as “31/12 00:01” with the year 1969. If scichart is trying to convert to local time I would expect a reading of “31/12 17:01” 1969.

And when the timezone is set to anything positive (UTC + 7) the label is formatted as it is UTC +0 “01/01 00:01” 1970 again I would expect the hour to corrispond to the UTC offset if scichart is trying to convert to local time.

Looking at the later case I would assume that no time conversion is taking place which is what I would prefer. But looking at the former case (UTC -X) there appears to be some manipulation happening somewhere, I just have not been able to find any documentation explaining this. Am I missing something to get this to work properly out of the box without a custom label provider?

Thank you,


I do not want to worry about timezones. I want sciChart to plot the time that I give it. Again this is acting as expected when the computer timezone is in anything greater than UTC 0. But when the computer timezone is less than UTC 0 the label and axes are showing a date 24 hours prior to what I give it.

See attached images for the error. Note the only change that is happening is changing the computer timezone from UTC – 4 to UTC + 4.

See below for code setting up the chart.

Why is changing the computer timezone affecting the data labels?

export async function example(element) {
    let { sciChartSurface, wasmContext } = chartInstances.hasOwnProperty( && chartInstances[];

    // initialize sciChart and add created chart to chartInstances
    if (sciChartSurface === undefined) {
        const newContext = await SciChartSurface.create(;
        sciChartSurface = newContext.sciChartSurface;
        wasmContext = newContext.wasmContext;
        chartInstances[] = { sciChartSurface, wasmContext };

    //create and add xAxis
    let xAxis = new CategoryAxis(wasmContext, {
        drawLabels: true,
        drawMajorTickLines: true,
        drawMinorTickLines: true,
        axisAlignment: EAxisAlignment.Bottom,
        autoRange: EAutoRange.Once,
        cursorLabelFormat: ENumericFormat.Date_DDMMHHMM,
        labelFormat: ENumericFormat.Date_DDMMYYYY,


    //create and add yAxis
    let yAxis = new NumericAxis(wasmContext, {
        maxAutoTicks: 5,
        autoRange: EAutoRange.Always,
        growBy: new NumberRange(0.3, 0.11),
        axisAlignment: EAxisAlignment.Right,
        labelPrecision: 4

    //add chart modifiers
    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new RolloverModifier({ modifierGroup: "first", showTooltip: false }));
    sciChartSurface.chartModifiers.add(new CursorModifier(
            crosshairStroke: "#9598a1",
            crosshairStrokeDashArray: [10, 5],

    //apply desired theme
    sciChartSurface.applyTheme(new SciChartJSDarkTheme());

    //create three bars 
    _ohlcDataSeries = new OhlcDataSeries(wasmContext, {
        xValues: [60,120,180], //1 min, 2 min, 3 min post epoch
        openValues: [10,10,10],
        highValues: [15,15,15],
        lowValues: [5,5,5],
        closeValues: [11,11,11],
        dataSeriesName: "PriceDataSeries"

    //create and style fastCandRendSeries
    const fcRendSeries = new FastCandlestickRenderableSeries(wasmContext,
            dataSeries: _ohlcDataSeries,
            strokeThickness: 1,
            dataPointWidth: 0.5,
            brushUp: "#50ff50B2",
            brushDown: "#ff5050B2",
            strokeUp: "#50ff50",
            strokeDown: "#ff5050",
            animation: new WaveAnimation({ fadeEffect: true, duration: 800 })
  • Leland asked 2 years ago
  • last active 2 years ago
0 votes

I’m trying to have a transparent axisLabelFill for my yAxis and a black axisLabelFill for my xAxis. How can I achieve that?

0 votes


I’d like to set line chart’s date xAxis ticks to be exactly one day apart in a way that where the label is shown, the time would be exactly 24:00.
I know I can set the minorDelta() and majorDelta(), but what value should I provide them? The minor tick when I zoom in should be 2 minutes and the major tick should be 24 hours.

0 votes

We have Scichart 2.32 version software. In this version, we are using DateTimeAxis format on XAxis. We are showing XAxis Labels in this Text Formatting as “yyyy-MM-dd HH:mm:ss”.
But now, we need to changing the TextFormatting of XLabels.
We need to show time representation of XLabels in Minutes format. We need to show only minute representation during the Time span in the live chart.

How can we achieve this TextFormatting in 2.32 version software? If not, can we achieve this Formatting in the newer versions?

  • gamze asked 5 years ago
  • last active 5 years ago
0 votes


I have several chart panes that share a mouse group and a shared visual range (I inject the shared visual range of type IRange in the constructor of the pane view model). I then set the XAxis visual range to the shared visual range inside each pane view model. However, when I use either of the below approaches outside of the pane view model to adjust the min and max of shared visual range, the Xaxis.VisualRange of each pane does not reflect that change.

Approach A: _sharedVisualRange.Min = ….; _sharedVisualRange.Max = …
Approach B: _sharedVisualRange.SetMinMax(….)

Neither approach actually impacts the XAxis.VisualRange.Min/Max.

Initially when I created the XAxis in code I set its VisualRange equal to the shared visual range that was injected via constructor, like :

XAxis = new CategoryDateTimeAxis()
VisualRange = _sharedVisualRange,

Please note that all the above refers to code in the view model. I bind the XAxis in the pane view model to the XAxis of the surface in xaml.

My entire synchronization heavily relies on the assumption of this working, but it does not.

  • bbmat asked 6 years ago
  • last active 6 years ago
0 votes

our app is about Futures. we will buy license for IOS and Android.

we found some question.

so we need show very small values, like Euro exchange’s values will be from 1.1981 to 1.2008.
its Tick Size is 0.0001 .

but we use LogarithmicNumericAxis with OhlcDataSeries<Date, Double> , surface still linear scale.

other question.
how to custom LogarithmicNumericAxis’s “TextFormatting” like “$0.0000”

  • Rey Liang asked 6 years ago
  • last active 6 years ago
0 votes

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
                .withAxisTitle("Time (seconds)")
               // .withVisibleRange(0, 2040)
        final NumericAxis yAxis = mSciChartBuilder
                .withAxisTitle("Voltage (mV)")
                //    .withGrowBy(0.1d, 0.1d)
                .withVisibleRange(Short.MIN_VALUE, Short.MAX_VALUE)

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.


0 votes

I have two charts (separate SciChartSurface via SciChartGroup) stacked on top of each other. Each chart has its own X-Axis and both charts’ mouse interaction are linked via MouseGroupId. All fine so far.

I then generate a lineseries ‘series1’ on the first surface, 1000 datapoints, time stamps are 1 minute apart. I also generate a second line series ‘series2′ on the second surface, but this series’ first time timestamp start 2 hours later than the first series.

Expected behavior is that the series2 will be shifted by 2 hours and not start at the same position as series1 but rather extend by 2 hours. That is, however, not the case on my chart.

What is wrong here and is this a potential bug?

I need both XAxes to be perfectly aligned, meaning the cross hair label on each XAxis displays the exact same time stamp. Please note that I customized the LabelProvider to display milliseconds also, but I use the same Label Provider for both charts, so no difference here.

Can someone please chime in what is going on?

Please see attached charts to illustrate what I have been describing (screenshot1 shows intended behavior but on the same chart, I want this behavior to occur on separate panes/charts). Screenshot 2 describes the problem I am having.


  • bbmat asked 7 years ago
  • last active 7 years ago
0 votes

I have DateAxis as X Axis, so I want to trigger a button to zoom In/Out to a specific time at the latest plotted point (Price).
Example: I have zoom button 30 minutes, 15 minutes, 5 minutes and 2 minutes….

0 votes

Because we have limited vertical space, I would like to change the position of the x-axis title.
Ideally, to the right of the x-axis values.
Using code behind, this was sort of possible, but we would like to do it using xaml.
Also, the code behind solution had problems when resizing the chart.
Is this possible?

Showing 14 results

Try SciChart Today

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

Start TrialCase Studies