Charts
Every query response includes a chart field with chart-ready JSON that can be dropped directly into Recharts, Chart.js, D3, or any visualization library.
Chart Object Structure
{
"chart": {
"type": "bar",
"title": "Revenue by Store",
"x_axis": "store_name",
"y_axis": "total_revenue",
"data": [
{ "store_name": "Downtown", "total_revenue": 142500 },
{ "store_name": "Westside", "total_revenue": 98300 },
{ "store_name": "Airport", "total_revenue": 67100 }
]
}
}Supported Chart Types
type | When used |
|---|---|
bar | Comparisons, rankings |
line | Trends over time |
pie | Proportions (≤ 8 slices) |
donut | Same as pie with center label |
table | Raw data, many columns |
metric | Single KPI value |
Using with Recharts (React)
import { BarChart, Bar, XAxis, YAxis, Tooltip } from "recharts";
function ChartRenderer({ chart }) {
if (chart.type === "bar") {
return (
<BarChart data={chart.data}>
<XAxis dataKey={chart.x_axis} />
<YAxis />
<Tooltip />
<Bar dataKey={chart.y_axis} fill="#6366f1" />
</BarChart>
);
}
// ...handle other types
}Hint the Chart Type
You can influence the chart type in your question:
“Show me monthly revenue as a line chart” “Give me a pie chart of sales by category”