Plot Area Padding

[Tom]

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]

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]

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]

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]

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

thanks

[Muneesh Kumar G]

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.