title: I am trying to plot a pair of list from flask on a multi axis bar chart using Chart.js. I am able to plot the chart but cannot display the legend
body: <p>I have been trying to plot a pair of lists returned using json on an html page using chart.js. I have been able to plot the data using chart.js but haven't been able to create the legend. The code for the chart.js function is given below - </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function addData(chartID, labels, data) {
        Chart.defaults.scale.ticks.beginAtZero = true;
        Chart.defaults.global.responsive = true;
        Chart.defaults.global.maintainAspectRatio = true;
  
        var ctx = document.getElementById(chartID).getContext('2d');
        var newChartData = {};
  
        newChartData.type = "bar";
        newChartData.data = {};
        newChartData.data.labels = [];
        newChartData.data.datasets = [];
        newChartData.options = {};
        newChartData.options.legend = {
          enabled: true,
          display: true,
        };
        newChartData.options.legend.labels = {
          fontColor: 'black',
          fontSize: 18
        }
  
        data.labels.forEach((label) =&gt; {
          newChartData.data.labels.push(label);
        });
        data.datasets.forEach((dataset) =&gt; {
          newChartData.data.datasets.push(dataset);
        });
        console.log(JSON.stringify(newChartData, null, 2));
        console.log(newChartData);
  
        var chart_plot = new Chart(ctx, newChartData);
        chart_plot.update();
      }
  
  
  
  
      var lab = ['TV', 'Press', 'Airport OOH', 'Search', 'Facebook', 'Twitter', 'Display', 'Affiliates'];
  
      var dataFirst = {
        label: "% Change in Spends",
        data: [20, 15, 60, 60, 65, 30, 70],
        backgroundColor: [
          'rgba(219, 0, 17, 0.8)',
          'rgba(219, 0, 17, 0.8)',
          'rgba(219, 0, 17, 0.8)',
          'rgba(219, 0, 17, 0.8)',
          'rgba(219, 0, 17, 0.8)',
          'rgba(219, 0, 17, 0.8)',
          'rgba(219, 0, 17, 0.8)'
        ],
        // Set More Options
      };
  
      var dataSecond = {
        label: "% Change in Applications",
        data: [0, 59, 75, 20, 20, 55, 40],
        backgroundColor: [
          'rgba(117, 117, 117, 0.8)',
          'rgba(117, 117, 117, 0.8)',
          'rgba(117, 117, 117, 0.8)',
          'rgba(117, 117, 117, 0.8)',
          'rgba(117, 117, 117, 0.8)',
          'rgba(117, 117, 117, 0.8)',
          'rgba(117, 117, 117, 0.8)'
        ],
        // Set More Options
      };
  
      var speedData = {
        labels: ['TV', 'Press', 'Airport OOH', 'Search', 'Facebook', 'Twitter', 'Display', 'Affiliates'],
        datasets: [dataFirst, dataSecond]
      };
  
  addData('chart_plot', lab, speedData);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;canvas id="chart_plot" width="400" height="400"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Things I have tried to do - </p>
  
  <ol>
  <li>Tried "Chart.defaults.global.legend = true;"</li>
  <li>Tried "newChartData.options.legend = {enabled:true, display:true,};
  newChartData.options.legend.labels = {fontColor: 'black', fontSize: 18}"</li>
  </ol>
  
  <p>I am new to JS, Jquery &amp; chart.js. I am sure I am missing some crucial piece of code here. I would be grateful if someone would just tell me where I am going wrong.</p>