In the agent, the tool is called to generate echarts. The tool returns the code in the normal format, but the page is not rendered

[Kun-Zhang-x]

Self Checks

• [x] This is only for bug report, if you would like to ask a question, please head to Discussions.
• [x] I have searched for existing issues search for existing issues, including closed ones.
• [x] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [x] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:)
• [x] Please do not modify this template :) and fill in all the required fields.

Dify version

1.4.1

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

The screenshot is as follows：

The complete response returned by the tool. The echarts code has been checked and there is no problem：

echarts\n{\n \"title\": {\n \"text\": \"案件大类分布\"\n },\n \"tooltip\": {\n \"trigger\": \"axis\"\n },\n \"xAxis\": {\n \"type\": \"category\",\n \"data\": [\n \"案件大类_10\",\n \"案件大类_6\",\n \"案件大类_8\",\n \"案件大类_7\",\n \"案件大类_3\",\n \"案件大类_9\",\n \"案件大类_5\",\n \"案件大类_4\",\n \"案件大类_1\",\n \"案件大类_2\"\n ]\n },\n \"yAxis\": {\n \"type\": \"value\"\n },\n \"series\": [\n {\n \"type\": \"line\",\n \"data\": [\n 12,\n 7,\n 14,\n 11,\n 14,\n 16,\n 6,\n 10,\n 5,\n 5\n ]\n }\n ]\n}\n

✔️ Expected Behavior

The echart was successfully rendered on the page

❌ Actual Behavior

No response

[dosubot[bot]]

There are a few common reasons why ECharts might not render in Dify even if the code looks correct:

1. The markdown formatting is critical: make sure the ECharts JSON starts on a new line after the code fence. For example, use:

   ```echarts
   {
     "title": { "text": "案件大类分布" },
     ...
   }
   

   If the JSON is on the same line as the code fence, rendering will fail [source].

2. In ReAct mode, if the Agent is calling the tool unnecessarily, the output may not be rendered as a chart. Refine your prompt so the Agent outputs the chart directly, not as a tool call [source].

3. If you’re using a chatflow, make sure to use a 'direct reply' node after the ECharts tool, or reference echarts/text after a line break when replying directly. This ensures the chart is rendered instead of just returning code [source].

The frontend code uses the echarts-for-react library and robust error handling, so if the chart is not rendering at all, it’s almost always a formatting or chatflow issue, not a Docker or environment problem.

Try adjusting the markdown and chatflow as above—this resolves most ECharts rendering issues in Dify. If you’re still stuck, let me know how the ECharts block is being generated and displayed in your flow.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[Kun-Zhang-x]

There are a few common reasons why ECharts might not render in Dify even if the code looks correct:

1. The markdown formatting is critical: make sure the ECharts JSON starts on a new line after the code fence. For example, use:

   ```echarts
   {
     "title": { "text": "案件大类分布" },
     ...
   }
   

   If the JSON is on the same line as the code fence, rendering will fail [source].

2. In ReAct mode, if the Agent is calling the tool unnecessarily, the output may not be rendered as a chart. Refine your prompt so the Agent outputs the chart directly, not as a tool call [source].

3. If you’re using a chatflow, make sure to use a 'direct reply' node after the ECharts tool, or reference echarts/text after a line break when replying directly. This ensures the chart is rendered instead of just returning code [source].

The frontend code uses the echarts-for-react library and robust error handling, so if the chart is not rendering at all, it’s almost always a formatting or chatflow issue, not a Docker or environment problem.

Try adjusting the markdown and chatflow as above—this resolves most ECharts rendering issues in Dify. If you’re still stuck, let me know how the ECharts block is being generated and displayed in your flow.

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other   

The above-mentioned methods were tried, but the problem was not solved. The ECharts block is generated by calling the tool.

[xuzijie1995]

@Kun-Zhang-x

It is recommended to check your "LLM Prompt" - the key to successful rendering is to make the model output content in the echart structure.

for example:

https://github.com/user-attachments/assets/589e9e1c-7969-4751-a3c5-68f8ef60c461

PROCESS DATA: { "model_mode": "chat", "prompts": [ { "role": "system", "text": "You are a helpful copilot. \nFind the echart data and only output the answer follow the below Content:\n\n# The echart is\nechart\n<data>\n\nThx :P", "files": [] }, { "role": "assistant", "text": "latest echart data：\n{"result": "echarts\\n {\\n \\\"xAxis\\\": {\\n \\\"type\\\": \\\"category\\\",\\n \\\"data\\\": [\\\"Mon\\\", \\\"Tue\\\", \\\"Wed\\\", \\\"Thu\\\", \\\"Fri\\\", \\\"Sat\\\", \\\"Sun\\\"]\\n },\\n \\\"yAxis\\\": {\\n \\\"type\\\": \\\"value\\\"\\n },\\n \\\"series\\\": [{\\n \\\"data\\\": [820, 932, 901, 934, 1290, 1330, 1320],\\n \\\"type\\\": \\\"line\\\"\\n }]\\n }\\n "}", "files": [] } ], "model_provider": "langgenius/tongyi/tongyi", "model_name": "qwen-max" }

[Kun-Zhang-x]

@Kun-Zhang-x

建议检查一下你的“LLM Prompt”——成功渲染的关键是让模型在echart结构中输出内容。

例如：

iShot_2025-06-09_10.38.38.mp4 处理数据： { "model_mode": "chat", "prompts": [ { "role": "system", "text": "您是一位乐于助人的副驾驶。\n查找 echart 数据并仅输出答案，请遵循以下内容：\n\n# echart 是\n echart\n<data>\n\nThx :P", "files": [] }, { "role": "assistant", "text": "最新的 echart 数据：\n{"result": " echarts\\n {\\n \\\"xAxis\\\": {\\n \\\"type\\\": \\\"category\\\",\\n \\\"data\\\": [\\\"Mon\\\", \\\"Tue\\\", \\\"Wed\\\", \\\"Thu\\\", \\\"Fri\\\", \\\"Sat\\\", \\\"Sun\\\"]\\n },\\n \\\"yAxis\\\": {\\n \\\"type\\\": \\\"value\\\"\\n },\\n \\\"series\\\": [{\\n \\\"data\\\": [820, 932, 901, 934, 1290, 1330, 1320],\\n \\\"type\\\": \\\"line\\\"\\n }]\\n }\\n "}", "files": [] } ], "model_provider": "langgenius/tongyi/tongyi", "model_name": "qwen-max" }

The app type you create should be chatflow or workflow, for which echarts will render normally. This will only cause problems if the app type is agent, so try it out.

[xuzijie1995]

@Kun-Zhang-x

The Agent mode also seems feasible. Could you check if the FINAL ANSWER from your LLM includes the echarts structure? (Sorry, I missed the "s" in my previous response.)

https://github.com/user-attachments/assets/7fca1a3c-7477-4e97-a621-cbf57ab8e344

[Kun-Zhang-x]

@Kun-Zhang-x

代理模式似乎也可行。你能检查一下你的法学硕士（LLM）的最终答案是否包含echarts结构吗？（抱歉，我之前的回复漏掉了“s”。）

iShot_2025-06-09_15.07.10.mp4

Thank you very much, by adding the output format constraints, echart will render correctly

[xuzijie1995]

Glad to help : )

The execution results of instructions vary across different large language models (LLMs). When using the Qwen-Max and Plus series models, I found their performance less agile and efficient compared to other LLMs such as Doubao, DeepSeek, and GPT. You can try adjusting the prompt or switching to other models—both approaches are worth attempting!

[AaronDemo]

@xuzijie1995

Thank you so much, with adding this prompt I can render echarts now