title: Chart.JS Global Options
body: <p>I seem to be getting errors in Chart.JS for some reason.  It's related to the global options that you can set.</p>
  
  <p>The is as follows
  <a href="https://i.stack.imgur.com/bRMpp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bRMpp.png" alt="enter image description here"></a>
  Here is my code</p>
  
  <pre><code>var chart1 = document.getElementById("chart1").getContext("2d"),
  chart2 = document.getElementById("chart2").getContext("2d"),
  chart3 = document.getElementById("chart3").getContext("2d"),
  
  datatest1 = document.getElementById("datatest1").value,
  datatest2 = document.getElementById("datatest2").value,
  
  color_bg = "#00b5e4",
  color_fg = "#007799",
  
  data1 = [{ value: Math.floor(Math.random() * 100), color: color_bg}, { value: Math.floor(Math.random() * 100), color: color_fg}],
  data2 = [{ value: datatest1, color: color_bg}, { value: datatest2, color: color_fg}],
  data3 = {
      labels: ["Jan", "Feb", "Mar"],
      datasets: [
          {
              fillColor: "rgba(220,220,220,0.5)",
              strokeColor: "rgba(220,220,220,0.8)",
              highlightFill: "rgba(220,220,220,0.75)",
              highlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 80, 81, 56, 55, 40]
          },
          {
              fillColor: "rgba(151,187,205,0.5)",
              strokeColor: "rgba(151,187,205,0.8)",
              highlightFill: "rgba(151,187,205,0.75)",
              highlightStroke: "rgba(151,187,205,1)",
              data: [28, 48, 40, 19, 86, 27, 90]
          }
      ]
  };
  
  
  //
  // #Global Chart Settings
  var options = Chart.defaults.global = {
  animation: true,
  animationSteps: 160,
  animationEasing: "easeOutQuart",
  responsive: true,
  showTooltips: true,
  segmentShowStroke: false,
  maintainAspectRatio: true,
  percentageInnerCutout: 70,
  onAnimationComplete: function () {
      "use strict";
      //console.log("Animation Done");
  }
  };
  
  $(document).ready(function () {
  "use strict";
  
  //
  // #Initialise and bind to data and global options
  new Chart(chart1).Doughnut(data1, options);
  new Chart(chart2).Doughnut(data2, options);
  new Chart(chart3).Radar(data3);       
  });
  </code></pre>
  
  <p>If you remove the options from the charts they work, if you add options and set them globally as per their documentation you get the error I've mentioned.  Am I missing something obvious or is there an issue here?</p>