Charts

Chart accepts a content object describing the visualization. The stock adapter uses Recharts; it exposes the fields below rather than arbitrary Recharts props.

DIL source

<box border radius="xl" padding={4} gap={3}>
  <title>Deployments this week</title>
  <caption>Successful and failed deploys, by day</caption>
  <Chart content={{
    chartType: "bar",
    xKey: "day",
    data: [
      { day: "Mon", success: 18, failed: 2 },
      { day: "Tue", success: 26, failed: 1 },
      { day: "Wed", success: 22, failed: 3 },
      { day: "Thu", success: 32, failed: 1 },
      { day: "Fri", success: 28, failed: 0 },
    ],
    series: [
      { dataKey: "success", label: "Successful" },
      { dataKey: "failed", label: "Failed" },
    ],
  }} />
</box>

Field	Contract
chartType	"line", "bar", "pie", "scatter"; default line.
data	Array of row objects.
series	Array of { dataKey, label } objects.
xKey	Row key used on the horizontal axis.
nameKey, valueKey	Category and numeric keys for pie/donut data.

Hover highlights a series or slice and its legend label. Scatter tooltips snap to the nearest datum. Multi-series line/bar legends isolate a series on click, restore on a second click, and toggle individual series with Ctrl/Cmd-click. Donut legends remain descriptive so their proportions do not change.

Use meaningful labels and units, and include text or a table when values must be available without chart inspection. Keyboard focus highlights legend entries and supported chart marks.