echarts [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!

Aug 23 '21 12:08 Rushan4eg

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 [email protected]. 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! 🍵

Aug 23 '21 12:08 echarts-bot[bot]

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.

Aug 23 '21 17:08 100pah

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.

Aug 23 '21 22:08 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.

Aug 30 '21 02:08 Ovilia

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.

Dec 07 '21 09:12 Johnz86

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

Jan 23 '22 00:01 ahmednofal

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.

Apr 20 '22 08:04 bambooom

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

Found this a little surprising too. Nearly everything in the options has show: <boolean> except for series.

For now I'm just calling chart.dispatchAction({type: 'legendUnSelect', name: 'foo'}); immediately after creating my chart and then programatically using the legendToggleSelect action when my custom show/hide mechanism is activated.

May 12 '22 22:05 mayfield

This feature helps when there are multiple series (ex. 50 + line series) in one chart, then to view the one of interest by programatically setting visible false for all other.

May 27 '22 03:05 crealityeducation

Recently faced the same problem. The solution was not very obvious. To prevent one of the series from being shown in the legend, in the settings of the series you want to hide, put name:''

Jul 15 '22 11:07 Georgiyu

Series visibility while rendering for the first time can be controlled by this option - https://echarts.apache.org/en/option.html#legend.selected

Jul 23 '22 13:07 29np

This is still an issue. If you are dynamically changing the number of elements in options.series, and the new options.series you are merging in has fewer elements than are currently in the chart instance's series, the series may not be shown in the chart, but it is still shown in the legend. You can format the legend to not have a name for these series elements, but the accompanying legend icons (line, circle, etc.) still are shown.

The option of using setOption(options, true) to reset the series can work, except that it loses the current magic type (bar or line, stacked or unstacked). If you set new options to match these values, the restore toolbox action no longer restores to the original state of the chart, but to the merged options type and stack used to emulate the magic type state that is whiped out by the setOption necessary to fix the issue of not being able to remove series elements.

I have yet to successfully use the on event capture of 'restore' to override the charts restore to set it back to the original type and stack. But again, all of this is a lot of extra steps just because you cannot remove an element from the series.

Please enable the removal of series elements.

Nov 07 '22 19:11 jdgme

Related issue here. I have a series without any data that I use for displaying markpoints. You can use

  myChart.dispatchAction({
    type: 'legendToggleSelect',
    name: title,
  });

easily enough to toggle the visibility as hiding the series also hides the mark points. But you can't hide the mark points by default and just toggle them on when you need them.

Mar 29 '23 08:03 cliveportman

Good afternoon. Faced a similar problem. I need to hide the data from the chart but display it in the tooltip.

Jun 05 '23 11:06 SadElephant

Setting line style opacity to zero hides a series, see e.g. documentation for 'line'. This isn't elegant and doesn't animate, but works.

I miss a show field for series as well.

Jun 30 '23 19:06 Traumflug

Series visibility while rendering for the first time can be controlled by this option - https://echarts.apache.org/en/option.html#legend.selected

This resolves the issue in a certain way, in my case I was trying to handle the visibility through a multiselect with useState and no other solution was working, but this worked like a charm, thanks!

Jul 10 '23 22:07 prodcastorDev

I need this feature also!

Sep 05 '23 16:09 BenJackGill

One way I found to show a serie and hide others and still keep the data into tooltips is to give the ones you want to hide the type "custom" and as a render function an empty function.

hope this helps while waiting for this feature

Oct 02 '23 11:10 fdrcslv

@fdrcslv How do one force re-render if you already have a custom type and you then set renderItem to an empty function? Both calling optionUpdated on the series and setOption on the chart does not seem to have effect.

Jan 10 '24 21:01 mitar

@mitar - Demo Code

Jan 11 '24 05:01 helgasoft

@helgasoft: See my demo here. I want to have toolbox button to toggle error bars. And while the code works in the following way:

Click "error bars toggle" toolbox button - nothing is visible.
Click on "bar" in the legend to hide the series, click again on "bar" in the legend to show it - observe that error bars are not drawn.
Click on "restore" toolbox button - error bars are restored.

So while I can updating options for the custom series has effect, chart is not redrawn.

I have also tried to set renderItem to an empty function instead of data to empty data. It works in the same way (i.e., it works only after hiding/showing the main series).

I have also used setOption on the chart as a whole, it does not work in the same way.

Both series (line and custom) have the same name because I want them to be toggled together by the legend.

Jan 11 '24 09:01 mitar

Your code is using series.optionUpdated and series.mergeOption. Where are they documented? Here is the toggle button fixed - Demo Code

Jan 11 '24 17:01 helgasoft

I see my mistake. I was calling setOption (or others) on this.ecModel, but in fact I should have been calling this.ecModel.scheduler.ecInstance.setOption.

Jan 11 '24 21:01 mitar

+1 for needing this feature.