Can't disable emphasis state in Echarts 5.x ?

[Raphyyy]

Version

5.1.1

Reproduction link

https://jsfiddle.net/qcmgetan/

Steps to reproduce

Simply mouse over the serie.

What is expected?

Emphasis state should be disabled

What is actually happening?

Emphasis state is not disabled

---

I can't manage by any way to prevent my series to go in emphasis state on mouse over, though emphasis.focus: "none" and emphasis.scale: false or even serie.silent: true are set.

lineStyle.width grows to 1px more and areaStyle.color also change.
The weird part is that if you set serie.emphasis.lineStyle.width to 1 it takes account of it and "fix" the problem, so it looks like emphasis is still enabled therefore emphasis.scale is set to false. I could go with that but I couldn't manage to find a way to set serie.areaStyle.opacity as identical.

If I set serie.emphasis: null, serie.lineStyle.width do not change but serie.areaStyle.color does.

I did not have this issue with Echarts 4.x

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[yufeng04]

Maybe you should remove the configuration of emphasis

[plainheart]

Do you mean you hope to keep the area color unchanged when hovering on the chart?
If so, unfortunately, there is currently no option to configure it, you have to set a specific value for area style.
For example,

areaStyle: {
    color: '#5470c6'
    opacity: 0.1
},
emphasis: {
    areaStyle: {
        color: '#5470c6'
        opacity: 0.1
    }
}

About color

By default, the emphasized color is calculated by

echarts.color.lift(normalColor, -0.1)

If you want to get the emphasized color, you could use the above code.

Related issue: #12369

About lineWidth

Since v5.0.0, the line width will be bolder by 1px in emphasis state than the normal state.
This feature may be removed or changed in the future.
For now, you will have to set emphasis.lineStyle.width to be identical to lineStyle.width.

[Muqeet1]

Having the same issue on version upgrade, chart with many data points became noticeably slower than before, already set the width of lines to be similar but can't disable the blur effect on hover which triggers some sort of paint job between mouseover events, (it was not there before). Hence tooltip have major lag and data loads slower.

[Raphyyy]

Maybe you should remove the configuration of emphasis

It does not fix it, either setting serie.emphasis to null or undefined

Do you mean you hope to keep the area color unchanged when hovering on the chart?

Yes exactly. I think this behaviour should be avoided. Here it is on a classic line chart with temperature time-series :

I set emphasis.lineStyle.width to 1 but like I said previously, setting emphasis.areaStyle.opacity to 0.1 do not makes it, as it updates the color like you said.

Is there no way to fix this within the configuration ?

Ty for the help

[plainheart]

I think this would be another issue like #14698.

[plainheart]

I set emphasis.lineStyle.width to 1 but like I said previously, setting emphasis.areaStyle.opacity to 0.1 do not makes it, as it updates the color like you said.

@Raphyyy That's not enough. You still need to set emphasis.areaStyle.color to be identical to areaStyle.color.

[Raphyyy]

Yes but can I do it if I do not have the hand on the configuration.color settings ?
Also my series are dynamically generated, so I can't get programmatically the color before I use echartsIntance.setOption to create my series.

[Muqeet1]

I do not use arealine option, but have only line-series data. There is overall lag with tooltip on the mouse over, initially it was increasing the width and changing the color a bit for the lines on hover. Since I set the width same, there is still hover effect which in my opinion triggers the paint job for echarts > 5. In previous echarts like 4.0 or so it did not increase the width or change color on hover by default. So the paint job was not noticeable at all. I am attaching the picture below for comparison, 1st one before the upgrade & 2nd one after 5.0 upgrade:

[pissang]

Disable emphasis state but keep the tooltip and mouse event can be a useful feature. Similar issue #11788

[plainheart]

Overall, it would be better to revert the design about '[Design] Bolder lineWidth when hover.' #12931

[Raphyyy]

@plainheart I tried to set serie.areaStyle.color same as serie.emphasis.areaStyle.color but that is not fixing the issue. See https://jsfiddle.net/45scamx3/.
It looks like the hovered serie is put in front of others like said here : #14698 (comment) and that is causing the issue with serie.areaStyle.opacity set to a value lower than 1. If series have not the same gap between data, the hovered serie change a lot and this flicking effect pops off.

Any idea to work around this ?

[plainheart]

@Raphyyy It seems to be possible if we specify the series.z and tooltip.axisPointer.z.

tooltip: {
    ...
    axisPointer: {
         z: 210
    }
},
series: [
    {
        ...
        z: 200
    },
    {
        ...
        z: 201
    },
    {
        ...
        z: 202
    },
    ....
]

[Muqeet1]

Any estimate for this fix?

[Sakkyoku-Sha]

+1

On very large series this leads to some performance loss, ideally this functionality can be disabled altogether.

[Raphyyy]

Hello and thanks for the addition, much appreciated.

Just a quick question, I was wondering if there is way to enable emphasis state only when hovering the legend, but disabled when hovering the charts ?

Like highlighting the corresponding serie of the hovered legend with emphasis.focus = "self"

[selinanatschke-mms]

Hello, I have a similar problem. I want to disable highlighting on hover but i still need the emphasis property to be different from the normal color because i use this for highlighting filtered data after using a searchbar.
Is there any option to achieve this? Also disabling mouse events is not possible for me because i also need a tooltip.

[Raphyyy]

@selinanatschke-mms don't hesitate to upvote #17357 to support this feature