Comfy-Org / Comfy-Org/ComfyUI_frontend

fix(useChart): deep watch for data mutations and rebuild on chart type change

Open
#9,804 0 comments 0 reactions 1 assignee Claimed by @christian-byrne View on GitHub
area:ui
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Summary

The `useChart` composable in `src/components/ui/chart/useChart.ts` has two robustness issues flagged during PR review:

1. **Shallow watch misses in-place mutations** — The current watcher on `[type, data, options]` does not use `{ deep: true }`, so mutations like `data.datasets[0].data.push(...)` do not trigger a chart update.

2. **Type change does not rebuild the Chart.js instance** — When `type` changes (e.g. from `'bar'` to `'line'`), the watcher only reassigns `.data` and `.options` on the existing instance; it never destroys and recreates the `Chart` instance, leaving the rendered chart out of sync.

## Proposed Fix

- Add `{ deep: true }` to the `watch` call so reactive data mutations are tracked.
- Compare `nextType !== previousType` in the watcher callback; when the type changes, destroy the existing instance and call `createChart()`.

See the original review comment and discussion for full context:
- PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9744
- Review comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9744#discussion_r2924517972

Requested by @christian-byrne.

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-9804-fix-useChart-deep-watch-for-data-mutations-and-rebuild-on-chart-type-change-3216d73d36508119a709cf3c932f4a63) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.