How to programatically show/hide chart data

[matteematt]

If I have a chart like this:

I can show/hide fields by clicking the relevent items in the legend to get this:

Is there a way I can do that programatically via the API rather than getting the user to click?

I have tried to look through the documentation but I can't find a way to do it

Checklist

• npm test passes
• benchmarks are included
• commit message follows commit guidelines
• documents are updated

Description of change

[pearmini]

What version of G2 are you using? V4 or V5？

[matteematt]

Hi @pearmini thanks for the reply. I am using @antv/g2plot: "^2.4.20" which I think is using G2 version 4.

I can see in the legend section of the docs there is a selected setting which you can use during initalisation to be able to show and hide the legend items, but I need to be able to do this dynamically at runtime

1. I need to find an API to be able to get this information, for example from my picture above I need to be able to see that we are showing Exam 1, Exam2, and Exam 6; Exam 3, Exam 4, and Exam 5 are hidden
2. I need to find an API to be able to set this dynamically during runtime too

[pearmini]

If you are using G2Plot, you can see this example for more details.

[matteematt]

I didn't really have any luck with setState and getState. I instead diffed the displayed data which you can get in the legend click callback which all of the data, so you can checks which legend items are selected or not, and then you can recreate the chart and pass these values in via config.legend.selected.

This does work but not an ideal solution

[hustcc]

In G2Plot v2 or G2 v4, you can configure the legend.selected to update the default selection. Document here, search selected.

legend: {
  selected: {
   'Eaxm 3': false, // 👈🏻 do not show as default.
  },
},

In G2 v5, you can use API:

chart.emit('legend:selected', { data: { /* ... */ } });
chart.emit('legend:unselected', { data: { /* ... */ } });
``

[amipei]

What is the content of data