title: Button to show all legend items in highcharts
body: <p>Thanks to <a href="https://stackoverflow.com/questions/6608410/highcharts-series-want-to-show-hide-all-except-selected-series-reversal-of-de">this helpful post</a>, I was able to re-format the legend so that clicking a legend item shows only that item, rather than hiding it and showing all other items. </p>
  
  <p>Once the user clicks on a legend item, I'd like for the user to be able to click a button and once again see all of the legend items. </p>
  
  <p>Here's the fiddle: <a href="http://jsfiddle.net/scheltense/qb13g51u/1/" rel="nofollow noreferrer">http://jsfiddle.net/scheltense/qb13g51u/1/</a></p>
  
  <p>And the code:</p>
  
  <pre><code>$(function () {
  $('#container').highcharts({
       credits: {
           position: {
              align: 'right',
              x: -10,
              y: -1
          },
           text: 'Source: Federal Emergency Management Agency',
           href: 'http://www.FEMA.gov'
      },
      chart: {
          type: 'area'
      },
          title: {
          text: 'Federal Disaster Declarations: 2001-2013',
          align: 'left',
          x: 25,
          y: 5
      },
      subtitle: {
          text: 'The Federal Emergency Management Agency (FEMA) uses these categories to classify federal disasters delcarations.',
          align: 'left',
          x: 25,
          y: 30
      },
      legend: {
          backgroundColor: '#F5F3F2',
          layout: 'vertical',
          symbolHeight: 8,
          symbolWidth: 10,
          align: 'left',
          verticalAlign: 'top',
          floating: true,
          x: 62,
          y: 72,
          padding: 3,
          itemMarginTop: 3,
          itemMarginBottom: 3,
          itemStyle: {
              lineHeight: '8px',
              color: '#000000',
              fontWeight: 'normal'
          },
          reversed: true
          },
      xAxis: {
          categories: ['2001', '\'02', '\'03', '\'04', '\'05', '\'06', '\'07', '\'08', '\'09', '\'10', '\'11', '\'12', '\'13', '\'14*'],
          tickmarkPlacement: 'on',
          title: {
              enabled: true
          }
      },
      yAxis: {
          title: {
              text: 'Declarations'
          },
          max: 100,
          labels: {
              formatter: function () {
                  return this.value;
              }
          }
      },
      tooltip: {
          shared: false,
          valueSuffix: ''
      },
      plotOptions: {
          area: {
             events: 
          {
              legendItemClick: function(event) 
              {
                  var seriesIndex = this.index;
                  var series = this.chart.series;
  
                  for (var i = 0; i &lt; series.length; i++)
                  {
                      if (series[i].index != seriesIndex)
                      {
                          series[i].hide();
                      } 
                      else
                      {
                          series[i].show();    
                      }
                  }
                  return false;
              }
          },
  
              stacking: 'normal',
              lineColor: '#E5E2E0',
              lineWidth: 0,
              marker: {
                  enabled: false
              }
          }
      },
      series: [{
          name: 'Other',
          color: '#9fcad3',
          data: [6, 5, 2, 3, 0, 4, 1, 1, 1, 1, 8, 4, 6, 0],
          marker: {
              symbol: 'circle'
          }
      }, {
          name: 'Hurricane',
          color: '#bb6b85',  
          data: [0, 4, 8, 14, 11, 0, 0, 8, 1, 1, 14, 15, 2, 0],
          marker: {
              symbol: 'circle'
          }
      }, {
          name: 'Severe Winter Weather',
          color: '#bba16b', 
          data: [4, 5, 6, 1, 2, 1, 5, 5, 5, 12, 5, 0, 3, 11],
          marker: {
              symbol: 'circle'
          }
      }, {
          name: 'Flood',
          color: '#6b85bb',
          data: [5, 4, 0, 1, 2, 2, 1, 3, 3, 7, 19, 3, 15, 2],
          marker: {
              symbol: 'circle'
          }
      }, {
          name: 'Severe Storm and Tornado',
          color: '#6bbba1',
          data: [27, 25, 35, 42, 30, 45, 56, 56, 48, 55, 50, 25, 36, 15],
          marker: {
              symbol: 'circle'
          }
      }]
  
          }, function (chart) {
  
      var point = chart.series[0].data[8],
          text = chart.renderer.text(
              '*through Aug. 5, 2014',
              point.plotX + chart.plotLeft - 280,
              point.plotY + chart.plotTop + 316
          ).attr({
              zIndex: 5
          })
      .css({
              color: '#909090',
              fontSize: '10px'
          })
      .add(),
          box = text.getBBox();                    
  });
  });
  </code></pre>
  
  <p>This is the portion of the code that shows only the legend item that has been clicked: </p>
  
  <pre><code>    plotOptions: {
      area: {
         events: 
      {
          legendItemClick: function(event) 
          {
              var seriesIndex = this.index;
              var series = this.chart.series;
  
              for (var i = 0; i &lt; series.length; i++)
              {
                  if (series[i].index != seriesIndex)
                  {
                      series[i].hide();
                  } 
                  else
                  {
                      series[i].show();    
                  }
              }
              return false;
          }
      },
  </code></pre>
  
  <p>This is my first JavaScript project, so I apologize if the question is unclear, and I appreciate any help that can be provided. </p>
  
  <p>Thanks very much.</p>