Benchmark for AI models generating interactive chart code with improved accuracy
IChart2Code: Benchmarking Multimodal Large Language Models for Interactive Chart Code Generation
Software Engineering
Summary
Making interactive charts with computer code is tricky because the code needs to match what the chart looks like, handle the data correctly, and respond properly when users click or interact with it. The authors created IChart2Code, a new test set that checks if AI models can write code for charts that do all these things right. They also made a special way to test this code in a browser, watching how the chart looks and works before and after interaction. Plus, they designed a system called TRAIL that helps AI models fix mistakes by checking the chart's behavior step-by-step, which improved the accuracy of chart code generation.
What this means in practice
- •For web developers: Generate interactive charting code that matches visual design and user interaction requirements more reliably within web projects.
- •For software quality assurance teams: Automatically evaluate and diagnose correctness of interactive charts generated by AI models using browser-based tests and guided feedback.
Authors
Xu Zhang, Hongzhang Zheng, Zhili Huang, Yaoyi Wang, Ling Xu, Sheng Huang
Abstract
Interactive chart code generation requires models to reproduce a reference chart's appearance and underlying data and correctly implement the state changes triggered by specified user interactions. Existing chart-to-code benchmarks focus on static outputs and lack task representations or evaluation protocols for interaction specification, browser execution, and post-interaction verification. We introduce IChart2Code, a benchmark comprising 377 tasks across 20 chart forms and 13 data families, with 1209 interaction requirements in six families. Each task provides a reference screenshot, task-local data, and natural-language interaction requirements, with executable HTML/JavaScript code as the target output. We further develop a browser-based evaluation protocol with an Executability gate and three rubric-guided dimensions: Data Fidelity, Static Visual Correctness, and Interaction Correctness. The protocol tests runtime viability, consistency with task-local data, fidelity of the initial rendering to the reference screenshot, and interaction-induced state changes in a sandboxed browser. A rubric-guided MLLM judge evaluates task-specific items for the three scored dimensions using the collected browser observations and achieves an overall item-level F1 score of 0.8844 against adjudicated human labels. We also propose TRAIL, a trajectory-guided dual-agent framework for interactive chart code generation. An Inspector derives task-specific inspection checks, executes them in the browser, and uses the resulting trajectories to diagnose failures and produce structured repair feedback. Averaged across four MLLMs, TRAIL improves the four evaluation dimensions over direct prompting by 7.89, 4.98, 3.45, and 4.47 percentage points, respectively.