Embedding Charts in Report Wizard

Overview

Leon provides a dedicated charting service at https://charts.leon.aero that allows you to embed dynamically generated charts directly into your Report Wizard templates. The service is powered by QuickChart and supports all chart types available in the QuickChart documentation.

Charts are rendered as images and can be embedded in report templates (HEADER, BODY, or FOOTER tabs) using a standard HTML <img> tag. The chart configuration and data are passed as URL parameters.

This feature is particularly useful for operators who want to create visually rich reports with data visualizations such as pie charts, bar charts, line charts, and more — all generated dynamically from report data.

URL Structure

The basic URL structure for embedding a chart is:

https://charts.leon.aero/chart?bkg=white&w=220&h=220&c={{ chartLayout|merge({"data": chartData})|json_encode()|url_encode }}

Parameters

Parameter	Description	Example

Parameter	Description	Example
`bkg`	Background color of the chart	`white`, `transparent`, `#f0f0f0`
`w`	Width of the chart image in pixels	`220`, `300`, `500`
`h`	Height of the chart image in pixels	`220`, `300`, `500`
`c`	Full Chart.js configuration object (URL-encoded)	See examples below

The c parameter contains the complete chart definition including chart type, data, labels, colors, and any additional options — all encoded as a URL-safe JSON string.

Step-by-step Example: Pie Chart (Aircraft Owners)

The following example demonstrates how to generate a pie chart showing time distribution across aircraft owners. This code should be placed in the BODY tab of the Edit Template editor.

Step 1 — Prepare the chart data

Use available report variables to build the data structure:

{% set chartData = {
    "labels": []|merge(acftData.ownersChartData|map(t => t.owner)),
    "datasets": [{
        "backgroundColor": colorsDef,
        "data": []|merge(acftData.ownersChartData|map(t => t.time))
    }]
} %}

labels — an array of owner names, pulled from the report data
datasets — contains the data values and colors for each segment
colorsDef — a predefined array of colors available in the template

Step 2 — Define the chart layout

Specify the chart type and display options:

{% set chartLayout = {
    "type": "pie",
    "options": {
        "plugins": {
            "legend": {
                "position": "bottom"
            }
        }
    }
} %}

You can change "type": "pie" to any supported chart type (see the list below).

Step 3 — Embed the chart image

Insert the chart into the template using an <img> tag:

<img src="https://charts.leon.aero/chart?bkg=white&w=300&h=300&c={{ chartLayout|merge({'data': chartData})|json_encode()|url_encode }}" />

The chart will be rendered as a 300×300 pixel image with a white background.

Supported Chart Types

You can use any chart type supported by Chart.js / QuickChart:

Chart Type	Value	Best For

Chart Type	Value	Best For
Pie	`pie`	Proportional distribution (e.g., revenue by owner)
Doughnut	`doughnut`	Similar to pie, with a hollow center
Bar	`bar`	Comparing values across categories
Horizontal Bar	`horizontalBar`	Bar chart with horizontal orientation
Line	`line`	Trends over time
Radar	`radar`	Comparing multiple variables
Polar Area	`polarArea`	Similar to pie with equal-angle segments

For a complete list and advanced configuration, see the QuickChart Chart Types documentation.

Customization Options

Chart size

Adjust the w (width) and h (height) parameters in the URL:

?bkg=white&w=500&h=300&c=...

Colors

You can use the built-in colorsDef variable or define custom colors directly:

"backgroundColor": ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF"]

Chart options

The options object supports all Chart.js configuration options, including:

Legend — position, display, font size
Title — text, font, display
Tooltips — callbacks, formatting
Scales — axis configuration for bar/line charts

Example with title and custom legend:

{% set chartLayout = {
    "type": "bar",
    "options": {
        "plugins": {
            "title": {
                "display": true,
                "text": "Flight Hours by Aircraft"
            },
            "legend": {
                "display": false
            }
        },
        "scales": {
            "y": {
                "beginAtZero": true
            }
        }
    }
} %}

Tips and Best Practices

Test your chart first — Use the QuickChart Sandbox to build and preview your chart configuration before adding it to the Report Wizard template
Charts work in all export formats — Charts are rendered server-side as images, so they display correctly in PDF, Excel, and on-screen previews
Keep chart sizes reasonable — Very large charts (over 800px) may affect report layout and export performance
Use meaningful colors — Choose distinct, accessible colors for chart segments to ensure readability
Data encoding — The json_encode() and url_encode() Twig filters handle the conversion of your data into a URL-safe format automatically

Reference Links

QuickChart Documentation — Full API reference and chart configuration guide
QuickChart Sandbox — Interactive tool for testing chart configurations
QuickChart Chart Types — Complete list of supported chart types
Chart.js Documentation — Underlying charting library documentation