How to fix the render background when exporting a chart in Xamarin.Forms
The Xamarin.Forms Chart provides the exporting functionality by using the its in-build support. In Xamarin.Forms, UWP alone has the limitation on its background color, while exporting the chart image in JPG format.
In UWP, RenderTargetBitmap has been used to convert the chart to image. So, if the control background is transparent, RenderTargetBitmap will convert that to black background. Due to having framework limitation, getting exported the chart image in JPG format as shown in the following image.
It has been resolved by setting the BackgroundColor of the chart as White as shown in the following code sample.
<StackLayout>
<!--Button click to save chart -->
<Button Text="SAVE" HorizontalOptions="Center" VerticalOptions="Center" Clicked="Button_Clicked"/>
<!--BackgroundColor has been set as white to resolve this limitation-->
<xforms:SfChart BackgroundColor="White" x:Name="chart" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<xforms:SfChart.PrimaryAxis>
<xforms:NumericalAxis />
</xforms:SfChart.PrimaryAxis>
<xforms:SfChart.SecondaryAxis>
<xforms:NumericalAxis />
</xforms:SfChart.SecondaryAxis>
<xforms:ColumnSeries x:Name="series"
ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue" >
</xforms:ColumnSeries>
</xforms:SfChart>
</StackLayout>
private void Button_Clicked(object sender, EventArgs e)
{
//save the chart in jpg format
chart.SaveAsImage("chartImage.jpg");
}
Output
See also
How to export the chart to the PDF document in Xamarin.Forms
How to apply the PDF document size to Xamarin.Forms Chart
How to customize the color of Xamarin.Forms Chart
