title: Chart.js - displaying multiple line charts using multiple labels
body: <p>I need to draw a chart with 2 lines using Chart.js.<br>
  Each of this line has a different label set.<br>
  i.e. 
  Chart 1:  </p>
  
  <pre><code>1 -&gt; 2  
  2 -&gt; 4   
  3 -&gt; 8  
  4 -&gt; 16
  </code></pre>
  
  <p>Chart 2:  </p>
  
  <pre><code>1 -&gt; 3  
  3 -&gt; 4  
  4 -&gt; 6  
  6 -&gt; 9
  </code></pre>
  
  <p>This following sample obviously does not work as it uses the labels from chart1. But is it possible to realize this with Chart.js?    </p>
  
  <pre><code>    var config = {
          type: 'line',
          data: {
              labels: [1,2,3,4,5],
              datasets: [{
                  label: 'Chart 1',
                  data: [2,4,8,16],
              }, {
                  label: 'Chart 2',
                  data: [3,4,6,9],
              }]
          },
  </code></pre>
  
  <p>Other charting libs offers a (label/data) set as parameter so I could simply give a tupel as parameter<br>
  (ie. [(1->2),(2->4),(3->8)...]<br>
  for each chart and the lib will match everything.</p>
  
  <p>Thanks</p>
  
  <p>Edit: Detailed sample as requested:</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>var config = {
    type: 'line',
    data: {
      labels: [1, 2, 3, 4, 5],
      datasets: [{
        label: 'Chart 1',
        data: [2, 4, 8, 16],
      }, {
        label: 'Chart 2',
        data: [3, 4, 6, 9],
      }]
    },
    options: {
      spanGaps: true,
      responsive: true,
      title: {
        display: true,
        text: 'Chart.js Line Chart'
      },
      tooltips: {
        mode: 'index',
        intersect: false,
      },
      hover: {
        mode: 'nearest',
        intersect: true
      },
      scales: {
        xAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Labels'
          }
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Values'
          },
          ticks: {
            min: 1,
            max: 10,
  
          }
        }]
      }
    }
  };
  
  window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    window.myLine = new Chart(ctx, config);
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"&gt;&lt;/script&gt;
  
  &lt;div style="width:90%;" class="container"&gt;
    &lt;canvas id="canvas"&gt;&lt;/canvas&gt;&lt;br&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>