Chart Generation Guide

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

Supported Chart Types

DataMagik Document Designer supports four chart types:

TypeFunctionBest ForLine ChartlineChart or chart_lineTrends over time, continuous dataBar ChartbarChart or chart_barComparisons, categorical dataPie ChartpieChart or chart_pieProportions, percentagesDoughnut ChartdoughnutChartProportions with center space

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

Line Charts

Line charts show trends and changes over time with connected data points.

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}}

Sample Data:

{
  "ChartTitle": "Monthly Sales"
}

Multiple Lines

{{lineChart .ComparisonData "comparison" 800 400}}

Sample Data:

{
  "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"]
      }
    ]
  }
}

Complete Example

<div class="report-section">
  <h2>Sales Trend Analysis</h2>
  <p>Year-over-year comparison showing {{.GrowthRate}}% growth</p>
  
  <div class="chart-container">
    {{lineChart .SalesTrend "salesTrend" 800 400}}
  </div>
  
  <div class="chart-summary">
    <p>Peak Month: {{.PeakMonth}}</p>
    <p>Total Revenue: ${{.TotalRevenue | printf "%.2f"}}</p>
  </div>
</div>

Sample Data:

{
  "GrowthRate": 15.5,
  "PeakMonth": "December",
  "TotalRevenue": 567890.50,
  "SalesTrend": {
    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    "datasets": [
      {
        "label": "Monthly Sales",
        "data": [42000, 45000, 48000, 52000, 49000, 53000, 51000, 54000, 56000, 58000, 59000, 61000],
        "borderColor": ["#3b82f6"],
        "backgroundColor": ["rgba(59, 130, 246, 0.2)"]
      }
    ]
  }
}

Bar Charts

Bar charts compare values across categories with vertical or horizontal bars.

Syntax

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

Basic Bar Chart

{{barChart .ProductSales "productSales" 800 400}}

Sample Data:

{
  "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

Compare multiple metrics side by side:

{{barChart .QuarterlyComparison "quarterly" 800 400}}

Sample Data:

{
  "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"]
      }
    ]
  }
}

Complete Example

<div class="sales-report">
  <h2>Regional Sales Performance</h2>
  
  <div class="chart-container">
    {{barChart .RegionalSales "regionalSales" 800 450}}
  </div>
  
  <table class="summary-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>

Sample Data:

{
  "RegionalSales": {
    "labels": ["North", "South", "East", "West", "Central"],
    "datasets": [
      {
        "label": "Sales ($1000s)",
        "data": [450, 380, 520, 410, 340],
        "backgroundColor": ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"]
      }
    ]
  },
  "Regions": [
    {"Name": "North", "Sales": 450000, "Growth": 12.5},
    {"Name": "South", "Sales": 380000, "Growth": 8.3},
    {"Name": "East", "Sales": 520000, "Growth": 15.7},
    {"Name": "West", "Sales": 410000, "Growth": 10.2},
    {"Name": "Central", "Sales": 340000, "Growth": 6.8}
  ]
}

Pie Charts

Pie charts show proportions and percentages of a whole.

Syntax

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

Basic Pie Chart

{{pieChart .MarketShare "marketShare" 600 600}}

Sample Data:

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

CSV Format

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

Complete Example

<div class="distribution-report">
  <h2>Budget Allocation</h2>
  
  <div class="chart-and-legend">
    <div class="pie-chart">
      {{pieChart .BudgetAllocation "budget" 500 500}}
    </div>
    
    <div class="legend-table">
      <h3>Budget Breakdown</h3>
      <table>
        {{range .BudgetItems}}
        <tr>
          <td><span class="color-box" style="background: {{.Color}}"></span></td>
          <td>{{.Category}}</td>
          <td>${{.Amount | printf "%.2f"}}</td>
          <td>{{.Percentage}}%</td>
        </tr>
        {{end}}
        <tfoot>
          <tr class="total">
            <td colspan="2"><strong>Total</strong></td>
            <td><strong>${{.TotalBudget | printf "%.2f"}}</strong></td>
            <td><strong>100%</strong></td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

Sample Data:

{
  "BudgetAllocation": {
    "labels": ["Salaries", "Marketing", "Operations", "R&D", "Infrastructure"],
    "datasets": [
      {
        "label": "Budget",
        "data": [45, 20, 15, 12, 8],
        "backgroundColor": ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"]
      }
    ]
  },
  "BudgetItems": [
    {"Category": "Salaries", "Amount": 450000, "Percentage": 45, "Color": "#3b82f6"},
    {"Category": "Marketing", "Amount": 200000, "Percentage": 20, "Color": "#10b981"},
    {"Category": "Operations", "Amount": 150000, "Percentage": 15, "Color": "#f59e0b"},
    {"Category": "R&D", "Amount": 120000, "Percentage": 12, "Color": "#ef4444"},
    {"Category": "Infrastructure", "Amount": 80000, "Percentage": 8, "Color": "#8b5cf6"}
  ],
  "TotalBudget": 1000000
}

Doughnut Charts

Doughnut charts are pie charts with a center hole, useful for displaying proportions with additional information in the center.

Syntax

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

Basic Doughnut Chart

{{doughnutChart .TrafficSources "traffic" 500 500}}

Sample Data:

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

Complete Example

<div class="analytics-dashboard">
  <h2>Website Analytics</h2>
  <p>Total Visitors: {{.TotalVisitors | printf "%d"}}</p>
  
  <div class="donut-section">
    <div class="chart-wrapper">
      {{doughnutChart .VisitorsBySource "visitorSources" 400 400}}
    </div>
    
    <div class="source-breakdown">
      <h3>Traffic Sources</h3>
      {{range .Sources}}
      <div class="source-item">
        <span class="dot" style="background: {{.Color}}"></span>
        <span class="name">{{.Name}}</span>
        <span class="count">{{.Count}}</span>
        <span class="percent">{{.Percentage}}%</span>
      </div>
      {{end}}
    </div>
  </div>
</div>

Sample Data:

{
  "TotalVisitors": 125430,
  "VisitorsBySource": {
    "labels": ["Organic Search", "Direct", "Social Media", "Referral", "Email Campaign"],
    "datasets": [
      {
        "label": "Visitors",
        "data": [52680, 35120, 18815, 12543, 6272],
        "backgroundColor": ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"]
      }
    ]
  },
  "Sources": [
    {"Name": "Organic Search", "Count": 52680, "Percentage": 42, "Color": "#3b82f6"},
    {"Name": "Direct", "Count": 35120, "Percentage": 28, "Color": "#10b981"},
    {"Name": "Social Media", "Count": 18815, "Percentage": 15, "Color": "#f59e0b"},
    {"Name": "Referral", "Count": 12543, "Percentage": 10, "Color": "#ef4444"},
    {"Name": "Email Campaign", "Count": 6272, "Percentage": 5, "Color": "#8b5cf6"}
  ]
}

Data Formats

JSON Format (Full Control)

Provides complete control over chart appearance and data:

{
  "ChartData": {
    "labels": ["Label 1", "Label 2", "Label 3"],
    "datasets": [
      {
        "label": "Dataset Name",
        "data": [value1, value2, value3],
        "backgroundColor": ["#color1", "#color2", "#color3"],
        "borderColor": ["#border1", "#border2", "#border3"],
        "borderWidth": 2
      }
    ]
  }
}

CSV Format (Simple)

Quick format for simple charts:

{{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}}

Format: Label,Value|Label,Value|...

Styling and Customization

Color Schemes

Professional Blues:

"backgroundColor": ["#1e40af", "#3b82f6", "#60a5fa", "#93c5fd", "#dbeafe"]

Success Greens:

"backgroundColor": ["#065f46", "#10b981", "#34d399", "#6ee7b7", "#d1fae5"]

Warning Oranges:

"backgroundColor": ["#c2410c", "#f59e0b", "#fbbf24", "#fcd34d", "#fef3c7"]

Danger Reds:

"backgroundColor": ["#991b1b", "#ef4444", "#f87171", "#fca5a5", "#fee2e2"]

Multi-Color (Vibrant):

"backgroundColor": ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"]

Grayscale:

"backgroundColor": ["#111827", "#374151", "#6b7280", "#9ca3af", "#d1d5db", "#f3f4f6"]

Size Recommendations

Small (Thumbnails):

300x200 pixels - Reports, small sections

Medium (Standard):

600x400 pixels - Standard reports
800x400 pixels - Wide charts

Large (Full Page):

1000x600 pixels - Feature charts
1200x800 pixels - Presentation slides

Square (Pie/Doughnut):

400x400 pixels - Small pie charts
600x600 pixels - Standard pie charts
800x800 pixels - Large pie charts

Real-World Examples

Example 1: Monthly Performance Dashboard

<!DOCTYPE html>
<html>
<head>
  <title>Performance Dashboard</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    .dashboard { max-width: 1200px; margin: 0 auto; }
    .header { text-align: center; margin-bottom: 30px; }
    .chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
    .chart-section { background: #f9fafb; padding: 20px; border-radius: 8px; }
    .metric { text-align: center; margin: 10px 0; }
    .metric-value { font-size: 2em; font-weight: bold; color: #3b82f6; }
    .metric-label { color: #6b7280; }
  </style>
</head>
<body>
  <div class="dashboard">
    <div class="header">
      <h1>Monthly Performance Report</h1>
      <p>{{.ReportMonth | dateFormat "January 2006"}}</p>
    </div>
    
    <div class="metrics-row">
      <div class="metric">
        <div class="metric-value">${{.TotalRevenue | printf "%.0f"}}</div>
        <div class="metric-label">Total Revenue</div>
      </div>
      <div class="metric">
        <div class="metric-value">{{.NewCustomers}}</div>
        <div class="metric-label">New Customers</div>
      </div>
      <div class="metric">
        <div class="metric-value">{{.GrowthRate}}%</div>
        <div class="metric-label">Growth Rate</div>
      </div>
    </div>
    
    <div class="chart-grid">
      <!-- Revenue Trend -->
      <div class="chart-section">
        <h2>Revenue Trend</h2>
        {{lineChart .RevenueTrend "revenue" 550 300}}
      </div>
      
      <!-- Category Distribution -->
      <div class="chart-section">
        <h2>Revenue by Category</h2>
        {{pieChart .CategoryDistribution "categories" 500 300}}
      </div>
      
      <!-- Regional Performance -->
      <div class="chart-section">
        <h2>Regional Sales</h2>
        {{barChart .RegionalSales "regions" 550 300}}
      </div>
      
      <!-- Customer Acquisition -->
      <div class="chart-section">
        <h2>Customer Acquisition</h2>
        {{lineChart .CustomerGrowth "customers" 550 300}}
      </div>
    </div>
  </div>
</body>
</html>

Example 2: Sales Report with Multiple Charts

<div class="sales-report">
  <h1>Quarterly Sales Report</h1>
  <p>Q{{.Quarter}} {{.Year}}</p>
  
  <!-- Executive Summary -->
  <section class="summary">
    <h2>Executive Summary</h2>
    <p>{{.ExecutiveSummary}}</p>
    
    <div class="kpis">
      <div class="kpi">
        <span class="value">${{.TotalSales | printf "%.2f"}}</span>
        <span class="label">Total Sales</span>
      </div>
      <div class="kpi">
        <span class="value">{{.UnitssSold}}</span>
        <span class="label">Units Sold</span>
      </div>
      <div class="kpi">
        <span class="value">${{.AverageOrderValue | printf "%.2f"}}</span>
        <span class="label">Avg Order Value</span>
      </div>
    </div>
  </section>
  
  <!-- Sales Trend -->
  <section class="chart-section">
    <h2>Monthly Sales Trend</h2>
    {{lineChart .MonthlySales "monthlySales" 800 400}}
    
    <div class="insights">
      <p><strong>Key Insight:</strong> {{.SalesInsight}}</p>
    </div>
  </section>
  
  <!-- Product Performance -->
  <section class="chart-section">
    <h2>Top Performing Products</h2>
    {{barChart .TopProducts "topProducts" 800 400}}
    
    <table class="product-details">
      <thead>
        <tr>
          <th>Product</th>
          <th>Units</th>
          <th>Revenue</th>
          <th>% of Total</th>
        </tr>
      </thead>
      <tbody>
        {{range .ProductDetails}}
        <tr>
          <td>{{.Name}}</td>
          <td>{{.Units}}</td>
          <td>${{.Revenue | printf "%.2f"}}</td>
          <td>{{.Percentage}}%</td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </section>
  
  <!-- Channel Distribution -->
  <section class="chart-section">
    <h2>Sales by Channel</h2>
    <div class="side-by-side">
      <div class="chart-half">
        {{doughnutChart .ChannelDistribution "channels" 400 400}}
      </div>
      <div class="table-half">
        <table>
          {{range .ChannelBreakdown}}
          <tr>
            <td>{{.Channel}}</td>
            <td>${{.Amount | printf "%.2f"}}</td>
            <td>{{.Percent}}%</td>
          </tr>
          {{end}}
        </table>
      </div>
    </div>
  </section>
</div>

Example 3: Analytics Report with CSV Charts

<div class="analytics-report">
  <h1>Website Analytics Summary</h1>
  <p>{{.PeriodStart | dateFormat "Jan 2"}} - {{.PeriodEnd | dateFormat "Jan 2, 2006"}}</p>
  
  <!-- Page Views Over Time -->
  <section>
    <h2>Daily Page Views</h2>
    {{chart_line "Page Views" .DailyPageViewsCSV 800 300}}
  </section>
  
  <!-- Top Pages -->
  <section>
    <h2>Most Visited Pages</h2>
    {{chart_bar "Top Pages" .TopPagesCSV 800 300}}
  </section>
  
  <!-- Traffic Sources -->
  <section>
    <h2>Traffic Sources</h2>
    {{chart_pie "Traffic Distribution" .TrafficSourcesCSV 600 600}}
  </section>
  
  <!-- Device Types -->
  <section>
    <h2>Device Breakdown</h2>
    {{chart_pie "Devices" "Desktop,65|Mobile,30|Tablet,5" 500 500}}
  </section>
</div>

Sample Data:

{
  "PeriodStart": "2025-09-01",
  "PeriodEnd": "2025-09-30",
  "DailyPageViewsCSV": "Sep 1,1200|Sep 2,1350|Sep 3,1180|Sep 4,1420|Sep 5,1560",
  "TopPagesCSV": "Home,5420|Products,3280|About,1850|Contact,920|Blog,1540",
  "TrafficSourcesCSV": "Organic,42|Direct,28|Social,15|Referral,10|Email,5"
}

Best Practices

Data Preparation

Clean Data: Remove nulls and invalid values
Consistent Labels: Use clear, concise labels
Appropriate Ranges: Ensure data values are in reasonable ranges
Sort When Needed: Sort bar chart data for easier comparison

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, but with space for center content

Layout

Size Appropriately: Larger charts for complex data
Include Context: Add titles, labels, and legends
White Space: Don't crowd charts together
Responsive: Consider how charts look in print/PDF

Colors

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

Troubleshooting

Chart Not Displaying

Check data structure: Verify JSON format matches expected structure
Validate values: Ensure data values are numbers, not strings
Check syntax: Verify function name and parameters
Test with simple data: Start with minimal data to isolate issues

Chart Looks Wrong

Adjust size: Try different width/height values
Check colors: Verify backgroundColor array has enough colors
Simplify data: Reduce number of data points if cluttered
Review labels: Ensure labels array matches data array length

Next Steps

Check out Starter Templates for complete examples
Learn about API Integration
Explore N8N Integration

Pro Tip: Always include a data table alongside complex charts for accessibility and clarity!

Chart Generation Guide

Table of Contents

Supported Chart Types

Line Charts

Syntax

JSON Data Format

CSV Format (Simplified)

Multiple Lines

Complete Example

Bar Charts

Syntax

Basic Bar Chart

CSV Format

Grouped Bar Chart

Complete Example

Pie Charts

Syntax

Basic Pie Chart

CSV Format

Complete Example

Doughnut Charts

Syntax

Basic Doughnut Chart

Complete Example

Data Formats

JSON Format (Full Control)

CSV Format (Simple)

Styling and Customization

Color Schemes

Size Recommendations

Real-World Examples

Example 1: Monthly Performance Dashboard

Example 2: Sales Report with Multiple Charts

Example 3: Analytics Report with CSV Charts

Best Practices

Data Preparation

Chart Selection

Layout

Colors

Troubleshooting

Chart Not Displaying

Chart Looks Wrong

Next Steps