title: Combo Bar Line Chart with Chart.js
body: <p>My line chart is not showing on my chart.js at all.  What piece of the puzzle am i missing here?</p>
  <p>Also here is a fiddle that shows my code, you can see the bar graph displays as expected but the line chart does not.  <a href="https://jsfiddle.net/c50dfw3g/1/" rel="nofollow noreferrer">https://jsfiddle.net/c50dfw3g/1/</a></p>
  <p>I have never used this type of chart before so I am not certain how exactly to set it up.  Thanks in advance to all who assist.</p>
  <pre><code>var ctx = document.getElementById('myChart');
  var config = {
      type: 'bar',
    options: {
      legendCallback: function(chart) {
        var text = [];
        text.push('&lt;ul class=&quot;' + chart.id + '-legend&quot;&gt;');
        var data = chart.data;
        var datasets = data.datasets;
        if (datasets.length) {
          for (var i = 0; i &lt; datasets.length; ++i) {
              text.push('&lt;li&gt;');
              if (datasets[i].type=='line') {
              text.push('&lt;span class=&quot;'+datasets[i].type+'&quot; style=&quot;background-color:' + datasets[i].backgroundColor + '&quot;&gt;&lt;/span&gt;');
            } else {
              text.push('&lt;span class=&quot;'+datasets[i].type+'&quot; style=&quot;background-color:' + datasets[i].backgroundColor + '&quot;&gt;&lt;/span&gt;');
            }
            text.push(datasets[i].label);
            text.push('&lt;/li&gt;');
          }
        }
        text.push('&lt;/ul&gt;');
        return text.join('');
      },
      legend: {
        display: false,
      },
      scales: {
        xAxes: [{
          type: &quot;category&quot;,
          id: &quot;axis-bar&quot;,
        }, {
          type: &quot;time&quot;,
          id: &quot;axis-time&quot;,
          display: false,
        }, ],
      },
    },
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      datasets: [{
        label: &quot;Dataset1&quot;,
        type: &quot;line&quot;,
        backgroundColor: &quot;#0000FF&quot;,
        borderColor: &quot;#0000FF&quot;,
        borderWidth: 1,
        fill: false,
        xAxisID: &quot;axis-time&quot;,
        data: [12296,12381,9141,24203,21987,21801,65394,91892,57645,44637,22631,17502]
      },{
        label: &quot;Dataset2&quot;,
        type: &quot;bar&quot;,
        backgroundColor: &quot;#ff0000&quot;,
        borderColor: &quot;#ff0000&quot;,
        borderWidth: 1,
        fill: true,
        xAxisID: &quot;axis-bar&quot;,
        data: [299405,244029,247191,329711,273855,441914,426271,471912,374388,366864,326155,277442]
      }]
    },
  
  };
  
  var myChart = new Chart(ctx, config);
  var legend = myChart.generateLegend();
  document.getElementById(&quot;legend&quot;).innerHTML = legend;
  </code></pre>