Pre loader

Chart is small with large background area

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
0

I am a SciChart beginner (and a wpf beginner too) so I apologize if this is a dumb question. I place a chart inside a user control – see xaml below. The background color is set to white to distinguish it from the chart area. When I run my app, the chart is small and in the center of the grid with a large white background around it. How can I get the chart to fill the entire space? There are many properties that can be set and it’s not clear to me what to do. I’ve attached a pdf snapshot of my application window showing the problem. Thanks for your help.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

            <s:SciChartSurface Grid.Row="0" BorderThickness="1"  Background="AntiqueWhite" ChartTitle="Name">
        <s:SciChartSurface.RenderableSeries>
            <s:FastLineRenderableSeries DataSeries="{Binding EcgDataSeries}" SeriesColor="#FFB3E8F6" StrokeThickness="2"/>
        </s:SciChartSurface.RenderableSeries>

        <s:SciChartSurface.YAxis>
            <s:NumericAxis
                     MaxAutoTicks="5"
                     DrawMinorGridLines="True"
                     VisibleRange="{Binding YVisibleRange, Mode=TwoWay}"/>
        </s:SciChartSurface.YAxis>

        <!-- Define the XAxis  -->
        <s:SciChartSurface.XAxis>
            <s:NumericAxis 
                     MaxAutoTicks="5"
                     DrawMinorGridLines="True"
                     VisibleRange="{Binding XVisibleRange, Mode=TwoWay}"/>
        </s:SciChartSurface.XAxis>

    </s:SciChartSurface>
</Grid>
  • You must to post comments
0
0

Hi Gary,

It’s hard to say without seeing the rest of the code. However, I can tell you by default the SciChartSurface.HorizontalAlignment and VerticalAlignment are already set to Stretch, so a SciChartSurface will already stretch to fit the parent element.

You can test this by placing a SciChartSurface inside a Grid on a completely new UserControl or Window.xaml. It should stretch to fit. So something higher than the SCS and the Grid in your code sample is constraining the SciChartSurface’s available size.

My advice is download WPF Snoop and point it at your running application to find out what element in the visual tree is constraining the size of the SciChartSurface.

WPF Snoop usage guide is here:

Properties you should check as you navigate elements in Snoop

  • Margin, Padding
  • VerticalAlignment, HorizontalAlignment
  • VerticalContentAlignment, HorizontalContentAlignment
  • Width, Height

Let me know if you find it!

Best regards,
Andrew

  • Gary Arnold
    I'll take a look and see if it's something in the application. However, I see the large background bordering the chart even in the user control project which incorporates the chart. I would have expected it to fill the grid area completely. setting content alignment seems to have no effect.
  • Andrew Burnett-Thompson
    You're absolutely right, because of the AntiqueWhite background. Let me create a new answer. I will leave the above as its still useful
  • You must to post comments
0
0

Hi Gary,

You’re absolutely right, the problem is in the SciChartSurface, and to give you some pointers how to configure it, and to use Snoop to debug these sorts of problems I have some images below

Image 1 – Showing the raw SciChartSurface with Background=AntiqueWhite

See Image1. You will see I reproduced your issue with the code provided.

Image2 – Setting Padding=0

See Image2. Setting Padding=0 removes some space, but there is still space remaining

Image3 – Removing Title

See Image3. The title takes up furher space. Setting the Title to {x:Null} collapses the title. Note the title is always outside of the chart

Image4 – Axis takes up space

See Image4. The X and Y Axes take up the remaining space. To hide them set Visibility=Collapsed

If you want to set the background of the gridlines panel, you need to set SciChartSurface.GridlinesPanel.Background. We have a KB Article on how to do it here:

Styling Axis Labels, Axis Titles, Rotating Axis Labels

Best regards,
Andrew

Images
  • You must to post comments
Showing 2 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