[Feature] Show/hide Series

[Rushan4eg]

What problem does this feature solve?

There are mutiple charts on the page, however, some of them have no data. We need to hide or disable those charts with no data.

What does the proposed API look like?

Would be extremely useful to have in options.series to hide or show specific series WITH series.visible = true/false. For example, we have 5 series, but we don't want to show one of them.

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        visible: false,
        type: 'line'
    }]
};

Also, would be useful to have option to hide series if there is no data in the series.

series.displayWhenNoData= true/false

Waiting and ready to help!

[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 dev@echarts.apache.org. Please attach the issue link if it's a technical question.

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

Have a nice day! 🍵

[100pah]

If the original requirement is:

We need to hide or disable those charts with no data.

If there is no data, the series will not be displayed automatically.

[Rushan4eg]

Hey!

In our case, we are providing dataset and encode to multiple series and we need to be able to show/hide specific series, but keep all hidden series configurations, parameters, encode etc.

[Ovilia]

@Rushan4eg According to ECharts's mechanism, the suggested way to do this is to pass the series to display to setOption(option, true), you may keep a variabled of all series and filter each time which ones to display.

[Johnz86]

I would like to have an option to define an invisible series element.
Like this

series: [{type:'hidden', data: [0,0] }]

or

series: [{type:'line', show: false }]

This would allow to hide certain data point from the graph.
For example legend component can be displayed for item that is not visible in graph.
If I understand it correctly, it is required that each legend item has at least one corresponding element in series.

[ahmednofal]

Are there any updates to this issue ? Would really be awesome to be able to disable an entry in the series by default ( while the user can enable them via the legend if they wish to )
The exact api and the behavior would be like this https://stackoverflow.com/a/16319869

[bambooom]

Also want to know any updates on this issue? I need the option to show or hide some series just like in Highcharts example: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-visible/

Also, is there API to do this like series.hide() or series.show()? I'd like to reverse the behaviour when user clicks on the legend item. Currently user click a legend item, then the series hide. But I'd like to change to show this series only and hide other series.