Creates charts from numerical data using the chart tool and Chart.js v4. Supports bars, lines, pies, scatter plots, and other formats to show comparisons, trends, proportions, and relationships, with options for dataset colors and mixed charts.
中文简介正在准备中。当前显示英语简介。
Use when the user asks to visualize data with charts, graphs, or plots using the `chart` tool (bar, line, scatter, pie, time series, etc.).
安装前可以查看交给 AI 代理的指令内容。
The chart tool is ALWAYS available in this environment. When the user asks to visualize data (charts, graphs, plots), you MUST call the chart tool. Never output the config as text, never say the tool is unavailable, never suggest external renderers. Always use the tool call — it is the only correct response for data visualization requests. Do NOT repeat or echo the config JSON in your text response.
Use the chart tool only when the user explicitly asks for a chart, graph, or plot. Only use these supported Chart.js v4 types: bar, bubble, pie, doughnut, line, mixed, polarArea, radar, scatter. For area charts, use line with fill: true on the dataset — do NOT use area as a type.
Use mermaid fenced code blocks (```mermaid) when:
Mermaid is NOT a tool and is NOT Chart.js — never call the chart tool for mermaid diagrams. Just write the mermaid syntax directly in your text response inside a fenced code block. No tool call needed.
Do not use either for: code, text, or data that is already clear in prose or table form.
The chart tool input accepts:
title (string) — short label shown in the tool headerdescription (string, optional) — subtitle shown below the titlespec (string) — a Chart.js config object as a JSON stringThe spec field must be a Chart.js config JSON string with type, data, and optionally options. Examples:
Bar chart:
{
"type": "bar",
"data": {
"labels": ["A", "B", "C"],
"datasets": [{ "label": "Value", "data": [10, 20, 15] }]
}
}
Area chart (line with fill):
{
"type": "line",
"data": {
"labels": ["Jan", "Feb", "Mar", "Apr"],
"datasets": [{ "label": "Value", "data": [10, 28, 19, 45], "fill": true }]
}
}
Line chart:
{
"type": "line",
"data": {
"labels": ["Jan", "Feb", "Mar", "Apr"],
"datasets": [{ "label": "Value", "data": [10, 28, 19, 45], "fill": false }]
}
}
Scatter plot:
{
"type": "scatter",
"data": {
"datasets": [{
"label": "Points",
"data": [{ "x": 1, "y": 5 }, { "x": 2, "y": 8 }, { "x": 3, "y": 3 }]
}]
}
}
Time series:
{
"type": "line",
"data": {
"labels": ["2024-01", "2024-02", "2024-03", "2024-04"],
"datasets": [{ "label": "Value", "data": [120, 145, 132, 178], "fill": true }]
}
}
Pie chart:
{
"type": "pie",
"data": {
"labels": ["A", "B", "C"],
"datasets": [{ "data": [30, 50, 20] }]
}
}
Doughnut chart:
{
"type": "doughnut",
"data": {
"labels": ["A", "B", "C"],
"datasets": [{ "data": [30, 50, 20] }]
}
}
Radar chart:
{
"type": "radar",
"data": {
"labels": ["Speed", "Power", "Agility", "Stamina"],
"datasets": [{ "label": "Player", "data": [80, 60, 90, 70] }]
}
}
Bubble chart:
{
"type": "bubble",
"data": {
"datasets": [{
"label": "Group A",
"data": [{ "x": 10, "y": 20, "r": 8 }, { "x": 15, "y": 10, "r": 5 }]
}]
}
}
Polar area chart:
{
"type": "polarArea",
"data": {
"labels": ["A", "B", "C", "D"],
"datasets": [{ "data": [11, 16, 7, 14] }]
}
}
Mixed chart (bar + line):
{
"type": "bar",
"data": {
"labels": ["Jan", "Feb", "Mar"],
"datasets": [
{ "type": "bar", "label": "Revenue", "data": [100, 120, 90] },
{ "type": "line", "label": "Trend", "data": [95, 115, 100] }
]
}
}
You may customize colors by setting backgroundColor and borderColor arrays on datasets. The renderer handles sizing — do not set width or height.
Only include scales in options for cartesian chart types: bar, line, scatter, bubble. Do NOT include scales for pie, doughnut, polarArea, radar, or mixed — it will cause them to fail.
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Develop TypeScript services and workflows with Effect v4 by checking its source and existing project examples. Guides data schemas, typed errors, explicit dependencies, and tests that follow the project's established patterns.
中文简介正在准备中。当前显示英语简介。
Create and manage GitHub issues for the Kilo VS Code extension or JetBrains plugin using gh, GitHub's command-line tool. Guides template selection, clear titles, required project board assignment, and authentication permissions.
中文简介正在准备中。当前显示英语简介。
Create and review SVG icons for IntelliJ New UI. Choose sizes by interface role, prepare matching light and dark versions, refine shapes and strokes, and place the assets in the plugin’s resource folders.
中文简介正在准备中。当前显示英语简介。
Create and review icons for Kilo’s VS Code extension and webviews, the extension’s embedded interface panels. Choose existing icons or suitable SVG assets, register them correctly, and check theme appearance and accessible button names.
中文简介正在准备中。当前显示英语简介。
Guides development across the Kilo JetBrains plugin’s shared, frontend, and backend modules. Explains remote calls between modules, UI thread rules, dependency packaging, and testing practices, including serialization failures that require checks in a running IDE.
中文简介正在准备中。当前显示英语简介。
Switches the Kilo JetBrains plugin between a pinned released CLI and a freshly built local CLI. Includes commands to clear old build artifacts, regenerate the local executable, and verify the selected setup with Gradle.
中文简介正在准备中。当前显示英语简介。