# How OfficeCLI Renders Charts in HTML: Open XML to SVG Conversion
> Discover how OfficeCLI transforms Open XML charts into inline SVG for HTML. Learn about its three-stage pipeline: reference resolution, metadata extraction, and SVG rendering for browser-ready charts.
- Repository: [OfficeAI/OfficeCLI](https://github.com/iofficeai/OfficeCLI)
- Tags: internals
- Published: 2026-07-28
---
**OfficeCLI converts native Open XML chart parts into self-contained HTML fragments that embed inline SVG, using a three-stage pipeline that resolves chart references, extracts metadata into `ChartInfo` objects, and generates browser-ready markup through `ChartSvgRenderer`.**
OfficeCLI is an open-source .NET library maintained by iOfficeAI that converts Office documents into HTML previews. When processing Word, Excel, or PowerPoint files containing data visualizations, the library extracts Open XML chart parts and renders them as scalable vector graphics embedded directly in the HTML output, preserving colors, axes, and legends without external dependencies.
## The Three-Stage Rendering Pipeline
OfficeCLI handles chart rendering through a standardized pipeline that remains consistent across Word, PowerPoint, and Excel formats. The implementation resolves drawing references, parses chart metadata, and generates self-contained SVG markup.
### Stage 1: Chart Part Resolution
When the parser encounters a drawing element containing a chart reference (`c:chart` inside a `Drawing` element), it resolves the associated **chart part** using helper methods.
In [`WordHandler.cs`](https://github.com/iOfficeAI/OfficeCLI/blob/main/WordHandler.cs) (lines 1089-1109), the `ResolveChartPartFromRunPath` method locates the chart part from the document's relationship tree. This handles both standard `ChartPart` references and modern `ExtendedChartPart` instances used by newer Office formats.
```csharp
// From WordHandler.cs - Chart part resolution
var chartPart = ResolveChartPartFromRunPath(runPath);
if (chartPart == null) return;
```
The resolved part provides access to the underlying `ChartSpace` XML containing the series data, axis definitions, and formatting instructions.
### Stage 2: Metadata Extraction
Once the chart part is identified, OfficeCLI extracts the visualization metadata into a `ChartInfo` object. According to the source code in [`ChartSvgRenderer.cs`](https://github.com/iOfficeAI/OfficeCLI/blob/main/ChartSvgRenderer.cs) (lines 4518-4525), this object aggregates series collections, axis configurations, titles, and style information from the Open XML markup.
The `ChartHelper.GetChartInfo` method normalizes this data across different Office formats, creating a unified representation that the rendering engine consumes regardless of whether the source originated from Word, PowerPoint, or Excel.
### Stage 3: SVG Generation
The core rendering occurs in `ChartSvgRenderer.RenderChartSvgContent`, which writes inline SVG elements directly into a `StringBuilder`. The method accepts width and height parameters to control the viewport dimensions while preserving the chart's aspect ratio.
The generated SVG includes:
- **Plot areas** with data series paths and markers
- **Axis lines** and label text derived from the `ChartInfo` object
- **Legend groups** positioned according to the original chart layout
- **Inline CSS** for standalone display without external stylesheets
## Format-Specific Implementation Details
While the core SVG generation remains consistent, each Office format implements specialized handlers to locate charts within their respective document structures.
### Word Document Handling
For Word documents, the [`WordHandler.HtmlPreview.Charts.cs`](https://github.com/iOfficeAI/OfficeCLI/blob/main/WordHandler.HtmlPreview.Charts.cs) class (lines 17-33) orchestrates the rendering through the `RenderChartHtml` method. This method distinguishes between standard charts and extended charts, delegating to `RenderChartExHtml` when encountering modern chart types.
```csharp
// Inside WordHandler.HtmlPreview.Charts.cs
private void RenderChartHtml(StringBuilder sb, Drawing drawing, OpenXmlElement chartRef)
{
var chartPart = ResolveChartPartFromRunPath(runPath);
if (chartPart == null) return;
var info = ChartHelper.GetChartInfo(chartPart);
renderer.RenderChartSvgContent(sb, info, svgWidth, svgHeight);
}
```
### PowerPoint Slide Processing
PowerPoint charts reside within `GraphicFrame` elements on slides. The [`PowerPointHandler.HtmlPreview.Charts.cs`](https://github.com/iOfficeAI/OfficeCLI/blob/main/PowerPointHandler.HtmlPreview.Charts.cs) file (lines 20-28) extracts chart references from these frames while maintaining access to the `SlidePart` for theme color resolution. This ensures that charts using theme accent colors render correctly with their original color schemes.
```csharp
// Inside PowerPointHandler.HtmlPreview.Charts.cs
private void RenderChart(StringBuilder sb, GraphicFrame gf,
SlidePart slidePart, Dictionary themeColors,
string? dataPath = null, Position? overridePos = null)
{
var chartInfo = ChartHelper.GetChartInfo(gf, slidePart);
renderer.RenderChartSvgContent(sb, chartInfo, svgW, svgH);
}
```
### Excel Worksheet Rendering
Excel charts are processed similarly through [`ExcelHandler.HtmlPreview.Charts.cs`](https://github.com/iOfficeAI/OfficeCLI/blob/main/ExcelHandler.HtmlPreview.Charts.cs) (lines 253-260), which handles chart parts embedded in worksheet drawings. The implementation calls the same `RenderChartSvgContent` routine, ensuring visual consistency across all three Office formats.
## Code Implementation Example
The following example demonstrates the complete flow from chart resolution to HTML generation as implemented in the OfficeCLI source:
```csharp
public void RenderChartSvgContent(StringBuilder sb, ChartInfo info,
int svgW, int svgH)
{
sb.Append($"");
}
```
The resulting HTML fragment wraps the SVG in semantic markup:
```html
Revenue 2024
...
```
## Summary
- **OfficeCLI** renders charts by converting Open XML chart parts into embedded SVG within HTML fragments, ensuring accurate visual previews without Office dependencies.
- The **three-stage pipeline** resolves chart references via `ResolveChartPartFromRunPath`, extracts metadata into `ChartInfo` objects, and generates markup through `ChartSvgRenderer`.
- **Format-specific handlers** in [`WordHandler.HtmlPreview.Charts.cs`](https://github.com/iOfficeAI/OfficeCLI/blob/main/WordHandler.HtmlPreview.Charts.cs), [`PowerPointHandler.HtmlPreview.Charts.cs`](https://github.com/iOfficeAI/OfficeCLI/blob/main/PowerPointHandler.HtmlPreview.Charts.cs), and [`ExcelHandler.HtmlPreview.Charts.cs`](https://github.com/iOfficeAI/OfficeCLI/blob/main/ExcelHandler.HtmlPreview.Charts.cs) handle the unique document structures of each application while sharing the core SVG rendering logic.
- The output uses **self-contained SVG** with inline CSS, allowing charts to display correctly in any HTML preview context.
## Frequently Asked Questions
### Does OfficeCLI support all Office chart types?
OfficeCLI supports standard charts defined in the Open XML specification, including column, line, pie, and bar charts. Extended chart types (waterfalls, treemaps, sunbursts) are handled through the `RenderChartExHtml` method in the Word handler, though highly complex custom visualizations may have limited fidelity compared to standard types.
### Is the generated SVG responsive?
The SVG output uses fixed width and height attributes based on the original chart dimensions in the document. While the SVG scales within its container, the renderer preserves the original aspect ratio to maintain visual accuracy with the source Office document.
### Can I customize the CSS styling of rendered charts?
The `ChartSvgRenderer` includes inline CSS within the SVG markup for standalone display. While the library generates default styling based on the document's theme, the resulting HTML fragments can be targeted with external stylesheets using the `chart` and `plot-area` CSS classes.
### Which Office formats support chart rendering in OfficeCLI?
OfficeCLI supports chart rendering from Word documents (.docx), PowerPoint presentations (.pptx), and Excel workbooks (.xlsx). Each format uses specialized handlers to locate chart parts within their respective Open XML package structures, but all utilize the centralized `ChartSvgRenderer` for consistent output.