Use the Semiotic Trust Loop to generate charts
mainTo ensure charts are valid, accessible, and render correctly, do not hand-write chart JSX. Instead, use the prepareChart function from semiotic/ai. This function validates a chart proposal (component and props) against the provided data and returns either a ready-to-use JSX string and configuration, or reasons for failure along with ranked alternatives for repair.
In server/SSR contexts, you can inject render: renderChartWithEvidence from semiotic/server to verify that the chart actually renders non-empty content (checking mark counts, domains, and ARIA labels) before serving it.
import { prepareChart } from "semiotic/ai"
const result = prepareChart(
{ component: "BarChart", props: { data, categoryAccessor: "region", valueAccessor: "revenue" } },
{ data } // supply the data so a poor chart→data fit is caught and alternatives ranked
)
if (result.ok) {
// result.jsx is a ready JSX string; result.config is the serializable ChartConfig
} else {
// result.reasons explains why; result.repair.alternatives ranks better charts.
// Retry with a fixed prop or a suggested component — do NOT paint.
}