Charts Component

The Chart component renders dynamic, high-resolution charts directly into your documents and emails. It operates by converting Chart.js configurations into server-rendered image sources (src), making charts compatible across all PDF renderers and email clients without requiring client-side JavaScript execution.

Supported Chart Types

Select a chart type from the component's Traits panel in the Right Inspector:

Data Structure & Payload Requirements

To dynamically render a chart, your payload dataset must supply two core properties: Labels and Datasets.

1. Chart Labels (labels)

Labels define the category names along the X-axis (or segments for Pie/Donut/Radar charts).

• Applicability: Required for bar, line, pie, doughnut, radar, and polarArea. Automatically omitted for scatter and bubble charts.

["January", "February", "March", "April", "May"]

2. Chart Datasets (datasets)

Datasets contain the numeric values, series labels, and color formatting for each data series rendered on the chart.

Payload Data Examples

Example A: Standard Series (Bar, Line, Pie, Donut, Radar, Polar Area)

Standard charts use a simple array of numbers (number[]) mapped to the corresponding indexes of the labels array:

{
  "chartLabels": ["Q1", "Q2", "Q3", "Q4"],
  "chartDatasets": [
    {
      "label": "Revenue 2025",
      "data": [12000, 19000, 15000, 22000],
      "backgroundColor": ["#3b82f6"],
      "borderColor": ["#1d4ed8"]
    },
    {
      "label": "Revenue 2026",
      "data": [14000, 21000, 18000, 26000],
      "backgroundColor": ["#10b981"],
      "borderColor": ["#047857"]
    }
  ]
}

Example B: Coordinate Series (Scatter & Bubble)

Scatter and Bubble charts bypass the labels array and expect coordinate objects (PointData[]):

{
  "chartDatasets": [
    {
      "label": "Project Risk Matrix",
      "data": [
        { "x": 10, "y": 20, "r": 15 },
        { "x": 25, "y": 10, "r": 8 },
        { "x": 30, "y": 40, "r": 22 }
      ],
      "backgroundColor": ["rgba(239, 68, 68, 0.6)"],
      "borderColor": ["#dc2626"]
    }
  ]
}

Binding Dynamic Data

To bind a chart component on the canvas to dynamic payload fields:

1. Select the Chart element on the canvas.
2. Open the Traits Panel in the Right Inspector.
3. Locate the Labels trait and click the Data icon (🗄️) to select your dynamic variable path (e.g., {{analytics.chartLabels}}).
4. Locate the Datasets trait and click the Data icon (🗄️) to select your dynamic dataset array path (e.g., {{analytics.chartDatasets}}).

Styling & Display Configuration

Customized chart traits automatically re-render the image URL whenever changed in the inspector:

Titles & Legend

• Title / Subtitle: Enable and set header text and text colors (textColor).
• Show Legend: Toggle legend visibility and select position (top, bottom, left, right).

Gridlines & Axes

• Show Grid: Toggle background grid lines on Cartesian axes (x, y, r).
• Grid Color: Customize grid stroke color (gridColor).
• Text Color: Globally sets tick and legend label colors.

Dataset Visual Overrides

• Line Tension (tension): Adjusts Bezier curve smoothness for line charts (0 for straight lines, 0.4 for smooth curves).
• Point Radius (pointRadius): Controls the size of data points on line and radar charts.
• Border Width (borderWidth): Sets stroke width for bars, lines, and slices.
• Fill (fill): Fills the area under line chart paths.