[Feature] Show/hide Series

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!

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! 🍵

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.

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.

@Rushan4eg

@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.

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.

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

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.

This should be a useful feature. If anyone wants to make a pull request, please leave a comment.

+1

Up

fix: removed series are still displayed

This worked for me.

        legend: {
            selected: {
                "series item name":   false,
            },
        },

"echarts": "^5.4.3",
"echarts-for-react": "^3.0.2",

Navigation Menu

Repository navigation

[Feature] Show/hide Series #15585

What problem does this feature solve?

What does the proposed API look like?

21 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Feature] Show/hide Series #15585

Description

What problem does this feature solve?

What does the proposed API look like?

Activity

echarts-bot commented on Aug 23, 2021

100pah commented on Aug 23, 2021

Rushan4eg commented on Aug 23, 2021

Ovilia commented on Aug 30, 2021

Johnz86 commented on Dec 7, 2021

ahmednofal commented on Jan 23, 2022

bambooom commented on Apr 20, 2022

21 remaining items

Ovilia commented on Jan 31, 2024

scopingGS commented on Feb 13, 2024

bvanseg commented on Mar 7, 2024

liuyug commented on Apr 30, 2024

siyuhong commented on May 22, 2024

Paradiesvogel7 commented on Jun 7, 2024

AlixH commented on Sep 9, 2024

iamjavkhaa commented on Dec 17, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions