title: two xAxes horizontal bar chart Charts.js
body: <p>I'm struggling to get the correct xAxis setup with charts.js and a two-axes horizontal bar chart. JsFiddle link is below. The trouble is that I'm trying to show two different scales in the same chart. One is a high number (price) and the other is a low number (quantity). </p>
  
  <p><a href="https://jsfiddle.net/clevelandbuckeye/Luaf2tm4/533/" rel="nofollow noreferrer">https://jsfiddle.net/clevelandbuckeye/Luaf2tm4/533/</a></p>
  
  <p>I'm using the second x-Axis in the options property but the label is showing up as the Month, not the quantity! How can the quantity be displayed? </p>
  
  <pre><code>&lt;canvas id="myChart" width="400" height="200"&gt;&lt;/canvas&gt;
  &lt;script&gt;
  var canvas = document.getElementById('myChart');
  var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "# Deals",
      backgroundColor: "rgba(255,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)",
      borderWidth: 2,
      hoverBackgroundColor: "rgba(255,99,132,0.4)",
      hoverBorderColor: "rgba(255,99,132,1)",
      data: [15, 19, 5, 16, 1, 12, 8],
        xAxisID:'x1',
    }, {
      label: "$Money",
      backgroundColor: "rgba(55,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)",
      borderWidth: 1,
      hoverBackgroundColor: "rgba(55,99,132,0.4)",
      hoverBorderColor: "rgba(255,99,132,1)",
      data: [265, 459, 320, 181, 456, 555, 1040]
    }]
  };
  var option = {
      scales: {
        yAxes: [{
          gridLines: {
            display: true,
            color: "rgba(255,99,132,0.2)"
          }
        }],
        xAxes: [{
            id: 'x1',
            gridLines: {
              display: false
            }},
            {
              id: 'x2',
              gridLines: {
                display: false
              }
            }]
        }
      };
      var ctx = document.getElementById("myChart").getContext('2d');
  
      var myBarChart = new Chart(ctx, {
        type: 'horizontalBar',
        data: data,
        options: option
      });
  &lt;/script&gt;
  </code></pre>