Pre loader

Keep Aspect Ratio of Chart

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
0
0

Hi

We are using a simple SciChart setup like the following:

        <Grid Margin="20,45,50,20">

    <!--  Create the chart surface  -->
    <s:SciChartSurface Name="SparseValuesPlot" s:ThemeManager.Theme="Chrome">

        <!--  Declare RenderableSeries  -->
        <s:SciChartSurface.RenderableSeries>
            <s:FastLineRenderableSeries DataSeries="{Binding Values}" Style="{Binding PlotStyle, Converter={StaticResource plotStyleConverter}}" />
        </s:SciChartSurface.RenderableSeries>

        <!--  Create an X Axis  -->
        <s:SciChartSurface.XAxis>
            <s:NumericAxis AxisAlignment="Bottom" GrowBy="0.1, 0.1" AxisTitle="{Binding XAxisTitle}" AutoRange="Never" VisibleRange="{Binding XRange}" />
        </s:SciChartSurface.XAxis>

        <!--  Create a Y Axis  -->
        <s:SciChartSurface.YAxis>
            <s:NumericAxis AxisAlignment="Left" GrowBy="0.1, 0.1" AxisTitle="{Binding YAxisTitle}" AutoRange="Never" VisibleRange="{Binding YRange}" />
        </s:SciChartSurface.YAxis>

    </s:SciChartSurface>
</Grid>

Is there a way to fix the aspect ratio of the chart such that a unit on the x-axis is displayed with the same number of pixels than a unit on the y-axis?

Right now the chart is streched with the surrounding grid. I tried to set height and width of the SciChartSurface but this does not keep the relations because the axis label areas may take different amount of space.

Thanks
Julian

  • You must to post comments
Great Answer
0
0

Finally I found the following decorator to fix the aspect ratio:

Resizing a WPF control while maintaining a specific aspect ratio

  • You must to post comments
0
0

I met similar issue, are there an solution for this issue Sir?

  • You must to post comments
0
0

Hi,

I actually wonder the same thing as Julian (if I understood his question correctly).

It’s not really about the size of the SciChart WPF element, but the content of the chart. I’d like to be able to link the x and y axis of the chart to the same range (as if binding the value of one axis to the other). Especially when using the “RubberBandXyZoomModifier” or the “ZoomExtentsModifier”, I’d like them to always keep a square aspect ratio. Is there a way of achieving it?

  • Andrew Burnett-Thompson
    Hi Daniel, do you mean if XAxis range is 10-20 than yaxis range is 10-20? Or do you mean if XAxis range is 10-20 then Yaxis range 40-50 or 100-110 or -200-210 is permissible?
  • Jonathan Janesjö
    Hi Andrew, Yes, I mean like your first example. If one axis has a range of 0-300, the other axis needs to have the same range. I’m plotting points on top of an image (using custom annotation) and I don’t want that image (nor the points plotted on top of it) to be stretched in any direction.
  • Julian Heeb
    What I mean is the following: If x range is from 0 mm to 100 mm and y axis from 0 mm to 200 mm, I want the hight of the plot’s y axis to be twice as long on the screen than the width of the x-axis.
  • You must to post comments
0
0

Hi Julian,

The only way to do this is to set the desired Width/Height of the central area of the SciChartSurface, e.g. as follows:

<Window x:Class="WpfApplication68.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
        Title="MainWindow" Height="400" Width="600">

    <Window.Resources>
        <Style TargetType="s:GridLinesPanel" x:Key="GridLinesPanelStyle">
            <Setter Property="MinWidth" Value="300"></Setter>
            <Setter Property="MinHeight" Value="300"></Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <s:SciChartSurface HorizontalAlignment="Left" VerticalAlignment="Top" GridLinesPanelStyle="{StaticResource GridLinesPanelStyle}">
            <s:SciChartSurface.XAxis>
                <s:NumericAxis/>
            </s:SciChartSurface.XAxis>
            <s:SciChartSurface.YAxis>
                <s:NumericAxis/>
            </s:SciChartSurface.YAxis>
        </s:SciChartSurface>
    </Grid>
</Window>

Using the GridLinesPanelStyle you can set properties directly on the central area of the SciChartSurface. Here I have set the Width, Height to 300.

In order to get it to show in the Grid (not stretch to fit), I have also set SciChartSurface.HorizontalAlignment=left and VerticalAlignment=Top. Another way is to host the SciChartSurface in a WPF panel which doens’t force stretch to fit such as StackPanel or Canvas.

  • Andrew Burnett-Thompson
    you definitely did something wrong as I had that code in Visual Studio myself and tested it. I was using SciChart v4
  • Julian Heeb
    Oh ok, I tested it with SciChart v3.6.1. Does this only work with v4?
  • Julian Heeb
    BTW: we have a professional license, is it better to open a support ticket for this?
  • Julian Heeb
    I just put it in a canvas and now it works!
  • Andrew Burnett-Thompson
    Hi Julian, great! It’s related to WPF’s layout. Items stretch to fit their parent in Grid, StackPanel, but in a Canvas then the child item dictates the size. I’d suggest taking a bit more of a look on WPF Layout + Stretch to fit behaviour. Also, support ticket vs. forum, its preference really! Simple ‘how do I …’ questions are very well suited to the forum and can help others. But so can this! So public / private its up to you!
Showing 4 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