Category: Charts
Price movement as open-high-low-close bars on a date axis, drawn on the server as static HTML with no script. With the default style "candle" each bar is a wick from low to high and a body from open to close; with style "ohlc" it is a stem with a tick to the left for the open and a tick to the right for the close. Direction never rests on colour alone: a bar that closes at or above its open is hollow (candle) or a thin bar (ohlc) in the --positive colour, one that closes lower is filled (candle) or a thick bar (ohlc) in the --negative colour, a legend says so in words, and the hidden table has a Direction column. Bars sit at their real dates (weekend gaps show as gaps), the date axis ticks and labels follow d3-scale scaleUtc and d3-time-format, and the price axis follows d3 nice() and ticks(). An optional volume panel under the price panel repeats the hollow or filled cue. A hidden table gives every value. Motion-ready: each bar fades in through --k from --p (build progress 0 to 1, default 1); the standalone render is the finished picture and reduced motion shows the end state.
| Surface | Note |
|---|---|
| Prints the finished picture; no motion |
| Field | Type | Required |
|---|---|---|
| title | string (optional, max 80). | optional |
| dates | array (required, up to 10000 read) of ISO date strings, read as UTC: "2024-03-05", or with a time "2024-03-05T09:30", "2024-03-05 09:30:15" or "2024-03-05T09:30:15.250Z". Years 1000 to 9000. Any other string, a time zone offset or a non-string leaves that bar out with a note. The bars are drawn in date order. | required |
| open | array (required) of numbers, one per date, each finite and up to 1e12 in size. | required |
| high | array (required) of numbers, one per date. Must be at least the open, close and low. | required |
| low | array (required) of numbers, one per date. Must be at most the open, close and high. | required |
| close | array (required) of numbers, one per date. | required |
| volume | array of numbers of 0 or more, one per date. Adds a volume panel; a bar without a usable volume has no volume bar and a note counts them. | optional |
| style | string (optional, "candle" or "ohlc", default "candle"). Any other value draws candles. | optional |
| unit | string (optional, max 12). Appended to the price values in the aria label and the hidden table. | optional |
| y_label | string (optional, max 40). Names the price axis above the chart. | optional |
| version | integer (optional, default 1). The candlestick_chart contract the payload was written for. Only version 1 exists; a higher whole number is drawn as version 1 with a note. | optional |
{
"type": "candlestick_chart",
"dates": [],
"open": 1,
"high": 1,
"low": 1,
"close": 1
}{
"identifier": "urn:air:a2uicatalog.ai:atom:candlestick_chart",
"displayName": "Candlestick Chart",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/candlestick_chart/",
"capabilities": [
"web",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "Price movement as open-high-low-close bars on a date axis, drawn on the server as static HTML with no script. With the default style \"candle\" each bar is a wick from low to high and a body from open to close; with style \"ohlc\" it is a stem with a tick to the left for the open and a tick to the right for the close. Direction never rests on colour alone: a bar that closes at or above its open is hollow (candle) or a thin bar (ohlc) in the --positive colour, one that closes lower is filled (candle) or a thick bar (ohlc) in the --negative colour, a legend says so in words, and the hidden table has a Direction column. Bars sit at their real dates (weekend gaps show as gaps), the date axis ticks and labels follow d3-scale scaleUtc and d3-time-format, and the price axis follows d3 nice() and ticks(). An optional volume panel under the price panel repeats the hollow or filled cue. A hidden table gives every value. Motion-ready: each bar fades in through --k from --p (build progress 0 to 1, default 1); the standalone render is the finished picture and reduced motion shows the end state.",
"representativeQueries": [
"show a candlestick_chart: open-high-low-close price bars over time",
"price movement as open-high-low-close bars on a date axis, drawn on the server as static html with n",
"render a candlestick chart"
]
}The renderer is an open-source Google Apps Script web app. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.
git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy