Data Visualization

Flow-Like pages can present analytical results with NivoChart, PlotlyChart, Table, and supporting text components. Choose the visual from the question and data shape, then keep units, scope, and freshness visible.

Build a quarterly chart

This example uses invented data in USD thousands. It needs no database or AI model.

1. Create a Page and open it in the visual builder.
2. Open Dev Mode and paste the JSON below into the editor. It replaces the components while keeping the Page’s current widget references and canvas settings. The example uses root for the Page’s root container. If your root container has a different ID, keep that ID in the first component.
3. Click Apply Changes, then close Dev Mode to return to the canvas. You should see four groups, Q1 through Q4, with revenue and profit bars. Q4 has the tallest revenue bar at 210.

Chart surface

{
  "components": [
    {
      "id": "root",
      "component": {
        "type": "column",
        "children": {
          "explicitList": ["revenue"]
        }
      }
    },
    {
      "id": "revenue",
      "component": {
        "type": "nivoChart",
        "chartType": {
          "literalString": "bar"
        },
        "title": {
          "literalString": "Quarterly revenue and profit (USD thousands)"
        },
        "height": {
          "literalNumber": 350
        },
        "data": {
          "literalJson": "[{\"quarter\":\"Q1\",\"revenue\":120,\"profit\":30},{\"quarter\":\"Q2\",\"revenue\":150,\"profit\":42},{\"quarter\":\"Q3\",\"revenue\":170,\"profit\":55},{\"quarter\":\"Q4\",\"revenue\":210,\"profit\":70}]"
        },
        "indexBy": {
          "literalString": "quarter"
        },
        "keys": {
          "literalJson": "[\"revenue\",\"profit\"]"
        },
        "barStyle": {
          "literalJson": "{\"groupMode\":\"grouped\"}"
        },
        "showLegend": {
          "literalBool": true
        },
        "animate": {
          "literalBool": false
        }
      }
    }
  ]
}

literalJson is a JSON string inside the component payload. indexBy names the category field, and keys identifies the numeric series. These names must match the data fields exactly.

The sample renders as follows. The preview uses the same Nivo library and chart-data parser as Flow-Like’s Markdown preview.

Loading chart preview…

Quarter	Revenue (USD thousands)	Profit (USD thousands)
Q1	120	30
Q2	150	42
Q3	170	55
Q4	210	70

Replace the data from a Flow

Bind a Page button or load action to a workflow Event. Add Push Data to Chart after that Event and set:

Pin	Value
Chart	An element reference with id set to revenue, the component ID above
Library	Nivo
Format	JSON
Data	The JSON array below, parsed as structured data

Replacement chart data

[
  { "quarter": "Q1", "revenue": 130, "profit": 35 },
  { "quarter": "Q2", "revenue": 160, "profit": 48 }
]

Obtain Chart with Get Element or the builder’s element picker. Connect the execution wire from the Event to Push Data to Chart. Invoke it through the Page so the run has an active surface to update. The result has two groups, and Q2 revenue is 160. Running an unrelated event from Studio does not by itself open that Page.

Before pushing query results, handle an empty array with an explicit “No results for these filters” message. Handle query failure with a visible error and retain the last successful chart only when it is labeled as stale. Never substitute zero for an unknown value.

Chart libraries

Component	Best fit
NivoChart	Common dashboard charts with a consistent A2UI configuration
PlotlyChart	Scientific, statistical, and more specialized interactive plots
Table	Precise values, record review, and drill-down

NivoChart supports chart types including bar, line, pie, radar, heatmap, scatter, funnel, treemap, sunburst, calendar, bump, area bump, circle packing, network, Sankey, stream, swarm plot, Voronoi, waffle, Marimekko, parallel coordinates, radial bar, box plot, bullet, and chord.

PlotlyChart exposes series, axis, data, layout, and configuration properties for Plotly-compatible views.

Choose the visual from the question

Question	Good starting point	Watch for
How does a value change over time?	Line chart	Missing intervals, timezone, uneven sampling
How do categories compare?	Sorted bar chart	Too many categories, truncated labels
What contributes to a total?	Stacked bar	Parts that do not share a real whole
What is the distribution?	Histogram or box plot	Bin choice, outliers, sample size
How do two measures relate?	Scatter plot	Overplotting, hidden segments
Where is intensity concentrated?	Heatmap	Unlabeled color scale
How does volume flow?	Sankey or funnel	Implied causality, inconsistent stages
Which exact records need action?	Table	Unbounded rows, missing sort or filters

Use pie or donut charts only for a small number of meaningful parts. Avoid three-dimensional effects that distort area or angle.

Configure the component

NivoChart

The core properties include:

• chart type;
• title;
• data;
• height;
• colors;
• animation;
• legend visibility and position;
• index field and value keys;
• margins and axes;
• chart-specific style properties;
• an advanced Nivo configuration override.

The required data shape varies by chart type. Validate the final chart input instead of assuming one table shape works for every chart.

PlotlyChart

PlotlyChart supports:

• chart type and title;
• one or more named series;
• x- and y-axis configuration;
• data, layout, and config values;
• width, height, responsive behavior, and legend placement.

Use Plotly when its trace and layout model better represents the analysis. Keep the page-level visual language consistent even when two libraries are used.

Push data from a workflow

The A2UI chart node family includes:

Need	Node
Replace chart data	Push Data to Chart
Update chart layout	Set Chart Layout
Update visual style	Set Chart Style
Apply Nivo configuration	Set Nivo Chart Config
Prepare chart data with an agent	Chart Data Agent

A typical dashboard workflow:

1. reads validated filter values;
2. queries and aggregates the source;
3. checks row count and freshness;
4. pushes structured results to the chart and detail table;
5. updates title, scope, and status text;
6. handles empty and error states explicitly.

Aggregate before sending data to the page. Thousands of raw event rows rarely make a more useful interactive chart than a purpose-built query result.

Pair charts with evidence

A chart should be supported by:

• a title that states the question or measure;
• visible units and time range;
• the aggregation and important filters;
• a freshness timestamp;
• a small table or drill-down route for exact values;
• a note for known exclusions or incomplete data.

When a dashboard uses governed KPIs, link the metric definition or repeat the essential formula and grain near the view.

Color and themes

• Use a small, stable palette across a dashboard.
• Reserve semantic colors for consistent meanings such as success, warning, and failure.
• Check lines, labels, gridlines, selections, and tooltips in light and dark mode.
• Do not encode status or category with color alone.
• Use a sequential scale for ordered magnitude and a diverging scale only around a meaningful midpoint.
• Keep sufficient contrast between adjacent series and the page background.

Axes and formatting

• Start quantitative axes at zero when bar length represents magnitude, unless a clearly marked exception is necessary.
• Label units once and format values consistently.
• Use the app’s reporting timezone and state it when dates can be ambiguous.
• Keep decimal precision appropriate to the decision.
• Sort categories deliberately.
• Avoid dual axes when separate aligned charts communicate the relationship more honestly.

Interaction

Use interactions to answer a next question:

• filter or highlight a related view;
• navigate to a detail page;
• reveal a tooltip with exact values;
• select records for a bounded workflow action.

Preserve selected filters in route or query state when the view should be shareable. Keep destructive actions outside ordinary chart gestures.

Accessible visualization

• Provide a textual summary of the main finding.
• Offer a table or equivalent data view for exact values.
• Use visible focus states and keyboard-accessible controls.
• Keep labels readable at the smallest supported layout.
• Avoid rapid or unnecessary animation.
• Announce loading, empty, error, and refreshed states.

Dashboard checklist

• Every chart answers a specific question
• Data shape matches the selected chart type
• Units, filters, time range, and freshness are visible
• Query output is aggregated and bounded
• Exact values are available in a table or drill-down
• Color works in light and dark mode and is not the only signal
• Loading, empty, stale, and error states are distinct
• Interactions lead to a useful next step
• The main finding is available as text

Troubleshooting

Symptom	Check
Chart does not render	Component ID, chart type, required data shape
Labels or series are missing	Index field, keys, series names, null values
Scale is misleading	Units, aggregation, axis bounds, category order
Theme looks wrong	Explicit colors, contrast, tooltip and grid styles
Page is slow	Row count, number of series, aggregation, animation
Chart and table disagree	Query versions, filters, refresh timing

Next steps

• Building internal tools
• Business intelligence
• DataFusion and SQL
• AI-powered analysis