title: Chart.js Mixed Bar and Line chart with different scales
body: <p>I'm building out a chart using chart.js, it is a stacked bar chart with a scatter type. My problem is that the scale on the x-axis of the bar chart does not properly represent the x-axis scale of the scatter. I spent the past few hours looking over the docs and browsing SOF and came up with <a href="https://stackoverflow.com/a/45065367/5063323">This Answer</a>, which makes sense with respect to the bar graph, just not the scatter graph which is plotted by x-y coordinates.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var chartDefault = {
    type: 'bar',
    data: {
      labels: ['30', '45', '60', '90', '120', '120+'],
      datasets: [{
        type: 'bar',
        label: 'Receivable',
        data: [730, 492.5, 120, 4732.5, 2760.85, 0],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1
      }, {
        type: 'bar',
        label: 'Past Due',
        data: [2760.85, 0, 0, 0, 0, 0],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255,99,132,1)',
        borderWidth: 1
      }, {
        type: 'scatter',
        label: 'Invoice',
        data: [{"x":106,"y":177.7},{"x":101,"y":1},{"x":92,"y":1},{"x":88,"y":120},{"x":65,"y":4},{"x":66,"y":120},{"x":59,"y":120},{"x":36,"y":372.5},{"x":35,"y":120},{"x":29,"y":120},{"x":4,"y":185},{"x":4,"y":120},{"x":1,"y":240},{"x":1,"y":65}],
        xAxisID: 'invoice-time',
        yAxisID: 'invoice-amount',
        backgroundColor: 'rgba(75, 00, 150, 0.2)',
        borderColor: 'rgba(75, 00, 150,1)',
        borderWidth: 2
      }]
    },
    options: {
      scales: {
        xAxes: [{
          display: true,
          stacked: true,
          scaleLabel: {
            display: true,
            labelString: 'Days'
          },
        }, {
          id: 'invoice-time',
          display: false,
          stacked: false,
          scaleLabel: {
            display: false,
            labelString: 'Days'
          },
          ticks: {
            beginAtZero: true,
            stepSize: 1,
            suggestedMax: 125
          }
        }],
        yAxes: [{
          display: true,
          stacked: true,
          scaleLabel: {
            display: true,
            labelString: 'Dollar Amount'
          },
          ticks: {
            beginAtZero: true,
          }
        }, {
          id: 'invoice-amount',
          display: false,
          stacked: false,
          scaleLabel: {
            display: false,
            labelString: 'Dollar Amount'
          },
          ticks: {
            beginAtZero: true,
          }
        }]
      },
    }
  };
  var chart = new Chart($('#creditSat'), chartDefault);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;canvas id="creditSat"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So if you look at the snippet for the scatter dataset, there are 11 data points but only 6 are mapped. I would like all 11 to be mapped, I know there is some overlap and that makes sense. Essentially this is a representation of invoices, you have the Receivables, Past Due represented by the bar and then the points on the line represent the invoices themselves. Any help would be much appreciated.</p>