title: Chart js show/hide legend during runtime via buttonClick
body: <p>Hi i want to show/hide the legend of my linechart (chart.js) by clicking a button.</p>
  
  <p>I tried this so far:</p>
  
  <p>The following code changes the value of scatterChart.legend.options.display but after executing scatterChart.update() the value changes automatically to the initial value!</p>
  
  <pre><code>function showHideLegend() {
      console.log(scatterChart.legend.options.display);   // -&gt; "inital-value" e.g.: true
      if (scatterChart.legend.options.display == true) {
          scatterChart.legend.options.display = false;
      } else {
          scatterChart.legend.options.display = true;
      }
      console.log(scatterChart.legend.options.display);   // -&gt; value successfully changed e.g.: false
      scatterChart.update();
      //Chart.defaults.global.legend.display = false;     // &lt;- does not have an effect
      console.log(scatterChart.legend.options.display);   // -&gt; "inital-value" e.g.: true
  }
  
  function initMap() {
      scatterChart = new Chart(document.getElementById("scatterChart"), {
          type: 'line',
          data: {
              /*datasets: [
              ]
              */
          },
          showScale: false,
          options: {
              legend: {
                  position: 'right',
                  labels: {
                      fontSize: 15
                  }
              }
          }
      });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;canvas id="scatterChart" style="width: 1920px; height: 1080px; background-image:url('image.jpg'); background-size: 100% 100%;"&gt;&lt;/canvas&gt;
  &lt;div id="scatterLegend"&gt; //howToPutLegendHere??// &lt;/div&gt;
  &lt;input type="button" value="Show/Hide Legend" onclick="showHideLegend()"&gt;
  </code></pre>