Skip to main content

Custom Charts (Vega-Lite)

When the built-in charts do not cover what you need, a custom chart renders any chart you like from a Vega-Lite spec. FlexiPage feeds your records into the spec as the data, so you write only the chart structure.

For choosing the source table and using dynamic filters to automate reports, see the Report Automation guide.

Add a custom chart​

  1. Type / in the editor and choose Custom Chart (Vega-Lite). It appears with sample data.
  2. Click the chart to open the Properties panel.

Set the data​

  1. Under Source, pick the Base, the Table, and optionally a View.
  2. Optionally add a Filter, and a Title and Description.

Write the spec​

In the Vega-Lite spec box, write your spec. A simple bar chart looks like this:

{
  "mark": "bar",
  "encoding": {
    "x": { "field": "Category", "type": "nominal" },
    "y": { "field": "Amount", "type": "quantitative", "aggregate": "sum" }
  }
}

Two rules to keep in mind:

  • Do not add a data block. FlexiPage injects your source records automatically. Just reference your field names in the encodings. Aggregation, such as "aggregate": "sum", happens inside the spec.
  • Do not set width or height. Resize the chart by clicking it in the document and dragging the handles.

The panel lists the field names available from your table and links to the Vega-Lite example gallery for ideas.

note

The editor draws the chart with sample data. Turn on preview to see it built from your real records.