vtgrad03
Posts: 6
Joined: Thu Mar 02, 2017 12:30 am

Series Visible False in HighCharts Cloud?

Do we have the option to hide some (but not all) data series using the "Visible: False" option the way you would in the non-cloud version? The only thing i found was the option under advanced, plot options... but that hides all series. I want to start off with one visible and the rest not. Anyone know how to do this? Is it possible in cloud?

TIA
pawel_d
Posts: 1910
Joined: Thu Jun 02, 2016 10:28 am

Re: Series Visible False in HighCharts Cloud?

Hi vtgrad03,

Yes, it is possible in Cloud but you need to add some custom code in order to see effects. In CUSTOMIZE (step 3) there is a section 'Code' and it has a subsection 'Custom code'. There you can place an extra properties and functions which extend chart options and behaviour. For example if you want to hide all series beside the first one, you can do it like that:

Code: Select all

Highcharts.extend(options, Highcharts.merge(options, {
    chart: {
        events: {
            load: function() {
                var chart = this,
                  series = chart.series;
          
                series.forEach(function(ser, inx) {
                    if(inx) {
            	        ser.update({
              		    visible: false
            	        });
                    }
                });
            }
        }
    }
}));
API Reference:
http://api.highcharts.com/highcharts/chart.events.load
http://api.highcharts.com/highcharts/Series.update

Cloud Example:
http://cloud.highcharts.com/show/ukumava

JSFiddle Example:
http://jsfiddle.net/d_paul/9vr7q36y/

Regards.
Paweł Dalek
Highcharts Developer
vtgrad03
Posts: 6
Joined: Thu Mar 02, 2017 12:30 am

Re: Series Visible False in HighCharts Cloud?

Thank you. This is very helpful. Would you also be able to provide an example of how you would choose individual series, and not just the first one? In the chart example you provided, there are four series, in order: Tokyo, New York, Berlin, and London. What if you wanted to show only Berlin, which is not listed first? Or if you wanted to display Tokyo and Berlin? Could you also provide sample code for that? That would be awesome.
pawel_d
Posts: 1910
Joined: Thu Jun 02, 2016 10:28 am

Re: Series Visible False in HighCharts Cloud?

Hi vtgrad03,

Of course. For example if you want to show only Berlin series, you can do that by checking if series.name !== 'Berlin'. Please, take a look at the updated demo and code below:

Code: Select all

Highcharts.extend(options, Highcharts.merge(options, {
    chart: {
        events: {
            load: function() {
                var chart = this,
                  series = chart.series;
          
                series.forEach(function(ser, inx) {
                    if(ser.name !== 'Berlin') {
            	        ser.update({
              		    visible: false
            	        });
                    }
                });
            }
        }
    }
}));
Cloud Example:
http://cloud.highcharts.com/show/ukumava

JSFiddle Example:
http://jsfiddle.net/d_paul/8d813rxf/

Regards.
Paweł Dalek
Highcharts Developer
vtgrad03
Posts: 6
Joined: Thu Mar 02, 2017 12:30 am

Re: Series Visible False in HighCharts Cloud?

Many thanks!

Return to “Highcharts Cloud”