How to zoom into a series group by pressing on legend option in echarts

Question

So I created a bar chart using echarts(v4.6.0) library inside Reactjs project. It has legend, data series chunked into groups with same colour and dataZoom slider. Every legend label corresponds to particular group of bars in the graph(they have same colours). However at the moment if user clicks on legend label, bars that correspond to this label disappears. What I want to achieve is when user clicks on legend label, the chart needs to zoom in to the group of bars that correspond to it instead of hiding them. Is there any way to do this?

Answer 1

In the common practice to make bar selected you can use the emphasis, it's style set activated by mouseover (something like rules declaration under :hover in CSS), for example (see tutorial):

itemStyle: {
    // default styles
    normal: {
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
    // activated by mouseover
    emphasis: {
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.8)'
    }
}

If you need just to show bar in focus, it's easy:

1. Define emphasis styles.
2. Capture event legendselectchanged on legend component and suppress default behavior (see workaround) for prevent series disappear.
3. Dispatch highlight action for series or dataIndex and bar will be looks like selected.

I could be wrong, but as far as I know to zoom single (and stacked) bar it's not easy task. There are several unconventional ways like a draw resized bar clone above original, manipulations with datazoom component and recalculate/update bar data on mouseover and then return back old data on mouseout. Let me know if you choose one of these options I'm will try to help you.