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.

[Bkengs]

I have the same problem recently , i solved it by set the series's data = null which you do not want. Also you can try it setOption(option, true)

[jeffrey-roosendaal]

Thanks for your suggestions!

Setting data = null on all the previous series may lead to a lot of code rewriting on my part, which is not my prefered option.

And, using setOption(option, true), is the same as calling refresh(), which removes the transition animations, which is what I like so much about ECharts. But for now, I'll go with setOption(option, true) when changing data, until the ECharts team comes with a solution or fix. Thanks!

[sorenhoyer]

This is still a problem. And a very annoying one. I'd call it a bug rather than an enhancement, since it's a very big problem when dealing with realtime data (calling setOption frequently) and building the chart from data in React. :)

[skraemer-eis]

I have the same problems and I agree with @sorenhoyer: I would also call it a bug. It should be possible to delete series with setOptions

[anasanzari]

+1

[tehZevo]

+1

[pchaganti]

👍

[pchaganti]

setOption() is still leaving the old data on the chart BTW.

+1

[sys4soft]

Until this is solved, I've come with the radical solution of clearing the chart and "recreate" it again.
Not a problem for me, since my char is only updated after I submit a form in the same page and the graphic only comes visible after a success ajax call.

Basically:
All echart construction inside a function (EchartConstruction);
When ajax is called and have a success return: [instance].clear() and execute EchartConstruction function
Then, set the axis and series.

[eviltomato]

I have the same issue with bar chart