AddThisFeature

Chart Builder

Let someone pick a data source, choose the fields for each axis, and save the chart.

involved Editors & Builders

What it adds

A guided builder that turns a data source and a field selection into a saved chart, placeable on the app's dashboards.

What your agent is told to do

5
  1. 1

    Expose a defined set of data sources with typed fields rather than a free query box. The builder should know which fields are dates, categories and measures, because that is what makes the field pickers sensible.

  2. 2

    Render through the app's existing chart components and colour tokens. If Chart Color Tokens exists, use it; a builder that introduces its own palette will not match the dashboards the charts land on.

  3. 3

    Save charts as objects the app's dashboards can already host. If Customizable Dashboard Widgets exists, a saved chart becomes one of its widgets rather than a new kind of tile.

  4. 4

    Give every saved chart the accessible summary and data table the app already provides for charts, so the numbers are reachable without reading the picture.

  5. 5

    Do not offer every chart type for every field selection. Filter the options to the ones that produce a readable result, and explain why a combination is unavailable rather than hiding it silently.

Edge cases it handles

8
  • Some field and chart-type pairs produce nonsense: a pie of a continuous measure, a time series with no date field, a stacked bar of unrelated units. Block those combinations at selection time and say what is missing.
  • A source with a million rows must not be plotted point by point. Cap the result set, aggregate into buckets by default, and tell the user when the chart is showing an aggregate rather than every row.
  • A saved chart is run for whoever opens it, not whoever built it. Apply the viewer's row-level permissions at query time, or a shared dashboard becomes a data leak.
  • Nulls, zeroes and empty time buckets are three different things. Decide for each chart type whether a gap is drawn as zero, as a break in the line, or as nothing, and be consistent across the app.
  • Source fields get renamed and removed. A saved chart pointing at a field that no longer exists must show a clear broken state with a way to remap it, not an empty chart or a stack trace.
  • Charts must respect the viewer's locale and time zone for dates and numbers, or two people looking at the same dashboard will read different days.
  • A query that runs too long needs a timeout and a visible message. A dashboard of six charts must not hold the page hostage because one source is slow.
  • An empty result is a legitimate outcome. Show the app's empty state with the filters that produced it, not a blank rectangle.

Definition of done

9
  • A user can choose a source, map fields to axes, pick a chart type and save the result to a dashboard.
  • Chart types incompatible with the selected fields are unavailable and the reason is stated.
  • Large result sets are capped and aggregated, and the aggregation is disclosed on the chart.
  • Saved charts run against the viewer's permissions, not the author's.
  • Nulls, zeroes and missing time buckets render according to a documented rule.
  • A chart whose source field was renamed or removed shows a broken state with a remap path.
  • Every saved chart carries the app's accessible summary and underlying data table.
  • The feature matches the existing design system.
  • No existing functionality is broken.

Related features

How it works

  1. 1

    Copy the link

    Grab the Markdown instruction URL for this feature.

  2. 2

    Give it to your AI

    Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.

  3. 3

    It inspects, then implements

    Your agent reads your existing app first, then adds the feature to fit it.

Works with your stack

These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.

Need it tighter than that? Customize the feature and tell it exactly what you're running.