Chart

Chart fields display data visualizations. They support bar, line, area, pie, and radar charts for presenting data in visual form.

Supported Chart Types

Type	Best For
Bar	Comparing categories
Line	Trends over time
Area	Volume/cumulative data
Pie	Part-to-whole relationships
Radar	Multi-variable comparison

Editor Settings

Click the Advanced button to open the Chart editor. The summary shows:

Display	Description
Type	Bar Chart, Line Chart, Area Chart, Pie Chart, or Radar Chart
Data Series	Number of data series configured
Data Points	Number of data points

Sizing Behavior

Mode	Effect
Fixed	Chart has exact pixel dimensions

Note: Chart fields only support Fixed sizing for precise control over chart dimensions.

Chart Configuration

Cartesian Charts (Bar, Line, Area)

These charts use X and Y axes:

Option	Description
Show grid	Display background grid lines
Show X axis	Display horizontal axis
Show Y axis	Display vertical axis
Show legend	Display data series legend

Data structure:

{
  "data": [
    { "name": "Jan", "sales": 400, "profit": 100 },
    { "name": "Feb", "sales": 300, "profit": 80 },
    { "name": "Mar", "sales": 500, "profit": 150 }
  ],
  "series": [
    { "dataKey": "sales", "name": "Sales", "color": "#8884d8" },
    { "dataKey": "profit", "name": "Profit", "color": "#82ca9d" }
  ]
}

Polar Charts (Pie, Radar)

These charts use circular layouts:

Option	Description
Show polar grid	Display circular grid
Show percentage	Display % labels (pie only)
Colorful pie	Use multiple colors (pie only)
Show legend	Display data legend

Pie chart data structure:

{
  "data": [
    { "name": "Desktop", "value": 400 },
    { "name": "Mobile", "value": 300 },
    { "name": "Tablet", "value": 100 }
  ]
}

API Content Format

Charts are typically Static because their data structure is complex. However, you can make chart data dynamic:

{
  "content": {
    "sales_chart": {
      "data": [
        { "name": "Q1", "revenue": 10000 },
        { "name": "Q2", "revenue": 15000 },
        { "name": "Q3", "revenue": 12000 },
        { "name": "Q4", "revenue": 18000 }
      ]
    }
  }
}

Examples

Sales Comparison (Bar Chart)

Compare monthly sales across regions:

Type: Bar
Data: Monthly values by region
Series: One per region with distinct colors

Revenue Trend (Line Chart)

Show revenue growth over time:

Type: Line
Data: Monthly or quarterly values
Options: Show grid, X axis, Y axis

Display proportion of market segments:

Type: Pie
Data: Segment names and values
Options: Show percentage, Colorful pie

Best Practices

Start with Static charts — Configure data in the editor first
Use appropriate chart types — Bar for comparisons, Line for trends, Pie for proportions
Keep data series manageable — 2-4 series for readability
Consider chart size — Ensure enough space for labels and legends
Test with real data — Verify formatting with actual values

Chart

On this page