- Home
- Forum
- ASP.NET Core
- PlotArea ManualLayout Not Working in Word/PowerPoint (DocIO) - Chart Area Positioning Issue
PlotArea ManualLayout Not Working in Word/PowerPoint (DocIO) - Chart Area Positioning Issue
Hello Syncfusion Support Team,
I'm experiencing an issue where the PlotArea ManualLayout properties are not being applied in Word and PowerPoint documents using Syncfusion OfficeChart (DocIO). The properties are being set correctly, but the PlotArea position remains unchanged in the exported documents.
What I want to:
What I got after trying to:
Environment:
- Platform: ASP.NET Core
- Syncfusion Version: 27.1.53
- Packages: Syncfusion.DocIO.Net.Core, Syncfusion.Presentation.Net.Core, Syncfusion.OfficeChart
- Target: Word (.docx) and PowerPoint (.pptx) export
Problem Description:
I need to position the chart's PlotArea to match the exact positioning from Google Charts (frontend). I'm receiving computed chart area values (left, top, width, height in pixels) and need to apply them to the Syncfusion chart's PlotArea.
What I've Tried:
1. Set ManualLayout with factor mode (0-1 values)
2. Set ManualLayout with edge mode (absolute points)
3. Set basic Layout properties (both factor and edge modes)
4. Called chart.Refresh() after setting properties
5. Tested with extreme values (10000) to verify if any changes occur
- Goal: Want to set PlotArea size, ratio, padding, and positioning to match Google Charts exactly
Questions:
1. Is ManualLayout for PlotArea supported in Word/PowerPoint (DocIO) exports?
2. If yes, what am I doing wrong? If no, is there an alternative approach?
3. Are there any specific requirements or limitations I should be aware of?
4. Does this feature work in Excel (XlsIO) but not in Word/PowerPoint?
Note:
I've confirmed that the same approach works in Excel exports using XlsIO, but it doesn't work in Word/PowerPoint exports using DocIO. This suggests it might be a limitation of the DocIO library.
Thank you for your assistance!
Hi Chanathip Amoncheewasilapakul,
We are currently reviewing your query based on the information provided. We will share the further details on 28th January 2026.
In the meantime, kindly provide the following information from your end to help us reproduce the issue accurately.
1. Input document and the corresponding output document.
2. The complete code snippet you used to replicate the issue.
Regards,
Karan.
Hello Karan,
Thank you for your response. I'll provide the requested information to help you reproduce the issue.
1. Input/Output Documents:
I've attached the following files:
- Input: A sample Word document showing the expected chart layout (from Google Charts designer)
- Output: The exported Word document showing the actual result (PlotArea positioning not matching)
Note: Since this is a programmatically generated chart (not from an existing document), I'm providing:
- Screenshots showing the expected vs actual result (already attached in the original post)
- Sample code that generates the chart with the issue
2. Complete Code Snippet:
Here's the complete code I'm using to replicate the issue:
```csharp
// ViewModel class for computed chart area
public class ComputedChartArea
{
public double left { get; set; } // e.g., 86.3 pixels
public double top { get; set; } // e.g., 199.0 pixels
public double width { get; set; } // e.g., 690.4 pixels
public double height { get; set; } // e.g., 159.2 pixels
public double chartRenderWidth { get; set; } // e.g., 863 pixels
public double chartRenderHeight { get; set; } // e.g., 398 pixels
}
public class OptionExportChart
{
public List<List<dynamic>> chartDataTable { get; set; }
public List<SpChartDataOptionsSeries> seriesData { get; set; }
public ComputedChartArea computedChartArea { get; set; }
}
// Method that sets the PlotArea (this is where the issue occurs)
private void SetChartPlotArea(IOfficeChart chart)
{
var exportChart = _currentComponent.options.exportChart;
if (exportChart?.computedChartArea == null)
{
return;
}
var computedArea = exportChart.computedChartArea;
// Use chartRenderWidth/Height from Google Charts if available, otherwise fall back to geometry
var renderWidth = computedArea.chartRenderWidth > 0
? computedArea.chartRenderWidth
: _currentComponent.geometry.width;
var renderHeight = computedArea.chartRenderHeight > 0
? computedArea.chartRenderHeight
: _currentComponent.geometry.height;
// Convert pixels to factor (0-1) based on Google Charts render dimensions
if (renderWidth > 0 && renderHeight > 0)
{
try
{
// Convert pixels to factor (0-1)
var leftFactor = computedArea.left / renderWidth; // e.g., 0.100
var topFactor = computedArea.top / renderHeight; // e.g., 0.500
var widthFactor = computedArea.width / renderWidth; // e.g., 0.800
var heightFactor = computedArea.height / renderHeight; // e.g., 0.400
System.Diagnostics.Debug.WriteLine($"Converting pixels to factors: left={computedArea.left}px/{renderWidth}px={leftFactor:F3}, top={computedArea.top}px/{renderHeight}px={topFactor:F3}");
// Try using basic Layout properties with factor mode
var plotAreaLayout = chart.PlotArea.Layout;
plotAreaLayout.LeftMode = LayoutModes.factor;
plotAreaLayout.Left = leftFactor;
plotAreaLayout.TopMode = LayoutModes.factor;
plotAreaLayout.Top = topFactor;
plotAreaLayout.WidthMode = LayoutModes.factor;
plotAreaLayout.Width = widthFactor;
plotAreaLayout.HeightMode = LayoutModes.factor;
plotAreaLayout.Height = heightFactor;
System.Diagnostics.Debug.WriteLine($"PlotArea Layout set: Left={plotAreaLayout.Left:F3} (factor), Top={plotAreaLayout.Top:F3} (factor), Width={plotAreaLayout.Width:F3} (factor), Height={plotAreaLayout.Height:F3} (factor)");
// Try ManualLayout with factor mode
var manualLayout = chart.PlotArea.Layout.ManualLayout;
manualLayout.LayoutTarget = LayoutTargets.outer;
manualLayout.LeftMode = LayoutModes.factor;
manualLayout.Left = leftFactor;
manualLayout.TopMode = LayoutModes.factor;
manualLayout.Top = topFactor;
manualLayout.WidthMode = LayoutModes.factor;
manualLayout.Width = widthFactor;
manualLayout.HeightMode = LayoutModes.factor;
manualLayout.Height = heightFactor;
System.Diagnostics.Debug.WriteLine($"PlotArea ManualLayout set: Left={manualLayout.Left:F3} (factor), Top={manualLayout.Top:F3} (factor), Width={manualLayout.Width:F3} (factor), Height={manualLayout.Height:F3} (factor)");
// Also try edge mode with points (absolute positioning)
var leftPoints = computedArea.left * 0.75;
var topPoints = computedArea.top * 0.75;
var widthPoints = computedArea.width * 0.75;
var heightPoints = computedArea.height * 0.75;
manualLayout.LeftMode = LayoutModes.edge;
manualLayout.Left = leftPoints;
manualLayout.TopMode = LayoutModes.edge;
manualLayout.Top = topPoints;
manualLayout.WidthMode = LayoutModes.edge;
manualLayout.Width = widthPoints;
manualLayout.HeightMode = LayoutModes.edge;
manualLayout.Height = heightPoints;
System.Diagnostics.Debug.WriteLine($"PlotArea ManualLayout (edge mode) set: Left={manualLayout.Left:F2}pt, Top={manualLayout.Top:F2}pt, Width={manualLayout.Width:F2}pt, Height={manualLayout.Height:F2}pt");
// Force refresh to apply changes
chart.Refresh();
// Verify values after refresh
var plotArea = chart.PlotArea;
System.Diagnostics.Debug.WriteLine($"PlotArea actual position after setting: Left={plotArea.Layout.Left:F2}, Top={plotArea.Layout.Top:F2}, Width={plotArea.Layout.Width:F2}, Height={plotArea.Layout.Height:F2}");
}
catch (Exception ex)
{
System.Diagnostics.Debug.WriteLine($"Error setting chart plot area: {ex.Message}");
System.Diagnostics.Debug.WriteLine($"Stack trace: {ex.StackTrace}");
}
}
}
// Method that creates and configures the chart (called before SetChartPlotArea)
public void SetBarChartSettings(IOfficeChart chart, SpChartSetting chartSettings, List<ChartSeriesData> chartDatas)
{
// ... (other chart configuration code)
// Set chart data, series, axes, etc.
SetChartData(chart, chartSettings, chartDatas);
SetSeriesSettings(chart, chartSettings, chartDatas);
SetColumnChartType(chart, chartSettings.type, chartSettings.stacked, ...);
SetChartYAxisRange(chart.PrimaryValueAxis, ...);
SetChartLegendPosition(chart, chartSettings.showLegend, chartSettings.legendPosition);
SetChartBackgroundColor(chart);
// Refresh chart after all settings
chart.Refresh();
// Try to set PlotArea positioning (this is where the issue occurs)
SetChartPlotArea(chart);
}
```
Debug Output:
When I run the code, the debug output shows:
```
Converting pixels to factors: left=86.3px/863px=0.100, top=199px/398px=0.500
PlotArea Layout set: Left=0.100 (factor), Top=0.500 (factor), Width=0.800 (factor), Height=0.400 (factor)
PlotArea ManualLayout set: Left=0.100 (factor), Top=0.500 (factor), Width=0.800 (factor), Height=0.400 (factor)
PlotArea ManualLayout (edge mode) set: Left=64.73pt, Top=149.25pt, Width=517.80pt, Height=119.40pt
PlotArea actual position after setting: Left=86.30, Top=199.00, Width=690.40, Height=159.20
```
The properties are being set correctly, but the actual PlotArea position remains unchanged (Left=86.30, Top=199.00) regardless of the values I set.
Expected vs Actual:
- Expected: PlotArea should be positioned at left=0.1 (10%), top=0.5 (50%) of ChartArea
- Actual: PlotArea remains at default position (Left=86.30, Top=199.00)
Additional Context:
- The same code works correctly in Excel exports using XlsIO
- The issue only occurs in Word (.docx) and PowerPoint (.pptx) exports using DocIO
- I've tested with both factor mode (0-1) and edge mode (absolute points)
- I've also tested with extreme values (10000) to verify that no changes occur at all
Please let me know if you need any additional information or clarification.
Thank you for your assistance!
Regards,
Chanathip Amoncheewasilapakul
Chanathip Amoncheewasilapakul,
Thank you for your update. We will provide more details on 28th January 2026.
Regards,
Karan.
Chanathip Amoncheewasilapakul,
We have tried to reproduce the reported issue. When we set the PlotArea ManualLayout factor values, it works properly on our side. We have attached the sample and the output generated from it for your reference.
If you are still facing any issues, kindly modify the provided sample to make the issue reproducible and share the expected output document. We will then check and provide the appropriate solution at the earliest.
On further analysis, we also tested the PlotArea ManualLayout edge values, and they worked as expected. The results were same Excel, Word, and PowerPoint documents. We have attached the output samples for your reference.
Regards,
Karan.
Attachment: ChartPlotArea_ab1c7b9c.zip
Hello Karan,
Thank you for your previous assistance. I've successfully resolved the PlotArea ManualLayout issue for Word, PowerPoint, and Excel exports. The solution was to call `SetChartPlotArea()` BEFORE `chart.Refresh()` instead of after it, which prevents the Refresh() method from resetting the ManualLayout settings.
However, I'm still experiencing an issue with PDF export. The PlotArea positioning works correctly in the Word document (.docx), but when I convert it to PDF using `DocIORenderer.ConvertToPDF()`, the PlotArea positioning is lost.
Current Implementation:
- Word/PPT/Excel: PlotArea ManualLayout works correctly ✅
- PDF: PlotArea ManualLayout is lost during conversion ❌
Code that works for Word/PPT/Excel:
```csharp
public void SetBarChartSettings(IOfficeChart chart, SpChartSetting chartSettings, List<ChartSeriesData> chartDatas)
{
// ... (other chart configuration)
SetChartBackgroundColor(chart);
SetChartPlotArea(chart); // Set BEFORE Refresh
chart.Refresh();
}
private void SetChartPlotArea(IOfficeChart chart)
{
var exportChart = _currentComponent.options.exportChart;
if (exportChart?.computedChartArea == null)
{
return;
}
var computedArea = exportChart.computedChartArea;
var renderWidth = computedArea.chartRenderWidth > 0
? computedArea.chartRenderWidth
: _currentComponent.geometry.width;
var renderHeight = computedArea.chartRenderHeight > 0
? computedArea.chartRenderHeight
: _currentComponent.geometry.height;
if (renderWidth > 0 && renderHeight > 0)
{
var manualLayout = chart.PlotArea.Layout.ManualLayout;
manualLayout.LayoutTarget = LayoutTargets.inner;
manualLayout.LeftMode = LayoutModes.factor;
manualLayout.Left = computedArea.left / renderWidth;
manualLayout.TopMode = LayoutModes.factor;
manualLayout.Top = computedArea.top / renderHeight;
manualLayout.WidthMode = LayoutModes.factor;
manualLayout.Width = computedArea.width / renderWidth;
manualLayout.HeightMode = LayoutModes.factor;
manualLayout.Height = computedArea.height / renderHeight;
}
}
```
PDF Conversion Code:
```csharp
private FileStreamResult ConvertWordToPdfUsingSyncfusion(MemoryStream stream, FileStream defaultWatermarkFontFs)
{
WordDocument wordDocument = new WordDocument(stream, FormatType.Html, XHTMLValidationType.None);
wordDocument.FontSettings.SubstituteFont += FontSettings_SubstituteFont;
DocIORenderer render = new DocIORenderer();
render.Settings.ChartRenderingOptions.ImageFormat = Syncfusion.OfficeChart.ExportImageFormat.Png;
render.Settings.EmbedFonts = true;
PdfDocument pdfDocument = render.ConvertToPDF(wordDocument);
wordDocument.FontSettings.SubstituteFont -= FontSettings_SubstituteFont;
_watermarkService.SetExportWatermarkForPdf(pdfDocument, _watermarkSettings, defaultWatermarkFontFs);
render.Dispose();
wordDocument.Dispose();
MemoryStream outputStream = new MemoryStream();
pdfDocument.Save(outputStream);
outputStream.Position = 0;
return _exportReportService.ExportFile(outputStream, MIMEtype.Pdf);
}
```
Problem:
- The Word document (.docx) has correct PlotArea positioning ✅
- But when converted to PDF, the PlotArea positioning is lost ❌
- I suspect this is because `ChartRenderingOptions.ImageFormat = PNG` renders charts as images, which may not preserve PlotArea ManualLayout settings
Questions:
1. Is there a way to preserve PlotArea ManualLayout settings when converting Word to PDF using DocIORenderer?
2. Does setting `ChartRenderingOptions.ImageFormat = PNG` affect PlotArea ManualLayout preservation?
3. Is there an alternative approach to render charts in PDF that preserves PlotArea ManualLayout settings?
4. Are there any specific settings or configurations needed for DocIORenderer to preserve PlotArea ManualLayout during PDF conversion?
Environment:
- Platform: ASP.NET Core
- Syncfusion Version: 27.1.53
- Packages: Syncfusion.DocIO.Net.Core, Syncfusion.Presentation.Net.Core, Syncfusion.OfficeChart, Syncfusion.DocIORenderer.Net.Core
Thank you for your continued assistance!
Regards,
Chanathip Amoncheewasilapakul
Chanathip Amoncheewasilapakul,
Upon further analysis, we confirmed that the manual layout of the plot area is not supported during chart-to-image or PDF conversion. Regarding your requirement, there is currently no workaround available for this issue.
While there is no problem converting the chart to PNG, the manual layout of the plot area is not supported, which results in the plot area position being lost.
We have already logged "Support for chart plot area with manual layout in chart to image conversion" as a feature from our end, but we do not have any immediate plans to implement this feature. At the planning stage for every release cycle, we review all open features and implement them based on feature rank, customer request count, and volume wish-list.
The status of implementation can be tracked through the feedback portal link below:
Support for chart plot area with manual layout in chart to image conversion in ASP.NET Core | Feedb…
Regards,
Karan.
- 6 Replies
- 2 Participants
-
CA Chanathip Amoncheewasilapakul
- Jan 22, 2026 03:24 PM UTC
- Jan 28, 2026 05:38 PM UTC
