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. Image for the cookie policy date

Plot Area Padding

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

5 Replies

MK Muneesh Kumar G Syncfusion Team 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.     
   



TO Tom 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


MK Muneesh Kumar G Syncfusion Team 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.  
 



TO Tom 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


MK Muneesh Kumar G Syncfusion Team 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.  
 


Loader.
Live Chat Icon For mobile
Up arrow icon