CODEWITHSUNDEEP
linechartechartsapache-echarts
jchopra
jchopra

Reputation: 31

Echart : line chart reverse legend toggle behaviour

I want to be able to click on the legend label, it then toggles all the other off and highlight selected one series data. current behaviour hide selected legend series. how i can reverse it?

Upvotes: 1

Views: 3247

Answers (2)

Pankaj Sharma
Pankaj Sharma

Reputation: 21

As per @Sergey Fedorov's answer, this can be achieved using the legendSelect event. Here's some code to demonstrate how that works:

function legendSelection(chart, params) {
    const obj = params.selected;
    const selectAll = Object.values(obj).filter(f=>f).length;
    chart.setOption({ animation: true });

    if (selectAll == 0) {
        // select all on second click
        for (var key in obj) {
            chart.dispatchAction({
                type: 'legendSelect',
                name: key
            });
        }
    } else {
        // Re-select what the user unselected
        chart.dispatchAction({
            type: 'legendSelect',
            name: params.name
        });

        // Deselect everything else 
        for (var key in obj) {
            if (obj.hasOwnProperty(key) && key != params.name) {
                var val = obj[key];
                chart.dispatchAction({
                    type: 'legendUnSelect',
                    name: key
                });
            }
        }
    }
}

Use the above function in your code like this:

myChart.on('legendselectchanged', function (params) {
    legendSelection(myChart, params);
});

Upvotes: 2

Sergey Fedorov
Sergey Fedorov

Reputation: 4430

Echarts has API with events and action. This is good tutorial to quick start. In short: you need to listen legendselectchanged and with setOption({series:{...}}) change style or number of series. Something like this https://stackoverflow.com/a/64329993/1597964

Upvotes: 1

Related Questions