Pre loader

Tag: stacked

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
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
1 vote
2k views

Hi, I have an issue where I am trying to create multiple xAxes where one is normal and the rest are horizontally stacked. Then I calculate the stacked length of each stacked axes, but the issue comes when I change the width of the chart or inspect element, which would alter the width of the chart somehow, I got error saying the total width of the stacked axes is bigger than available size.

I have a codesanbox example of it:
https://codesandbox.io/s/scichart-stacked-xaxis-stacked-length-issue-3knt23?file=/src/App.tsx

I am using percentage for the stacked xAxes length and then I added them up to be 100% total, but somehow it is saying that it is more than available size.

So, my question is, how can I listen or get the width/size changes event of the chart/xAxis, so that I can calculate accordingly?

  • Nung Khual asked 7 months ago
  • last active 7 months ago
1 vote
2k views

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 8 months ago
  • last active 8 months ago
0 votes
5k views

Hello,

how can i implement a vertically stacked y axis chart like in your example (WPF Chart Vertically Stacked YAxis) with MVVM and a varying number of y axes. Your example has a fixed number of y axes and the needed YAxesPanel is directly implemented in your xaml code. What is the best way to achieve the same result with a varying number of y axis?

Best regards
Alexander

0 votes
8k views

Hello everyone.

I have 2 stacked horizontally charts with

 .withMotionEventsGroup("ModifiersSharedEventsGroup").withReceiveHandledEvents(true)

so they drag and zoom in same way.

But when i put one finger on first chart, second finger on second chart – then total apocalypse happens.
Is it possible to zoom it, like two fingers on one chart or disable zoom in that situation, so charts will have no conflict?

(I think both chart just dragging in different directions in my case, but because they are linked – everything just shakes)

Edit:

Collections.addAll(mSciChartMainSurface.getChartModifiers(), sciChartBuilder.newModifierGroup()
                        .withPinchZoomModifier().withXyDirection(Direction2D.XDirection).withScaleFactor(SCALE_FACTOR_X_AXIS).build()
                        .withZoomPanModifier().withReceiveHandledEvents(true).withXyDirection(Direction2D.XDirection).build()
                        .withMotionEventsGroup(MODIFIER_SHARED_EVENTS_GROUP_NAME).withReceiveHandledEvents(true)
                        .withXAxisDragModifier().withReceiveHandledEvents(true).withDragMode(AxisDragModifierBase.AxisDragMode.Pan).build()
                        .build());



Collections.addAll(mSciChartBotIndicatorSurface.getChartModifiers(), sciChartBuilder.newModifierGroup()
                    .withMotionEventsGroup(MODIFIER_SHARED_EVENTS_GROUP_NAME).withReceiveHandledEvents(true)
                    .withPinchZoomModifier().withXyDirection(Direction2D.XDirection).withScaleFactor(SCALE_FACTOR_X_AXIS).build()
                    .withZoomPanModifier().withReceiveHandledEvents(true).withXyDirection(Direction2D.XDirection).build()
                    .withXAxisDragModifier().withReceiveHandledEvents(true).withDragMode(AxisDragModifierBase.AxisDragMode.Pan).build()
                    .build());
0 votes
7k views

Hello,

I am using StackedColumnRenderableSeries and I need annotations like in Histogram example:

enter image description here

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        var brushes = new Brush[] { Brushes.Red, Brushes.Green, Brushes.Blue, Brushes.Cyan, Brushes.Gray };
        var groups = new string[] { "Group 1", "Group 2", "Group 3" };
        var datas = new Dictionary<int, double[]>()
        {
            {1, new double[]{5.0, 4.0, 3.0, 2.0, 1.0}},
            {2, new double[]{1.0, 2.0, 3.0, 2.0, 1.0}},
            {3, new double[]{1.0, 2.0, 3.0, 4.0, 5.0}}
        };
        var data = new XyDataSeries<int, double>[brushes.Length];
        for (int i = 0; i < brushes.Length; i++)
        {
            data[i] = new XyDataSeries<int, double>();
        }
        foreach (var pair in datas)
        {
            for (int i = 0; i < pair.Value.Length; i++)
            {
                data[i].Append(pair.Key, pair.Value[i]);
            }
        }

        for (int i = 0; i < brushes.Length; i++)
        {
            var renderableSeries = new StackedColumnRenderableSeries()
            {
                Fill = brushes[i],
                DataSeries = data[i],
                StackedGroupId = brushes[i].ToString(),
            };
            sciChart.RenderableSeries.Add(renderableSeries);
        }
    }

How I can add annotation for each stacked grouped column? I attached the example with my Side-By-Side chart.

Ideally, I expected the annotations to be like in attached image.

0 votes
10k views

I want to build a column chart with 2 series. I don’t want columns to be stacked, but rather to show side by side.

The 2 series have the same XVariable (Days of the month). Because of that, whatever I do, I end up with stacked columns. I tried:

  • Using FastColumnRenderableSeries instead of StackedColumnRenderableSeries – It still rendered as stacked columns
  • Assigning a different StackedGroupId to different series – Nothing happened

But it did not work.

I also went into the example “Stacked Columns (Side by Side)”, and tried to change the StackedGroupId of the last serie to “C”, which had no effect. Also, when I made the data have the same X variable, all the columns became stacked (regardless of the StackedGroupId – Does StackedGroupId do anything?)

Any help is appreciated.

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

Try SciChart Today

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

Start TrialCase Studies