How OfficeCLI Renders Charts in HTML: Open XML to SVG Conversion

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 (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.

// 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 (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 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.

// 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 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.

// Inside PowerPointHandler.HtmlPreview.Charts.cs
private void RenderChart(StringBuilder sb, GraphicFrame gf,
                         SlidePart slidePart, Dictionary<string,string> 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 (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:

public void RenderChartSvgContent(StringBuilder sb, ChartInfo info,
                                 int svgW, int svgH)
{
    sb.Append($"<svg width=\"{svgW}\" height=\"{svgH}\" xmlns=\"http://www.w3.org/2000/svg\">");
    // Emit axes, series paths, markers, and legend based on ChartInfo
    sb.Append("<g class=\"plot-area\">...</g>");
    sb.Append("</svg>");
}

The resulting HTML fragment wraps the SVG in semantic markup:

<div class="chart">
  <div class="title">Revenue 2024</div>
  <svg width="500" height="300">
    <g class="plot-area">...</g>
  </svg>
  <div class="legend">...</div>
</div>

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, PowerPointHandler.HtmlPreview.Charts.cs, and 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}