Chart Generation Guide

Create data-driven charts in your document templates for reports, dashboards, and analytics.

Table of Contents

1. Supported Chart Types
2. Line Charts
3. Bar Charts
4. Pie Charts
5. Doughnut Charts
6. Data Formats
7. Styling and Customization
8. Real-World Examples
9. Best Practices

1. Supported Chart Types

All charts are rendered as base64-encoded images embedded directly in your HTML/PDF.

2. Line Charts

Syntax

{{lineChart .ChartData "elementId" width height}}

JSON Data Format

{{lineChart .SalesData "salesChart" 800 400}}

Sample Data:

{
  "SalesData": {
    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    "datasets": [{
      "label": "2025 Sales",
      "data": [12000, 15000, 13500, 18000, 21000, 19500],
      "borderColor": ["#3b82f6"],
      "backgroundColor": ["rgba(59, 130, 246, 0.1)"]
    }]
  }
}

CSV Format (Simplified)

{{chart_line "Monthly Sales" "Jan,12000|Feb,15000|Mar,13500|Apr,18000" 800 400}}

Multiple Lines

{
  "ComparisonData": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [
      { "label": "2024", "data": [45000, 52000, 48000, 61000], "borderColor": ["#3b82f6"] },
      { "label": "2025", "data": [48000, 56000, 53000, 67000], "borderColor": ["#10b981"] }
    ]
  }
}

3. Bar Charts

Syntax

{{barChart .ChartData "elementId" width height}}

Basic Bar Chart

{
  "ProductSales": {
    "labels": ["Product A", "Product B", "Product C", "Product D"],
    "datasets": [{
      "label": "Units Sold",
      "data": [150, 230, 180, 290],
      "backgroundColor": ["#3b82f6", "#10b981", "#f59e0b", "#ef4444"]
    }]
  }
}

CSV Format

{{chart_bar "Top Products" "Product A,150|Product B,230|Product C,180" 800 400}}

Grouped Bar Chart

{
  "QuarterlyComparison": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [
      { "label": "Revenue", "data": [125000, 145000, 138000, 167000], "backgroundColor": ["#3b82f6"] },
      { "label": "Expenses", "data": [98000, 102000, 105000, 110000], "backgroundColor": ["#ef4444"] },
      { "label": "Profit", "data": [27000, 43000, 33000, 57000], "backgroundColor": ["#10b981"] }
    ]
  }
}

4. Pie Charts

Syntax

{{pieChart .ChartData "elementId" width height}}

Example

{
  "MarketShare": {
    "labels": ["Product A", "Product B", "Product C", "Others"],
    "datasets": [{
      "data": [35, 25, 20, 20],
      "backgroundColor": ["#3b82f6", "#10b981", "#f59e0b", "#8b5cf6"]
    }]
  }
}

CSV Format

{{chart_pie "Revenue Distribution" "Services,45|Products,35|Licenses,20" 600 600}}

5. Doughnut Charts

Syntax

{{doughnutChart .ChartData "elementId" width height}}

Example

{
  "TrafficSources": {
    "labels": ["Organic", "Direct", "Social", "Referral", "Email"],
    "datasets": [{
      "data": [42, 28, 15, 10, 5],
      "backgroundColor": ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"]
    }]
  }
}

6. Data Formats

JSON Format (Full Control)

{
  "ChartData": {
    "labels": ["Label 1", "Label 2", "Label 3"],
    "datasets": [{
      "label": "Dataset Name",
      "data": [10, 20, 30],
      "backgroundColor": ["#color1", "#color2", "#color3"],
      "borderColor": ["#border1"],
      "borderWidth": 2
    }]
  }
}

CSV Format (Simple)

{{chart_line "Title" "Label1,Value1|Label2,Value2|Label3,Value3" width height}}
{{chart_bar "Title" "A,10|B,20|C,15" width height}}
{{chart_pie "Title" "Item1,30|Item2,50|Item3,20" width height}}

CSV format: Label,Value|Label,Value|...

7. Styling and Customization

Color Schemes

Size Recommendations

8. Real-World Examples

Performance Dashboard

<div class="dashboard">
  <h1>Monthly Performance Report</h1>
  <p>{{.ReportMonth | dateFormat "January 2006"}}</p>
  
  <div class="chart-grid">
    <div>
      <h2>Revenue Trend</h2>
      {{lineChart .RevenueTrend "revenue" 550 300}}
    </div>
    <div>
      <h2>Revenue by Category</h2>
      {{pieChart .CategoryDistribution "categories" 500 300}}
    </div>
    <div>
      <h2>Regional Sales</h2>
      {{barChart .RegionalSales "regions" 550 300}}
    </div>
    <div>
      <h2>Customer Growth</h2>
      {{lineChart .CustomerGrowth "customers" 550 300}}
    </div>
  </div>
</div>

Sales Report with Table

<div class="sales-report">
  <h2>Regional Sales</h2>
  {{barChart .RegionalSales "regionalSales" 800 450}}
  
  <table>
    <thead><tr><th>Region</th><th>Sales</th><th>Growth</th></tr></thead>
    <tbody>
      {{range .Regions}}
      <tr>
        <td>{{.Name}}</td>
        <td>${{.Sales | printf "%.2f"}}</td>
        <td>{{.Growth}}%</td>
      </tr>
      {{end}}
    </tbody>
  </table>
</div>

9. Best Practices

Chart Selection

• Line Charts — Time series, trends, continuous data
• Bar Charts — Comparisons, rankings, discrete categories
• Pie Charts — Proportions, percentages (limit to 5-7 slices)
• Doughnut Charts — Like pie, with space for center content

Data Preparation

• Clean Data — Remove nulls and invalid values
• Consistent Labels — Use clear, concise labels
• Sort When Needed — Sort bar chart data for easier comparison

Layout

• Size Appropriately — Larger charts for complex data
• Include Context — Add titles, labels, and legends
• White Space — Don't crowd charts together

Colors

• Accessibility — Use high-contrast colors
• Consistency — Same color scheme throughout document
• Meaning — Use colors meaningfully (red=danger, green=success)
• Limit Palette — 3-6 colors maximum

Troubleshooting

• Not displaying? — Check JSON structure, verify function name and parameters
• Looks wrong? — Adjust size, check backgroundColor array length matches data
• Cluttered? — Reduce data points, simplify labels