Series hide and show methods

[Jzueh]

trafficstars

Hi,

I would love to have a hide and show method for series, so I can always be sure in what state my series is. I have multiple legends who all toggle some series. Sometimes more than one. An I had to build a workaround to know which of the series is hidden and which is not. It would also be great to hide a series on render. Like an additional option in the series configuration. I have large charts in which the user can filter what he would like to see in the chart. Per default only one option (series) is visible and the user can show more options if he wishes to.

Greetings

[junedchhipa]

Have you tried the toggleSeries() method? https://apexcharts.com/docs/methods/#toggleSeries

var chart = new ApexCharts(el, {
  series: [{
    name: 'Football'
    data: [33, 23, 76, 33]
  }, {
    name: 'Cricket'
    data: [23, 33, 16, 23]
  }]
});

chart.toggleSeries('Football')

[Jzueh]

Yes, I've tried the toggle Method.

The problem is, I never know where the user is and what state the series is in (toggled or not). So it is a big Bug trap. Show and hide would solve this problem. Or a "hidden" value which I can adress.

Also initial hiding a Series is pretty complicated to acomplish.

[junedchhipa]

Ok, I will note down as a feature enhancement.

[Hyperblaster]

+1 for this.

We need showSeries() and hideSeries()

In addition can we get highlightSeries() as a method?

[harshanaravindakshan]

+1

Could toggleSeries() return true or false depending on the visible state of the series?

[koenrad]

+1

I need to hide all series except the first one by default.

[junedchhipa]

Added new methods showSeries and hideSeries. Also, toggleSeries will return a boolean value whether the series is hidden or not. The change will be reflected in the next patch/minor release.

[ThinkSalat]

I can't seem to get these methods to work. I made an issue with codepen here #1192

[sebastianpikand]

Is showSeries() and hideSeries() available for apexcharts react implementation as well?

[sonphnt]

I am having a weird issue with showSeries(). Every time I call it the page will automatically scroll up to the top. Can we avoid this?

[gyurielf]

Added new methods showSeries and hideSeries. Also, toggleSeries will return a boolean value whether the series is hidden or not. The change will be reflected in the next patch/minor release.

Thank you for the feature!

It can be an array of string ? Would be nice to have.

[arunsabtharishi]

Added new methods showSeries and hideSeries. Also, toggleSeries will return a boolean value whether the series is hidden or not. The change will be reflected in the next patch/minor release.

@junedchhipa Thanks for adding the showSeries and hideSeries functions and it works great functionally. But the performance is too slow when the charts has many data series. Would love to have a showAllSeries and hideAllSeries, that would actually shows/hides all the data series in one go rather than the developer showing/hiding one by one in loop.

[gyurielf]

Added new methods showSeries and hideSeries. Also, toggleSeries will return a boolean value whether the series is hidden or not. The change will be reflected in the next patch/minor release.

@junedchhipa Thanks for adding the showSeries and hideSeries functions and it works great functionally. But the performance is too slow when the charts has many data series. Would love to have a showAllSeries and hideAllSeries, that would actually shows/hides all the data series in one go rather than the developer showing/hiding one by one in loop.

+1 I also had performance issues while using these methods.

[arunsabtharishi]

Added new methods showSeries and hideSeries. Also, toggleSeries will return a boolean value whether the series is hidden or not. The change will be reflected in the next patch/minor release.

@junedchhipa Thanks for adding the showSeries and hideSeries functions and it works great functionally. But the performance is too slow when the charts has many data series. Would love to have a showAllSeries and hideAllSeries, that would actually shows/hides all the data series in one go rather than the developer showing/hiding one by one in loop.

@junedchhipa , there has been already a thread regarding this which has been tagged to high priority feature request, but has been automatically closed by bot because of no activity.

[Caecilius21]

Hi, how can we please use methods on Chart component in ReactJs please? Thank you

[karschdn]

Hi, how can we please use methods on Chart component in ReactJs please? Thank you

as a workaround you can

window.ApexCharts.exec('my.options.chart.id', 'resetSeries',{})

[jjxtra]

Same performance issues here, calling the show/hide/toggle brings web page to it's knees

[brodrigz]

+1

I need to hide all series except the first one by default.

The ability to have series disabled by default would be a great plus

[g3gant]

+10 To have an option to set a series invisible while creating, so they won't render initially would be the great (and I believe must have option). The hideSeries method is ok, but useless when you need to hide series initially.

[veerababuyarramalla]

Added new methods showSeries and hideSeries. Also, toggleSeries will return a boolean value whether the series is hidden or not. The change will be reflected in the next patch/minor release.

@junedchhipa Thanks for adding the showSeries and hideSeries functions and it works great functionally. But the performance is too slow when the charts has many data series. Would love to have a showAllSeries and hideAllSeries, that would actually shows/hides all the data series in one go rather than the developer showing/hiding one by one in loop.

@junedchhipa now i am getting the same performance issue.. for now is there any soluation for any method for hide many at at time

[emailnikola]

Performance is really an issue. Example: 35 series chart where each series have only 14 points calling hideSeries in loop to hide all but one series takes just under 4 seconds.

[namrata-smarttrak]

Can we hide two series out of five series and can we show that hidden series values in tooltip?

[RafaelCENG]

bump the last comment

[junedchhipa]

A new property hidden added into series. The configuration for it will look like this

series = [
  {
    name: 'series1',
    data: [31, 40, 28, 51, 42, 109, 100],
  },
  {
    name: 'series2',
    data: [11, 32, 45, 32, 34, 52, 41],
    hidden: true,
  },
],

The new property will be available from v3.53.0

[RafaelCENG]

A new property hidden added into series. The configuration for it will look like this

series = [
  {
    name: 'series1',
    data: [31, 40, 28, 51, 42, 109, 100],
  },
  {
    name: 'series2',
    data: [11, 32, 45, 32, 34, 52, 41],
    hidden: true,
  },
],

The new property will be available from v3.53.0

W Dev

[bahyusanciko]

use hideSeries if check chart two id

becouse check data Y sum 0 hide series

error log

// Hide series with all zero data after rendering

seriesData.forEach((series, index) => {
       let totalSum = series.data.reduce((sum, dataPoint) => sum + parseFloat(dataPoint.y), 0);
       if (totalSum == 0) {
           chart[chartId].hideSeries(series.name);
       }
   });

Uncaught TypeError: Cannot read properties of null (reading 'getAttribute') at y.value (apexcharts-CNFkXbcq.js:13:26744) at y.value (apexcharts-CNFkXbcq.js:13:27453) at y.value (apexcharts-CNFkXbcq.js:703:7654) at :73:32 at Array.forEach () at :70:20 value @ apexcharts-CNFkXbcq.js:13 value @ apexcharts-CNFkXbcq.js:13 value @ apexcharts-CNFkXbcq.js:703 (anonymous) @ VM9558:73 (anonymous) @ VM9558:70

[litera]

@junedchhipa When can we expect the 3.53.0 version release?

[junedchhipa]

@litera Release notes for v3.53.0

[itsantini]

@litera Release notes for v3.53.0

Thx alot 🙏

[victorbiasibetti]

hey @junedchhipa any chance to implement same feature on https://www.npmjs.com/package/react-apexcharts/v/1.4.1 ???