Syncfusion PresentationRenderer ConvertToImage Method Cuts Off Chart Axis Tick Label

[Yasmin Eldokany]

Hello,

I have the following chart that I need to convert to an image:

Using the ConvertToImage PresentationRenderer method results in this image with the 100% label cut-off:
 

How can I fix this? I'm using the Syncfusion .Net Core Presentation and PresentationRenderer packages.

Thank you!

[Hemalatha Chiranjeevulu]

Hi Yasmin,

Thank you for contacting Syncfusion support.

We suspect that the reported issue might be based on the file level information in the input Presentation document used at your end. Could you please share us the below things at your end:
  1.Input Presentation document
  2.Complete code snippets which used in your application
  3.Syncfusion product version which used in your application
This will be more helpful to replicate the same problem at our end. Thereby, we will analyze further on the reported problem using that details and update you with appropriate solution at the earliest.

Please let us know if you have any other questions.

Regards,
Hemalatha C

[Yasmin Eldokany]

Hello,

The presentation is generated entirely from code, kindly check the below code snippet reproducing the bug:

        //Creates a Presentation instance

        IPresentation pptxDoc = Presentation.Create();

        // Create an instance of Presentation Renderer for converting chart to image

        pptxDoc.PresentationRenderer = new PresentationRenderer();

        //Adds a blank slide to the Presentation

        ISlide slide = pptxDoc.Slides.Add(SlideLayoutType.Blank);

        //Adds chart to the slide with position and size

        IPresentationChart chart = slide.Charts.AddChart(100, 10, 700, 500);

        //Specifies the chart title

        chart.ChartTitle = "Sales Analysis";

        //Sets chart data - Row1

        chart.ChartData.SetValue(1, 2, "Jan");

        chart.ChartData.SetValue(1, 3, "Feb");

        chart.ChartData.SetValue(1, 4, "March");

        //Sets chart data - Row2

        chart.ChartData.SetValue(2, 1, 2010);

        chart.ChartData.SetValue(2, 2, 600);

        chart.ChartData.SetValue(2, 3, 700);

        chart.ChartData.SetValue(2, 4, 800);

        //Sets chart data - Row3

        chart.ChartData.SetValue(3, 1, 2011);

        chart.ChartData.SetValue(3, 2, 800);

        chart.ChartData.SetValue(3, 3, 700);

        chart.ChartData.SetValue(3, 4, 600);

        //Sets chart data - Row4

        chart.ChartData.SetValue(4, 1, 2012);

        chart.ChartData.SetValue(4, 2, 600);

        chart.ChartData.SetValue(4, 3, 700);

        chart.ChartData.SetValue(4, 4, 800);

        //Sets the data range of the category axis

        chart.PrimaryCategoryAxis.CategoryLabels = chart.ChartData[2, 1, 4, 1];

        //Creates a new chart series with the name

        IOfficeChartSerie seriesJan = chart.Series.Add("Jan");

        //Sets the data range of chart series – start row, start column, end row, end column

        seriesJan.Values = chart.ChartData[2, 2, 4, 2];

        //Creates a new chart series with the name

        IOfficeChartSerie seriesFeb = chart.Series.Add("Feb");

        //Sets the data range of chart series – start row, start column, end row, end column

        seriesFeb.Values = chart.ChartData[2, 3, 4, 3];

        //Creates a new chart series with the name

        IOfficeChartSerie seriesMarch = chart.Series.Add("March");

        //Sets the data range of chart series – start row, start column, end row, end column

        seriesMarch.Values = chart.ChartData[2, 4, 4, 4];

        //Specifies the chart type

        chart.ChartType = OfficeChartType.Bar_Stacked_100;

        using (var stream = new MemoryStream())

        {

            pptxDoc.PresentationRenderer.ConvertToImage(chart, stream);

            slide.Shapes.AddPicture(stream, 100, 10, 700, 500);

        }

        //Save the PowerPoint file

        pptxDoc.Save("Output.pptx");

        //Close the PowerPoint instance

        pptxDoc.Close();

This generates the following image with the cut off last axis label

I'm using the latest Syncfusion.Presentation.Net.Core and Syncfusion.PresentationRenderer.Net.Core nuget package versions (v19.1.0.57)

[Hemalatha Chiranjeevulu]

Hi Yasmin,

Thank you for sharing us the details.

We can reproduce the reported axis label preservation issue when converting chart to image using given code snippets in our end, and we suspect it to be a defect. We will validate this issue and update you with more details on 23^rd April 2021.

Please let us know if you have any other questions.

Regards,
Hemalatha C

[Hemalatha Chiranjeevulu]

Hi Yasmin,

Thank you for your patience.

On further analyzing, we have found that SFChart considers plot area width itself to value axis as well. SFChart is one of the dependent source to preserve the chart in the Word document. To resolve this issue, we suggest you to set Max Value for Value Axis. Please use the below code snippets to preserve the chart properly.

 

IPresentation pptxDoc = Presentation.Create(); 

// Create an instance of Presentation Renderer for converting chart to image 

pptxDoc.PresentationRenderer = new PresentationRenderer(); 

//Adds a blank slide to the Presentation 

ISlide slide = pptxDoc.Slides.Add(SlideLayoutType.Blank); 

//Adds chart to the slide with position and size 

IPresentationChart chart = slide.Charts.AddChart(100, 10, 700, 500); 

//Specifies the chart title 

chart.ChartTitle = "Sales Analysis"; 

//Sets chart data - Row1 

chart.ChartData.SetValue(1, 2, "Jan"); 

chart.ChartData.SetValue(1, 3, "Feb"); 

chart.ChartData.SetValue(1, 4, "March"); 

//Sets chart data - Row2 

chart.ChartData.SetValue(2, 1, 2010); 

chart.ChartData.SetValue(2, 2, 600); 

chart.ChartData.SetValue(2, 3, 700); 

chart.ChartData.SetValue(2, 4, 800); 

//Sets chart data - Row3 

chart.ChartData.SetValue(3, 1, 2011); 

chart.ChartData.SetValue(3, 2, 800); 

chart.ChartData.SetValue(3, 3, 700); 

chart.ChartData.SetValue(3, 4, 600); 

//Sets chart data - Row4 

chart.ChartData.SetValue(4, 1, 2012); 

chart.ChartData.SetValue(4, 2, 600); 

chart.ChartData.SetValue(4, 3, 700); 

chart.ChartData.SetValue(4, 4, 800); 

//Sets the data range of the category axis 

chart.PrimaryCategoryAxis.CategoryLabels = chart.ChartData[2, 1, 4, 1]; 

 

 chart.PrimaryValueAxis.IsAutoMax = false; 

 chart.PrimaryValueAxis.MaximumValue = 1.01; 

 

//Creates a new chart series with the name 

IOfficeChartSerie seriesJan = chart.Series.Add("Jan"); 

//Sets the data range of chart series – start row, start column, end row, end column 

seriesJan.Values = chart.ChartData[2, 2, 4, 2]; 

//Creates a new chart series with the name 

IOfficeChartSerie seriesFeb = chart.Series.Add("Feb"); 

//Sets the data range of chart series – start row, start column, end row, end column 

seriesFeb.Values = chart.ChartData[2, 3, 4, 3]; 

//Creates a new chart series with the name 

IOfficeChartSerie seriesMarch = chart.Series.Add("March"); 

//Sets the data range of chart series – start row, start column, end row, end column 

seriesMarch.Values = chart.ChartData[2, 4, 4, 4]; 

//Specifies the chart type 

chart.ChartType = OfficeChartType.Bar_Stacked_100; 

using (var stream = new MemoryStream()) 

{ 

    pptxDoc.PresentationRenderer.ConvertToImage(chart, stream); 

    slide.Shapes.AddPicture(stream, 100, 10, 700, 500); 

} 

FileStream outputStream = new FileStream("Sample.pptx", FileMode.Create, FileAccess.ReadWrite, FileShare.ReadWrite); 

pptxDoc.Save(outputStream); 

pptxDoc.Close(); 

outputStream.Flush(); 

outputStream.Dispose(); 

 

Please let us know if you have any other questions.

Regards,
Hemalatha C

[Yasmin Eldokany]

Hi Hemalatha,

I tried setting the max value for the value axis of the chart, but this label fix seems to only work for stacked charts. For example the below code snippet results in this chart image:

IPresentation pptxDoc = Presentation.Create(); 

// Create an instance of Presentation Renderer for converting chart to image 

pptxDoc.PresentationRenderer = new PresentationRenderer(); 

//Adds a blank slide to the Presentation 

ISlide slide = pptxDoc.Slides.Add(SlideLayoutType.Blank); 

//Adds chart to the slide with position and size 

IPresentationChart chart = slide.Charts.AddChart(100, 10, 700, 500); 

//Specifies the chart title 

chart.ChartTitle = "Sales Analysis"; 

//Sets chart data - Row1 

chart.ChartData.SetValue(1, 2, "Jan"); 

chart.ChartData.SetValue(1, 3, "Feb"); 

//Sets chart data - Row2 

chart.ChartData.SetValue(2, 1, 2010); 

chart.ChartData.SetValue(2, 2, 600); 

chart.ChartData.SetValue(2, 3, 400); 

//Sets chart data - Row3 

chart.ChartData.SetValue(3, 1, 2011); 

chart.ChartData.SetValue(3, 2, 500); 

chart.ChartData.SetValue(3, 3, 500); 

//Sets chart data - Row4 

chart.ChartData.SetValue(4, 1, 2012); 

chart.ChartData.SetValue(4, 2, 300); 

chart.ChartData.SetValue(4, 3, 700); 

//Sets the data range of the category axis 

chart.PrimaryCategoryAxis.CategoryLabels = chart.ChartData[2, 1, 3, 1]; 

 

 chart.PrimaryValueAxis.IsAutoMax = false; 

 chart.PrimaryValueAxis.MaximumValue = 1001;

 chart.PrimaryValueAxis.MajorUnit = 100;

 

//Creates a new chart series with the name 

IOfficeChartSerie seriesJan = chart.Series.Add("Jan"); 

//Sets the data range of chart series – start row, start column, end row, end column 

seriesJan.Values = chart.ChartData[2, 2, 4, 2]; 

//Creates a new chart series with the name 

IOfficeChartSerie seriesFeb = chart.Series.Add("Feb"); 

//Sets the data range of chart series – start row, start column, end row, end column 

seriesFeb.Values = chart.ChartData[2, 3, 4, 3]; 

//Specifies the chart type 

chart.ChartType = OfficeChartType.Bar_Stacked; 

using (var stream = new MemoryStream()) 

{ 

    pptxDoc.PresentationRenderer.ConvertToImage(chart, stream); 

    slide.Shapes.AddPicture(stream, 100, 10, 700, 500); 

} 

FileStream outputStream = new FileStream("Sample.pptx", FileMode.Create, FileAccess.ReadWrite, FileShare.ReadWrite); 

pptxDoc.Save(outputStream); 

pptxDoc.Close(); 

outputStream.Flush(); 

outputStream.Dispose(); 

 

Is there a way fix the label cutoff for none stacked charts?

Thanks!

[Hemalatha Chiranjeevulu]

Hi Yasmin,

Thank you for your update.

We can reproduce the reported axis label preservation issue for none stacked chart in presentation document in our end, and we suspect it to be a defect. We will validate this issue and update you with more details on 1^st June 2021.

Please let us know if you have any other questions.

Regards,
Hemalatha C

[Hemalatha Chiranjeevulu]

Hi Yasmin,

Thank you for your patience.

As mentioned earlier, SFChart considers plot area width value as value axis. SFChart is one of the dependent source to preserve the chart in the Word document. To resolve this issue, we suggest you to set Maximum Value for value axis. This Maximum value is based on the values in primary value axis. Please use the below highlighted code snippets at your end to preserve chart properly

 

chart.ChartData.SetValue(4, 3, 700); 

//Sets the data range of the category axis  

chart.PrimaryCategoryAxis.CategoryLabels = chart.ChartData[2, 1, 3, 1]; 

chart.PrimaryValueAxis.IsAutoMax = false; 

chart.PrimaryValueAxis.MaximumValue = 1010; 

chart.PrimaryValueAxis.MajorUnit = 100; 

//Creates a new chart series with the name  

IOfficeChartSerie seriesJan = chart.Series.Add("Jan"); 

//Sets the data range of chart series – start row, start column, end row, end column  

seriesJan.Values = chart.ChartData[2, 2, 4, 2];

 

Please let us know if you have any other questions.

Regards,
Hemalatha C