@taylorwong/ichartjs 2.0.4 → 2.0.6

package/docs/agent/zh-CN/runtime-contract.md

@@ -48,7 +48,7 @@ iChart.js 默认在所有图表右下角显示低对比度的品牌署名（`Pow
 ## 导出与下载
 
 iChart.js 导出采用**双底层单源架构**，所有产物共享 `buildScene()` 生成的同一份 Scene Graph，**画面显示用的 renderer 和导出底层完全解耦**：
-1. **PNG/JPEG（光栅）**：底层用 `CanvasRenderer` 重绘 Scene Graph，同步输出真光栅文件；无头环境安装 `canvas` npm 包即可支持。
+1. **PNG/JPEG（光栅）**：底层用 `CanvasRenderer` 重绘 Scene Graph；浏览器同步输出真光栅文件，无头环境通过 `exportAsync()` 加载可选的 `canvas` npm 包。
 2. **SVG（矢量）**：底层用 `SVGRenderer` DOM 序列化（浏览器）或纯字符串拼装（无头零依赖），支持 XML 1.0 头部、字体拆分、无障碍属性。
 3. **JSON（可重建）**：序列化当前 `spec` + `getState()` 结果，用于持久化、Agent 自检和跨端重建。
 
@@ -62,21 +62,21 @@ iChart.js 导出采用**双底层单源架构**，所有产物共享 `buildScene
 |------------|----------------------------|----------------|--------------------------|
 | JSON       | ✅                          | ✅              | ✅                        |
 | SVG        | ✅                          | ✅              | ✅                        |
-| PNG / JPEG | ✅ 同步真光栅               | ❌ 返回结构化 `HEADLESS_EXPORT_UNSUPPORTED` | ✅ |
+| PNG / JPEG | ✅ 同步真光栅               | ❌ 返回结构化 `HEADLESS_EXPORT_UNSUPPORTED` | ✅ 通过 `exportAsync()` |
 
 ### 公共导出 API
 
 - `chart.toDataURL(type='image/png')` → data URL 字符串或结构化 ExportError。
-- `chart.toBlob(type='image/png')` → Blob 或 ExportError（无头返回 `BLOB_HEADLESS`）。
+- `chart.toBlob(type='image/png')` → Blob 或 ExportError（无头同步路径不提供光栅 Blob）。
 - `chart.export({ type, as })` → 同步返回字符串 / JSON 对象 / Blob / ExportError，`as` 支持 `string`、`dataurl`、`blob`、`object`（仅 JSON）。
-- `chart.exportAsync({ type, as })` → Promise 包装，适配未来异步场景。
+- `chart.exportAsync({ type, as })` → Promise 导出路径；Node 无头环境可通过可选 `canvas` 依赖生成 PNG/JPEG。
 - `chart.download({ type })` / `downloadPNG()` / `downloadSVG()` / `downloadJSON()` → 触发浏览器保存（无头回落到返回字符串或结构化错误）。
 
 ### 错误结构
 
 所有导出/下载方法失败时统一返回 `{ valid:false, code, message?, suggestion?, rasterCode? }` 稳定结构，便于 Agent 自动化判断，常见 `code`：
 - `HEADLESS_EXPORT_UNSUPPORTED`：当前无头环境缺少光栅所需依赖（`canvas`）。
-- `BLOB_HEADLESS`：`toBlob` / `as=blob` 需要浏览器 Blob。
+- `BLOB_HEADLESS`：同步 `toBlob` 无法在当前无头 renderer 上生成光栅 Blob；Node 光栅场景改用 `exportAsync()`。
 - `DOWNLOAD_HEADLESS`：`chart.download*()` 仅在浏览器有 DOM 时可用，无头用 `export`。
 - `EXPORT_TYPE_UNSUPPORTED`：不支持的导出类型。
 

package/docs/agent/zh-CN/theme-guide.md

@@ -48,3 +48,34 @@ const resolved = chart.getTheme();
 
 预览与验收：`http://localhost:3000/playground/theme-gallery.html`。
 
+## 单图表与页面级偏好
+
+偏好用于图表创建后的视觉调整，适合用户操作和 Agent 对话调整。业务数据、编码和图表类型不应放进这个配置面。
+
+```js
+import { createChart, createPreferencesStore, mountChartSettings } from '@taylorwong/ichartjs';
+
+const pagePreferences = createPreferencesStore({
+  storage: 'localStorage',
+  storageKey: 'my-app:chart-preferences'
+});
+const chart = createChart({
+  chartId: 'revenue',
+  container: '#revenue',
+  type: 'line',
+  data: { values: rows },
+  preferences: pagePreferences
+});
+mountChartSettings(chart, { locale: 'zh-CN' });
+
+// Agent 对话也使用同一套 API。
+chart.setPreferences({
+  theme: { preset: 'dashboard', palette: 'status' },
+  typography: { scale: 1.15 },
+  components: { grid: false }
+}, { source: 'agent' });
+```
+
+单图表快捷菜单使用紧凑的汉堡图标，只保留高频操作：主题模式、配色、字号，以及当前图表真正支持的图例、数据标签和网格线。能力检测会自动隐藏无效设置；修改即时生效，并支持 `zh-CN`、`en` 和按文档语言自动识别。
+
+低频选项和页面级配置应放在图表弹出菜单之外的独立设置页。页面内图表共享同一个 store，并使用 `store.setGlobal()` 或 `chart.setPreferences(patch, { scope: 'global' })` 更新全局。完整设置页可提供 preset、密度、署名等白名单能力，而不挤占每张图表。Node/SSR 默认使用内存，浏览器需要显式选择 `localStorage` 或宿主存储适配器。快捷菜单验收地址：`http://localhost:3000/playground/project-gallery.html`；完整页面设置验收地址：`http://localhost:3000/playground/preferences-lab.html`。

package/docs/agent/zh-CN/usage-scenarios.md

@@ -0,0 +1,189 @@
+# iChart.js 使用场景
+
+iChart.js 可以分成三层：
+
+1. **Runtime**：`@taylorwong/ichartjs`，负责规划、校验、渲染、交互、编辑和导出。
+2. **Skill**：`skills/ichartjs/SKILL.md`，负责指导 Agent 选择图表、保留数据 lineage、校验 Spec 和交付结果。
+3. **宿主项目**：用户自己的 Web 项目、Node 脚本、CI 任务或 Agent 工作区，负责数据、生命周期、路由、存储和交付。
+
+Skill 不是第二套渲染器，也不是服务端。使用 Skill 的 Agent 仍然需要 JavaScript 宿主，才能生成交互页面或文件。
+
+## 场景选择
+
+| 需求 | 使用方式 | 运行位置 | 常见输出 |
+| --- | --- | --- | --- |
+| 在产品中增加图表 | 前端项目集成 | 用户自己的浏览器应用 | 交互式 SVG 或 Canvas 图表 |
+| 让 Codex 修改已有项目 | Coding Agent + Runtime | 代码仓库和项目开发服务器 | 代码、Spec、测试结果、预览地址 |
+| 让多个 Agent 复用图表能力 | Skill + Runtime | Agent 工作区和目标项目 | 校验后的代码、文件、解释结果 |
+| 一次性生成可视化 | Node 脚本或独立 HTML | Node.js 或浏览器 | SVG、PNG/JPEG、JSON、HTML |
+| 项目进度和交付分析 | 项目场景 + Runtime | 项目看板 | Gantt、Burndown、Timeline、分析结果 |
+| 流程或架构图 | Diagram 场景 + Runtime | Web 应用或文档流程 | Flow/Swimlane 页面、SVG、JSON |
+| 定时生成报告 | Node 脚本 + Runtime | CI 或报表任务 | SVG/PNG 文件和 JSON 快照 |
+
+## 输出契约
+
+| 输出 | 适用场景 | API 或交付方式 |
+| --- | --- | --- |
+| 交互式页面 | 产品看板、编辑器、分析页面 | `createChart()` 挂载到 DOM |
+| SVG DOM | 无障碍、键盘交互、Diagram、打印 | `renderer: 'svg'` |
+| SVG 文件/字符串 | 文档、邮件、矢量交付、无头环境 | `chart.export({ type: 'svg' })` |
+| PNG/JPEG | 汇报、聊天附件、图片报告 | 浏览器 `toDataURL()`，或 Node `exportAsync()` + 可选 `canvas` |
+| JSON Spec/state | 持久化、Agent 快照、跨环境重建 | `chart.export({ type: 'json' })` |
+| Data URL/Blob | 页面嵌入或浏览器下载 | `as: 'dataurl'` 或浏览器下载 API |
+| 代码片段 | 开发者集成或生成页面 | `createChart()` 集成代码 |
+| 解释和状态 | Agent 自检和用户审计 | `chart.explain()`、`chart.getState()` |
+
+JSON 是机器可读的事实来源；SVG 和 PNG/JPEG 是视觉交付物；代码是集成交付物；交互页面是产品交付物。
+
+## 视觉偏好：界面与 Agent
+
+图表创建后需要调整视觉样式时，可让页面图表共享 `createPreferencesStore()`。浏览器中只有在宿主希望刷新后保留配置时，才显式使用 `storage: 'localStorage'`。`mountChartSettings(chart)` 会在导出区域之外增加可访问的快捷设置按钮；完整的页面级设置中心应作为宿主的独立路由。
+
+宿主交互和 Agent 对话使用同一个 patch 合约：
+
+```js
+chart.setPreferences({
+  theme: { preset: 'dashboard', palette: 'status' },
+  typography: { scale: 1.15 },
+  components: { grid: false }
+}, { source: 'agent' });
+```
+
+快捷菜单只保留主题、配色、字号和当前图表支持的显示开关。使用 `scope: 'global'` 修改页面全部图表；默认只修改当前图表；使用 `chart.getState().preferences` 获取可审计的最终配置。两层体验可在 `http://localhost:3000/playground/project-gallery.html` 和 `http://localhost:3000/playground/preferences-lab.html` 验收。
+
+## 场景一：集成到 Web 项目
+
+在宿主项目中安装 Runtime：
+
+```bash
+npm install @taylorwong/ichartjs@^2
+```
+
+```js
+import { createChart } from '@taylorwong/ichartjs';
+
+const chart = createChart({
+  container: '#chart',
+  type: 'line',
+  renderer: 'svg',
+  data: { values: rows },
+  encoding: {
+    x: { field: 'month', type: 'category' },
+    y: { field: 'sales', type: 'quantitative' }
+  },
+  accessibility: { enabled: true }
+});
+```
+
+宿主项目负责数据加载、认证、路由、持久化和状态管理。数据变化使用 `setData()`，Spec 变化使用 `update()`，替换组件前调用 `destroy()`。
+
+适用于管理后台、数据看板、项目管理、流程编辑和嵌入式分析页面。
+
+## 场景二：让 Coding Agent 修改项目
+
+可以这样向 Codex 提需求：
+
+```text
+在当前项目中使用 @taylorwong/ichartjs。检查订单数据，选择并校验月度销售图表，
+把它加入现有分析页面，运行相关测试，并返回准确的预览地址。保留假设、警告、
+record lineage 和不支持请求。
+```
+
+Agent 应返回：
+
+- 修改文件和已校验的 Spec；
+- 字段映射和选图原因；
+- 假设、警告和不支持请求；
+- 测试结果和运行时自检；
+- 宿主项目的准确预览地址和人工验收步骤。
+
+仓库内的 Playground 只用于 iChart.js 示例：`npm run playground` → `http://localhost:3000/playground/project-gallery.html`。如果修改的是其他项目，应返回其他项目自己的开发地址。
+
+## 场景三：作为官方 Skill 使用
+
+使用标准 Agent Skills CLI 安装最新版：
+
+```bash
+npx skills add wanghetommy/ichartjs --skill ichartjs
+```
+
+无交互地全局安装到 Codex：
+
+```bash
+npx skills add wanghetommy/ichartjs --skill ichartjs --agent codex --global --yes
+```
+
+需要固定发布版本时，直接安装已发布的 Skill 目录：
+
+```bash
+npx skills add https://github.com/wanghetommy/ichartjs/tree/v2.0.6/skills/ichartjs \
+  --agent codex --global --yes
+```
+
+WorkBuddy 用户可以通过宿主的 Skill 界面导入同一个带 Tag 的 GitHub 目录。在当前 Skills CLI 没有明确声明适配器时，不要假设存在 `--agent workbuddy`。具有自定义 Skill 目录的宿主仍可从 `node_modules/@taylorwong/ichartjs/skills/ichartjs` 手动复制。
+
+安装或选择 `ichartjs` 后可以这样提问：
+
+```text
+使用 iChart.js Skill。读取这份数据，生成项目 Burndown，校验 Spec，
+生成浏览器预览，并额外导出 SVG 和 JSON。返回预览地址、文件路径、
+警告、假设和 lineage。
+```
+
+Skill 会把任务路由到公开 Runtime API 和场景文档。它不会替代 npm 包、增加服务端点，也不会维护第二套选图逻辑。
+
+如果宿主可以编辑并运行 JavaScript 项目，输出可以是交互页面；如果不能运行 JavaScript，应要求输出 SVG、JSON 或代码文件。
+
+## 场景四：一次性生成文件
+
+Agent 可以创建一个 ESM 脚本或独立 HTML 页面，输出：
+
+- `chart.svg`：矢量文档和零额外依赖的无头输出；
+- `chart.json`：可复现的 Spec 和运行时快照；
+- `chart.png` 或 `chart.jpeg`：汇报和图片分享；
+- `index.html` 加 JavaScript：需要交互时使用。
+
+无头 SVG 和 JSON 不需要额外生产依赖；无头 PNG/JPEG 使用 `chart.exportAsync()`，并安装可选 `canvas`。一次性制图不应额外引入 Python、MCP、HTTP 服务或 CLI。
+
+## 场景五：项目和 Diagram
+
+- `gantt`、`timeline`、`milestone`、`burndown`：项目进度和交付计划；
+- 项目分析：capacity、velocity、release forecast、risk、issue aging；
+- `flow`、`swimlane`：流程、责任、分组、Port 和受控编辑。
+
+保留稳定的 record、node、edge、lane、group、port ID。业务编辑先返回 preview，确认后再 commit，并返回审计结果。
+
+## 场景六：CI 和定时报表
+
+在 Node ESM 脚本中生成：
+
+```js
+const svg = chart.export({ type: 'svg' });
+const json = chart.export({ type: 'json' });
+const png = await chart.exportAsync({ type: 'png' });
+```
+
+建议把 JSON 作为可复现快照，把 SVG/PNG 作为视觉交付物。导出失败时返回结构化错误，不要静默替换格式。
+
+## 边界
+
+- iChart.js 是 JavaScript UI/Runtime，不是数据服务。
+- Skill 只提供 Agent 工作流指导；没有 JavaScript 宿主时不能直接渲染。
+- 宿主项目负责认证、存储、分享和应用路由。
+- 普通使用不需要核心 CLI、MCP、HTTP 服务或 Python API。
+- 如果数据在 Python 中准备，输出 JSON/CSV，再由 JavaScript 进程渲染。
+- 除非 `getCapabilities()` 明确声明，否则不要生成地图或 3D 图表。
+
+## Agent 交付清单
+
+每次 Agent 返回结果都应包含：
+
+1. 选择的图表/视图及原因；
+2. 输入字段、转换和稳定 ID；
+3. 已校验 Spec 或结构化修复请求；
+4. 假设、警告、不支持请求和无障碍选择；
+5. `explain/state` 自检结果；
+6. 准确预览地址、代码文件或产物路径；
+7. 导出格式和可选依赖。
+
+相关文档：[快速上手](quickstart.md)、[前端集成](frontend-integration.md)、[Coding Agent 集成](coding-agent-integration.md)、[Runtime 契约](runtime-contract.md)、[项目场景](project-scenario.md)、[Diagram 场景](diagram-scenario.md)。

package/docs/manifests/capabilities.json

@@ -6,6 +6,7 @@
   "agentPlanning": "src/index.mjs#planChart",
   "agentExplanation": "Chart#explain",
   "agentQuickstart": "docs/agent/quickstart.md",
+  "usageScenarios": "docs/agent/usage-scenarios.md",
   "agentWorkflowExample": "examples/agent-workflow.mjs",
   "officialSkill": "skills/ichartjs/SKILL.md",
   "scenarios": {
@@ -22,22 +23,22 @@
     "preview": true,
     "json": true,
     "svg": true,
-    "png": "Node headless PNG requires the optional `canvas` npm package (createCanvas). Otherwise use chart.export({type:\"svg\"})."
+    "png": "Node headless PNG requires the optional `canvas` npm package and chart.exportAsync({type:\"png\"}). Otherwise use chart.export({type:\"svg\"})."
   },
   "export": {
     "types": ["png", "jpeg", "svg", "json"],
     "mime": { "png": "image/png", "jpeg": "image/jpeg", "svg": "image/svg+xml", "json": "application/json" },
     "browser": { "png": true, "jpeg": true, "svg": true, "json": true },
     "headless": {
-      "png": "optional: install the `canvas` npm package for createCanvas",
+      "png": "optional: install the `canvas` npm package for createCanvas and use exportAsync",
       "jpeg": "same as png",
       "svg": true,
       "json": true
     },
     "methods": {
-      "exportPNG": "chart.export({ type:\"png\" }) returns base64 data URL (browser); pass as:\"blob\" for a Blob. In Node headless either install the canvas package or fall back to SVG.",
+      "exportPNG": "chart.export({ type:\"png\" }) returns a browser data URL. In Node headless use chart.exportAsync({ type:\"png\" }) after installing the optional canvas package, or fall back to SVG.",
       "exportSVG": "chart.export({ type:\"svg\" }) returns the SVG string in both browser and headless; as:\"dataurl\" for embeds, as:\"blob\" for a Blob (browser).",
-      "exportJSON": "chart.export({ type:\"json\" }) returns pretty JSON; use as:\"object\" to get the parsed {version,spec,state}.",
+      "exportJSON": "chart.export({ type:\"json\" }) returns pretty JSON; use as:\"object\", as:\"dataurl\", or as:\"blob\" for the corresponding representation.",
       "downloadPNG": "chart.downloadPNG() triggers a browser save-as dialog (filename derived from title + timestamp).",
       "downloadSVG": "chart.downloadSVG() same semantics as downloadPNG but for SVG.",
       "downloadJSON": "chart.downloadJSON() saves {version,spec,state} as a .json document.",
@@ -58,7 +59,15 @@
   "projectIntelligenceDemo": "playground/project-intelligence.html",
   "foundationalGallery": "playground/foundational-gallery.html",
   "themeGallery": "playground/theme-gallery.html",
+  "preferencesLab": "playground/preferences-lab.html",
   "themeGuide": "docs/agent/theme-guide.md",
+  "preferences": {
+    "version": "1.0",
+    "scopes": ["global", "chart"],
+    "persistence": ["memory", "localStorage", "adapter"],
+    "agentAdjustable": true,
+    "interactiveSettingsUI": true
+  },
   "styleSystem": {
     "modes": ["auto", "light", "dark", "contrast"],
     "presets": ["auto", "analysis", "dashboard", "report", "presentation", "project", "diagram"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taylorwong/ichartjs",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "Agent-first, renderer-independent charting and project visualization runtime",
   "type": "module",
   "main": "./src/index.mjs",

package/skills/ichartjs/SKILL.md

@@ -7,12 +7,22 @@ description: Plan, validate, render, explain, and safely edit iChart.js visualiz
 
 Use the public Agent contract as the source of truth. Do not infer capabilities from renderer internals or duplicate chart-selection logic in generated code.
 
+Read the [usage scenarios](https://github.com/wanghetommy/ichartjs/blob/master/docs/agent/usage-scenarios.md) when the request is ambiguous about whether the output should be a live project component, a Coding Agent change, a Skill-generated artifact, or a scheduled report.
+
 ## Source and Runtime Setup
 
 - Official repository: `https://github.com/wanghetommy/ichartjs`
 - Official Skill source: `https://github.com/wanghetommy/ichartjs/tree/master/skills/ichartjs`
 - Supported Skill hosts include Codex, WorkBuddy, and other Agent Skills-compatible environments.
 
+Recommended installation:
+
+```bash
+npx skills add wanghetommy/ichartjs --skill ichartjs
+```
+
+Use `--agent codex --global --yes` for global non-interactive Codex installation. Use the tagged directory `https://github.com/wanghetommy/ichartjs/tree/v2.0.6/skills/ichartjs` when reproducibility matters. WorkBuddy can import the same directory through its Skill interface; do not assume a `--agent workbuddy` adapter unless the installed CLI declares it.
+
 The Skill is a workflow adapter, not the chart runtime. If the current JavaScript or TypeScript project does not already depend on iChart.js, install the matching runtime from GitHub:
 
 ```bash
@@ -39,12 +49,20 @@ Use `@taylorwong/ichartjs` for package imports. Use `examples/agent-workflow.mjs
 
 ## Task Routing
 
+Route by requested output:
+
+- **Live product component**: modify the host JavaScript project and mount `createChart()`; return changed files and the host preview URL.
+- **Coding Agent change**: inspect the repository, use the Runtime, run focused checks, and return the validated Spec plus changed files.
+- **One-off artifact**: generate SVG/JSON directly; use browser PNG export or `exportAsync()` with optional `canvas` for Node PNG/JPEG.
+- **Project or Diagram workflow**: load the matching scenario guide and preserve all stable IDs.
+- **CI/report output**: keep JSON as the reproducible checkpoint and SVG/PNG as presentation artifacts.
+
 - For standard data analysis, read `references/chart-selection.md` and use foundational recipes.
 - For Gantt, Timeline, Milestone, Burndown, capacity, release, risk, or aging, use project capabilities and `agent-recipes/project-management.json`.
 - For Flow or Swimlane, preserve node, edge, lane, group, and port IDs; use diagram recipes and validated edit commands.
 - For business edits, preview first, preserve the preview ID and revision, require confirmation when declared, then commit or reject atomically.
 - For browser deliverables, start `npm run playground` and return the exact maintained Playground URL.
-- Release workflow (npm publish + develop→master merge) is **AUTHOR ONLY**. Read the release SOP in [`docs/agent/development/release-sop.md`](../../docs/agent/development/release-sop.md). Never initiate any release step unless the author explicitly instructs.
+- Release workflow (npm publish + develop→master merge) is **AUTHOR ONLY**. Read the [release SOP](https://github.com/wanghetommy/ichartjs/blob/master/docs/agent/development/release-sop.md). Never initiate any release step unless the author explicitly instructs.
 
 ## Guardrails
 

package/src/capabilities.mjs

@@ -137,15 +137,15 @@ export function getCapabilities() {
     mime: { png: 'image/png', jpeg: 'image/jpeg', svg: 'image/svg+xml', json: 'application/json' },
     browser: { png: true, jpeg: true, svg: true, json: true },
     headless: {
-      png: 'optional: install the `canvas` npm package for createCanvas',
+      png: 'optional: install the `canvas` npm package for createCanvas and use exportAsync',
       jpeg: 'same as png',
       svg: true,
       json: true,
     },
     methods: {
-      exportPNG: 'chart.export({ type:"png" }) returns base64 data URL (browser); pass as:"blob" for a Blob. In Node headless either install the canvas package or fall back to SVG.',
+      exportPNG: 'chart.export({ type:"png" }) returns a browser data URL. In Node headless use chart.exportAsync({ type:"png" }) after installing the optional canvas package, or fall back to SVG.',
       exportSVG: 'chart.export({ type:"svg" }) returns the SVG string in both browser and headless; as:"dataurl" for embeds, as:"blob" for a Blob (browser).',
-      exportJSON: 'chart.export({ type:"json" }) returns pretty JSON; use as:"object" to get the parsed {version,spec,state}.',
+      exportJSON: 'chart.export({ type:"json" }) returns pretty JSON; use as:"object", as:"dataurl", or as:"blob" for the corresponding representation.',
       downloadPNG: 'chart.downloadPNG() triggers a browser save-as dialog (filename derived from title + timestamp).',
       downloadSVG: 'chart.downloadSVG() same semantics as downloadPNG but for SVG.',
       downloadJSON: 'chart.downloadJSON() saves {version,spec,state} as a .json document.',
@@ -184,6 +184,15 @@ export function getCapabilities() {
     data: ['normalize', 'inspect', 'filter', 'sort', 'groupBy', 'sum', 'average', 'topN', 'percentage', 'bin'],
     themes: [...styleCapabilities.modes],
     styleSystem: JSON.parse(JSON.stringify(styleCapabilities)),
+    preferences: {
+      version: '1.0',
+      scopes: ['global', 'chart'],
+      persistence: ['memory', 'localStorage', 'adapter'],
+      fields: ['theme', 'typography.scale', 'density', 'components.legend', 'components.labels', 'components.grid', 'branding.enabled', 'motion'],
+      agentAdjustable: true,
+      interactiveSettingsUI: true,
+      precedence: ['defaults', 'global', 'chart', 'temporary-agent-patch']
+    },
     plugins: true,
     branding: { defaultEnabled: true, signature: 'Powered by iChart.js', options: [{ name: 'enabled', type: 'boolean', default: true }] },
   };