We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Plot Area Padding

Thread ID:

Created:

Updated:

Platform:

Replies:

142967 Feb 27,2019 09:52 AM UTC Feb 28,2019 11:57 AM UTC WPF 5
loading
Tags: Chart
Tom
Asked On February 27, 2019 09:52 AM UTC

How do i put some padding between the plot area on the right, and the chart border,
e.g. i want to turn



into



Thanks

Muneesh Kumar G [Syncfusion]
Replied On February 27, 2019 10:46 AM UTC

Hi Tom, 
 
Greetings from Syncfusion,  
 
We have analyzed your requirement and you can achieve this by setting Background for SfChart’s immediate parent and Margin for SfChart as per the below code snippet.  
 
Code snippet 
   <Grid Background="LightGray" > 
            <chart:SfChart x:Name="chart" AreaBackground="Cyan" 
                           Header="Chart Area Header"  
                           AreaBorderBrush="Red" AreaBorderThickness="5" 
                           Margin="0,0,10,0"> 
 
                .. 
            </chart:SfChart> 
        </Grid> 
  
Screenshot: 
 
 
Hope it helps you.  
 
Thanks, 
Muneesh Kumar G.     
   


Tom
Replied On February 28, 2019 11:13 AM UTC

This does work but then if you call the .Save method, obviously you don't get the border and background properly. (Now ok ive worked around this rendering the containing control as an image, but really it needs to be part of the chart - maybe a padding property on the ChartArea).
Thanks

Muneesh Kumar G [Syncfusion]
Replied On February 28, 2019 11:23 AM UTC

Hi Tom,  
 
Thanks for your suggestion. But we can also export whole grid to get padding and background for SfChart. Please let us know if you have any other queries.  
  
Thanks,  
Muneesh Kumar G.  
 


Tom
Replied On February 28, 2019 11:27 AM UTC

could you tell me how you do this? as my way was a bit messy to get it to work.
thanks

Muneesh Kumar G [Syncfusion]
Replied On February 28, 2019 11:57 AM UTC

Hi Tom, 
 
You can save SfChart along with its parent (like Grid, Border etc) by using below code snippet, 
 
MainWindow.xaml 
Xaml 
   <Grid Name="mainGrid"> 
 
        <Grid.DataContext> 
            <local:ViewModel/> 
        </Grid.DataContext> 
 
        <Grid.RowDefinitions> 
            <RowDefinition/> 
            <RowDefinition Height="100"/> 
        </Grid.RowDefinitions> 
 
        <Grid x:Name="grid" Background="White"> 
 
            <chart:SfChart Margin="20" Name="chart" Background="Transparent"> 
 
                <chart:SfChart.PrimaryAxis> 
                    <chart:CategoryAxis/> 
                </chart:SfChart.PrimaryAxis> 
 
                <chart:SfChart.SecondaryAxis> 
                    <chart:NumericalAxis Interval="10"/> 
                </chart:SfChart.SecondaryAxis> 
 
                <chart:ColumnSeries ItemsSource="{Binding Collection}" 
                                    XBindingPath="XValue" YBindingPath="YValue"/> 
            </chart:SfChart> 
        </Grid> 
 
        <Button Height="75" Content="Save Chart" Width="150" Click="Button_Click" 
                Grid.Row="1"/> 
 
 
    </Grid> 
 
 
MainWindow.cs 
public partial class MainWindow : Window 
    { 
        public MainWindow() 
        { 
            InitializeComponent();           
        } 
 
       
       void Save( FrameworkElement grid ,string fileName) 
        { 
            FrameworkElement element = grid; 
            string imageExtension = null; 
            imageExtension = new  FileInfo(fileName).Extension.ToLower(System.Globalization.CultureInfo.InvariantCulture); 
            BitmapEncoder imgEncoder = null; 
            switch (imageExtension) 
            { 
                case ".bmp": 
                    imgEncoder = new BmpBitmapEncoder(); 
                    break; 
                case ".jpg": 
                case ".jpeg": 
                    imgEncoder = new JpegBitmapEncoder(); 
                    break; 
                case ".png": 
                    imgEncoder = new PngBitmapEncoder(); 
                    break; 
                case ".gif": 
                    imgEncoder = new GifBitmapEncoder(); 
                    break; 
                case ".tif": 
                case ".tiff": 
                    imgEncoder = new TiffBitmapEncoder(); 
                    break; 
                case ".wdp": 
                    imgEncoder = new WmpBitmapEncoder(); 
                    break; 
                default: 
                    imgEncoder = new BmpBitmapEncoder(); 
                    break; 
            } 
            if (element != null) 
            { 
                RenderTargetBitmap bmpSource = new   
                         RenderTargetBitmap((int)element.ActualWidth,  
                          (int)element.ActualHeight, 96, 96, PixelFormats.Pbgra32); 
                bmpSource.Render(element); 
                imgEncoder.Frames.Add(BitmapFrame.Create(bmpSource)); 
                using (Stream stream = File.Create(fileName)) 
                { 
                    imgEncoder.Save(stream); 
                    stream.Close(); 
                } 
            } 
        } 
 
        private void Button_Click(object sender, RoutedEventArgs e) 
        { 
            Save(grid, "a.png"); 
        } 
    } 
 
The screenshot is exported image from the above code snippet, 
 
 
Regards, 
Muneesh Kumar G.  
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon