Problems when updating chart through echartsInstance.setOption()

[jeffrey-roosendaal]

When updating the charts through echartsInstance.setOption(), the series are not always correctly updated/drawn.

For example, when I initialize the chart (custom made funnel, but this happens with every chart type) with 3 series, it may look like this:

It shows 3 series, which all display correctly. Now, when I create a new chart object with 6 series, and overwrite my current chart, it changes (and animates) to:

This, also, looks good. The problem is when updating again, to a chart with less series then the current chart. See what happens when I update the chart to 3 series:

It draws the 3 new series over the first old 3 series, and keeps series 4, 5 and 6.

---

When I output the chart object to console, it shows:

"option": {
    "title": {
        "show": false
    },
    "legend": {
        "show": false,
        "data": [
            {
                "name": "Smartphone",
                "icon": "circle"
            },
            {
                "name": "Desktop",
                "icon": "circle"
            },
            {
                "name": "Tablet",
                "icon": "circle"
            }
        ],
        "selected": {
            "Smartphone": true,
            "Desktop": true,
            "Tablet": true
        }
    },
    "grid": {
        "containLabel": false,
        "top": 0,
        "right": 2,
        "bottom": 20,
        "left": 0,
        "height": 190
    },
    "toolbox": {
        "show": false
    },
    "xAxis": {
        "type": "category",
        "boundaryGap": true,
        "axisLabel": {
            "textStyle": {
                "color": "#444"
            }
        },
        "axisTick": {
            "interval": "auto",
            "lineStyle": {
                "color": "#e5e5e5"
            }
        },
        "axisLine": {
            "lineStyle": {
                "color": "#e5e5e5"
            }
        },
        "splitLine": {
            "show": false,
            "interval": 0,
            "lineStyle": {
                "color": "#e5e5e5"
            }
        },
        "data": [
            {
                "value": "Bezoeken",
                "textStyle": {
                    "align": "center",
                    "fontSize": 10
                }
            },
            {
                "value": "Actief",
                "textStyle": {
                    "align": "center",
                    "fontSize": 10
                }
            },
            {
                "value": "Winkelwagens",
                "textStyle": {
                    "align": "center",
                    "fontSize": 10
                }
            },
            {
                "value": "Bestellingen",
                "textStyle": {
                    "align": "center",
                    "fontSize": 10
                }
            }
        ]
    },
    "yAxis": [
        {
            "boundaryGap": [
                0,
                "10%"
            ],
            "type": "value",
            "show": false,
            "min": 0,
            "axisLabel": {
                "textStyle": {
                    "color": "#444",
                    "fontSize": 10
                }
            },
            "axisTick": {
                "lineStyle": {
                    "color": "#e5e5e5"
                }
            },
            "axisLine": {
                "lineStyle": {
                    "show": false,
                    "color": "#fff"
                }
            },
            "splitLine": {
                "interval": 0,
                "show": false,
                "lineStyle": {
                    "color": "#e5e5e5"
                }
            },
            "data": [
                "Smartphone",
                "Desktop",
                "Tablet"
            ]
        }
    ],
    "series": [
        {
            "name": "Smartphone",
            "type": "bar",
            "stack": "metric",
            "label": {
                "normal": {
                    "show": true,
                    "position": "top",
                    "offset": [
                        0,
                        -10
                    ],
                    "textStyle": {
                        "color": "#444"
                    }
                }
            },
            "itemStyle": {
                "normal": {
                    "color": "#1AB394"
                }
            },
            "data": [
                185,
                89,
                8,
                0
            ]
        },
        {
            "name": "Desktop",
            "type": "bar",
            "stack": "metric",
            "label": {
                "normal": {
                    "show": true,
                    "position": "top",
                    "offset": [
                        0,
                        -10
                    ],
                    "textStyle": {
                        "color": "#444"
                    }
                }
            },
            "itemStyle": {
                "normal": {
                    "color": "#23C6C8"
                }
            },
            "data": [
                104,
                51,
                9,
                1
            ]
        },
        {
            "name": "Tablet",
            "type": "bar",
            "stack": "metric",
            "label": {
                "normal": {
                    "show": true,
                    "position": "top",
                    "offset": [
                        0,
                        -10
                    ],
                    "textStyle": {
                        "color": "#444"
                    }
                }
            },
            "itemStyle": {
                "normal": {
                    "color": "#F8AC59"
                }
            },
            "data": [
                38,
                25,
                4,
                0
            ]
        }
    ],
    "tooltip": {
        "trigger": "axis",
        "position": "inside",
        "axisPointer": {
            "shadowStyle": {
                "color": "#000",
                "shadowBlur": 0,
                "opacity": 0.07
            },
            "type": "shadow"
        },
        "textStyle": {
            "fontFamily": "Roboto"
        },
        "extraCssText": "padding: 8px 15px; font-size: 13px;"
    }
}

There is not a single mention of "Motorola", "Huawei" or "Overig" in my code, but, when I add console.log(params) to charts.tooltip.formatter, it shows:

[
    {
        "componentType": "series",
        "componentSubType": "bar",
        "seriesType": "bar",
        "seriesIndex": 0,
        "seriesId": "\u0000Smartphone\u00000",
        "seriesName": "Smartphone",
        "name": "Bezoeken",
        "dataIndex": 0,
        "data": 185,
        "value": 185,
        "color": "#1AB394",
        "marker": "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#1AB394;\"></span>",
        "$vars": [
            "seriesName",
            "name",
            "value"
        ],
        "axisDim": "x",
        "axisIndex": 0,
        "axisType": "xAxis.category",
        "axisId": "\u0000\u0000-\u00000",
        "axisValue": "Bezoeken",
        "axisValueLabel": "Bezoeken"
    },
    {
        "componentType": "series",
        "componentSubType": "bar",
        "seriesType": "bar",
        "seriesIndex": 1,
        "seriesId": "\u0000Desktop\u00000",
        "seriesName": "Desktop",
        "name": "Bezoeken",
        "dataIndex": 0,
        "data": 104,
        "value": 104,
        "color": "#23C6C8",
        "marker": "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#23C6C8;\"></span>",
        "$vars": [
            "seriesName",
            "name",
            "value"
        ],
        "axisDim": "x",
        "axisIndex": 0,
        "axisType": "xAxis.category",
        "axisId": "\u0000\u0000-\u00000",
        "axisValue": "Bezoeken",
        "axisValueLabel": "Bezoeken"
    },
    {
        "componentType": "series",
        "componentSubType": "bar",
        "seriesType": "bar",
        "seriesIndex": 2,
        "seriesId": "\u0000Tablet\u00000",
        "seriesName": "Tablet",
        "name": "Bezoeken",
        "dataIndex": 0,
        "data": 38,
        "value": 38,
        "color": "#F8AC59",
        "marker": "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#F8AC59;\"></span>",
        "$vars": [
            "seriesName",
            "name",
            "value"
        ],
        "axisDim": "x",
        "axisIndex": 0,
        "axisType": "xAxis.category",
        "axisId": "\u0000\u0000-\u00000",
        "axisValue": "Bezoeken",
        "axisValueLabel": "Bezoeken"
    },
    {
        "componentType": "series",
        "componentSubType": "bar",
        "seriesType": "bar",
        "seriesIndex": 3,
        "seriesId": "\u0000Motorola\u00000",
        "seriesName": "Motorola",
        "name": "Bezoeken",
        "dataIndex": 0,
        "data": 7,
        "value": 7,
        "color": "#ED5565",
        "marker": "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#ED5565;\"></span>",
        "$vars": [
            "seriesName",
            "name",
            "value"
        ],
        "axisDim": "x",
        "axisIndex": 0,
        "axisType": "xAxis.category",
        "axisId": "\u0000\u0000-\u00000",
        "axisValue": "Bezoeken",
        "axisValueLabel": "Bezoeken"
    },
    {
        "componentType": "series",
        "componentSubType": "bar",
        "seriesType": "bar",
        "seriesIndex": 4,
        "seriesId": "\u0000Huawei\u00000",
        "seriesName": "Huawei",
        "name": "Bezoeken",
        "dataIndex": 0,
        "data": 4,
        "value": 4,
        "color": "#1C84C6",
        "marker": "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#1C84C6;\"></span>",
        "$vars": [
            "seriesName",
            "name",
            "value"
        ],
        "axisDim": "x",
        "axisIndex": 0,
        "axisType": "xAxis.category",
        "axisId": "\u0000\u0000-\u00000",
        "axisValue": "Bezoeken",
        "axisValueLabel": "Bezoeken"
    },
    {
        "componentType": "series",
        "componentSubType": "bar",
        "seriesType": "bar",
        "seriesIndex": 5,
        "seriesId": "\u0000Other\u00000",
        "seriesName": "Other",
        "name": "Bezoeken",
        "dataIndex": 0,
        "data": 9,
        "value": 9,
        "color": "#dedede",
        "marker": "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#dedede;\"></span>",
        "$vars": [
            "seriesName",
            "name",
            "value"
        ],
        "axisDim": "x",
        "axisIndex": 0,
        "axisType": "xAxis.category",
        "axisId": "\u0000\u0000-\u00000",
        "axisValue": "Bezoeken",
        "axisValueLabel": "Bezoeken"
    }
]

So, they are not in my chart object, but Echarts still draws them, and as you can see, they still exist in the tooltip params.

The chart does update well when using chartInstance.clear() before chartInstance.setOption(), but then I'll lose all the nice transitions and animations, which make ECharts look so beautiful.

[marccompte]

A pending bug from 5 years ago in high priority, and it is still not fixed ...

[pissang]

@marccompte Please see my comment above

[marccompte]

I tried that but did not work. I'm trying other chart libraries now.

[stereokai]

@marccompte I have struggled with the same issue, replaceMerge works as you'd expect. Try this:

  chart.setOption(options, {
    replaceMerge: ["series", "yAxis", "xAxis", "grid"],
  });

[hoangviet-98]

I solved this for React and only set "notMerge" to true.

<ReactECharts option={options} opts={{ renderer: 'svg' }} notMerge={true} />

This help for me <3

[towertop]

I felt some cases above might relate to this issue https://github.com/apache/echarts/issues/14192 , where the seettings of components like axis need passed to setOption() to trigger relevant graph redraw correctlly. I was using 5.3.2 and that issue still exists.

[TIGeMi]

Is there any news for this issue. Recently I got issue that cannot change the symbolSize of the lines series. Not sure that relates to this issue. Here is an example

[jk4235]

for someone who may meet this problem, you may have wrapped a component like this:

useEffect(() => {
if (!chartInstanceRef.current) return;
chartInstanceRef.current?.setOption(option, { notMerge: true }); // set notMerge true
}, [options])

[LaykDimon]

the problem is still present when I try to switch the expandAndCollapse state in the tree viewer from true to false, it continues expanding and collapsing the tree, although it shouldn't so the setOption still doesn't work properly can you please look at this problem and try to fix it? would be really grateful!

[Aleksashka11]

Yeah, I’m still experiencing this problem. Moreover, in my case optional parameter notMerge wasn’t helpful at all. Therefore, It would be really nice to have this bug fixed. Thank you for time and effort in advance!

[Aleksashka11]

Are there any updates?

[seanjamu]

Tengo el mismo problema, lo resolví configurando la serie data = nullque no quieres. También puedes probarlo. setOption(option, true)

Thanks, I have this problem with echart 5.4.4 too

[branogoga]

Using notMerge with echarts-for-react can help, but it can also has unexpected effects - e.g. selection tools do not work. Despite echarts-for-react does not support the replaceMerge yet, You can still use custom effect and call it Yourself, e.g.:

  useEffect(() => {
    if (!chartRef.current) {
      return
    }
    // @ts-ignore
    const chart = chartRef.current.getEchartsInstance()
    if (!chart) {
      return
    }

    chart.setOption(option, {
      replaceMerge: ['series'],
    })
  }, [chartRef, ...])