dify echarts chart rendering exception

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

0.15.3

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

Return content example: Click the Copy button in the page to copy the data into the official example, and the chart content can be displayed normally In the simple chat page, after a few seconds, the chart content can be displayed normally, but the data formatting error message is displayed in the picture

✔️ Expected Behavior

Renders the echarts chart content normally

❌ Actual Behavior

Does not render echarts chart content properly

Feb 26 '25 01:02 shatang123

The "Wrong JSON format" error in ECharts within the Dify platform could be related to how the JSON data is structured or processed before rendering. Here are a few steps you can take to troubleshoot and potentially resolve the issue:

Validate JSON Structure: Ensure that the JSON data being passed to ECharts is correctly structured. You can use online JSON validators to check for any syntax errors.
Check Data Types: Make sure that the data types in your JSON (e.g., numbers, strings) match what ECharts expects. Sometimes, numerical values might be inadvertently converted to strings, causing issues.
Review ECharts Configuration: Double-check the ECharts configuration to ensure that all required fields are present and correctly set up. This includes verifying axis configurations, series data, and any additional options.
Prompt Engineering: If you are using Dify's ReAct mode, refine your prompts to prevent unnecessary tool calls by the Agent. This can help in rendering the visualizations directly without wrapping the output in an unexpected structure ^[1].
Test with Simplified Data: Try rendering a simpler version of your data to see if the issue persists. This can help isolate whether the problem is with the data itself or the configuration.

If these steps do not resolve the issue, consider checking for any updates or patches in the Dify platform that might address this specific problem.

To continue talking to Dosu, mention @dosu.

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

Feb 26 '25 01:02 dosubot[bot]

seems the data you copied is javascript code, not json

Feb 26 '25 01:02 hjlarry

seems the data you copied is javascript code, not json

I copied the echarts tag data generated by the model

Feb 26 '25 01:02 shatang123

seems the data you copied is javascript code, not json

In addition, you can see that in ordinary chat applications, the chart is normally displayed, but it still shows an error message, which is very affecting the use of it

Feb 26 '25 01:02 shatang123

Well, please provide the the copied things as well.

Feb 26 '25 02:02 crazywoola

Well, please provide the the copied things as well. llm out { "text": "根据提供的SQL语句及其结果，我们可以看到资产总额大于1千万的企业客户信息。数据适合使用柱状图进行展示，以便直观地比较不同企业的资产总额。由于数据量较大（共121条记录），我们将选取部分数据来展示。\n\n### 选择展示的数据\n- 我们将按照资产总额从大到小排序，并选取前10家企业进行展示。\n- 同时，为了保持图表的可读性，我们也将展示最小值和最大值之间的几个中间值。\n\n### 柱状图展示\n\necharts\n{\n xAxis: {\n type: 'category',\n data: ['医采阳光科技有限公司', '北京度小满支付科技有限公司', '万安建设发展河南有限公司', '东吴证券股份有限公司', '中国干细胞集团三亚有限公司', '江苏兴港建设集团有限公司', '北京汇源饮料食品集团有限公司', '中电置业集团河南有限公司', '永辉超市河南有限公司', '北京红土嘉辉投资有限公司']\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n data: [899622619200, 5656565650000, 2131230000, 12300000000, 10000000000, 1606115700, 600000000, 300000000, 400000000, 12220000],\n type: 'bar'\n }\n ]\n}\n\n\n### 数据解释\n- x轴：企业名称\n- y轴：资产总额（单位：元）\n- 柱状图：展示了资产总额最大的10家企业，以及一些中间值和最小值。\n\n通过这个柱状图，我们可以直观地看出哪些企业的资产总额较高，从而帮助进一步分析这些企业的财务状况。" }

Feb 26 '25 02:02 shatang123

Well, please provide the the copied things as well. llm out { "text": "根据提供的SQL语句及其结果，我们可以看到资产总额大于1千万的企业客户信息。数据适合使用柱状图进行展示，以便直观地比较不同企业的资产总额。由于数据量较大（共121条记录），我们将选取部分数据来展示。\n\n### 选择展示的数据\n- 我们将按照资产总额从大到小排序，并选取前10家企业进行展示。\n- 同时，为了保持图表的可读性，我们也将展示最小值和最大值之间的几个中间值。\n\n### 柱状图展示\n\necharts\n{\n xAxis: {\n type: 'category',\n data: ['医采阳光科技有限公司', '北京度小满支付科技有限公司', '万安建设发展河南有限公司', '东吴证券股份有限公司', '中国干细胞集团三亚有限公司', '江苏兴港建设集团有限公司', '北京汇源饮料食品集团有限公司', '中电置业集团河南有限公司', '永辉超市河南有限公司', '北京红土嘉辉投资有限公司']\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n data: [899622619200, 5656565650000, 2131230000, 12300000000, 10000000000, 1606115700, 600000000, 300000000, 400000000, 12220000],\n type: 'bar'\n }\n ]\n}\n\n\n### 数据解释\n- x轴：企业名称\n- y轴：资产总额（单位：元）\n- 柱状图：展示了资产总额最大的10家企业，以及一些中间值和最小值。\n\n通过这个柱状图，我们可以直观地看出哪些企业的资产总额较高，从而帮助进一步分析这些企业的财务状况。" }

the key or value use ""

eg:

{
    "title": {
        "text": "企业资产总额排名",
        "left": "center"
    },
    "xAxis": {
        "type": "category",
        "data": ["企业A", "企业B", "企业C", "企业D", "企业E", "企业F", "企业G", "企业H", "企业I", "企业J"]
    },
    "tooltip": {
        "trigger": "axis"
    },
    "yAxis": {
        "type": "value"
    },
    "series": [{
        "data": [890, 600, 430, 320, 280, 220, 210, 190, 180, 170],
        "type": "bar"
    }]
}

Feb 26 '25 06:02 xujingbao

Well, please provide the the copied things as well. llm out { "text": "根据提供的SQL语句及其结果，我们可以看到资产总额大于1千万的企业客户信息。数据适合使用柱状图进行展示，以便直观地比较不同企业的资产总额。由于数据量较大（共121条记录），我们将选取部分数据来展示。\n\n### 选择展示的数据\n- 我们将按照资产总额从大到小排序，并选取前10家企业进行展示。\n- 同时，为了保持图表的可读性，我们也将展示最小值和最大值之间的几个中间值。\n\n### 柱状图展示\n\necharts\n{\n xAxis: {\n type: 'category',\n data: ['医采阳光科技有限公司', '北京度小满支付科技有限公司', '万安建设发展河南有限公司', '东吴证券股份有限公司', '中国干细胞集团三亚有限公司', '江苏兴港建设集团有限公司', '北京汇源饮料食品集团有限公司', '中电置业集团河南有限公司', '永辉超市河南有限公司', '北京红土嘉辉投资有限公司']\n },\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'shadow'\n }\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n data: [899622619200, 5656565650000, 2131230000, 12300000000, 10000000000, 1606115700, 600000000, 300000000, 400000000, 12220000],\n type: 'bar'\n }\n ]\n}\n\n\n### 数据解释\n- x轴：企业名称\n- y轴：资产总额（单位：元）\n- 柱状图：展示了资产总额最大的10家企业，以及一些中间值和最小值。\n\n通过这个柱状图，我们可以直观地看出哪些企业的资产总额较高，从而帮助进一步分析这些企业的财务状况。" }

the key or value use ""

eg:
{
    "title": {
        "text": "企业资产总额排名",
        "left": "center"
    },
    "xAxis": {
        "type": "category",
        "data": ["企业A", "企业B", "企业C", "企业D", "企业E", "企业F", "企业G", "企业H", "企业I", "企业J"]
    },
    "tooltip": {
        "trigger": "axis"
    },
    "yAxis": {
        "type": "value"
    },
    "series": [{
        "data": [890, 600, 430, 320, 280, 220, 210, 190, 180, 170],
        "type": "bar"
    }]
}

Okay, I'll give it a try

Feb 26 '25 06:02 shatang123

seems the data you copied is javascript code, not json

I copied the echarts tag data generated by the model

yes, prompt llm use "" wrap it

Feb 26 '25 06:02 xujingbao

seems the data you copied is javascript code, not json

I copied the echarts tag data generated by the model

yes, prompt llm use "" wrap it The presentation was successful. Thank you

Feb 26 '25 06:02 shatang123

seems the data you copied is javascript code, not json

I copied the echarts tag data generated by the model

yes, prompt llm use "" wrap it The presentation was successful. Thank you

Hello, I encountered the same error when outputting echarts code using dify's Agent, which should be caused by streaming output. During the error period, the JSON data I copied was not complete. In a few seconds, the chart will be displayed normally. At this point, copying again will show the complete JSON data. May I ask if you are using Agent or Chatflow? Additionally, my key and value have already been packaged using ""

Mar 14 '25 10:03 aiyo92