title: Chart.js with dual axis on bar and line graph
body: <p>I am using Quince's Chart.js version from this topic <a href="https://stackoverflow.com/questions/25811425/chart-js-how-to-get-combined-bar-and-line-charts">Chart.js how to get Combined Bar and line charts?</a>. Bar and Line graph look very nice. Anyway, axis has to be separated into Y1 and Y2 which i cannot find that Quince's version support.</p>
  
  <p>I did search again and found this topic <a href="https://stackoverflow.com/questions/28079139/how-to-add-second-y-axis-for-bar-and-line-chart-in-chart-js">How to add second Y-axis for Bar and Line chart in Chart.js?</a> which recommended to use Khertan's Chart.js which it can handle dual axis but i cannot find the way to combine bar and line within one plot.</p>
  
  <p>I tried to input this option into Quince's version but it did not work.</p>
  
  <pre><code>scaleUse2Y: true,
  </code></pre>
  
  <p>Is there any way i can do this? Thank you for your kindly help.</p>
  
  <pre><code>&lt;script&gt;
  Chart.defaults.global.templateInterpolators = {
      start: "[[",
      end: "]]"
  };
  Chart.defaults.global.scaleLabel = "[[= value ]]";
  Chart.defaults.global.tooltipTemplate = "[[if (label){]][[= label ]]:     [[}]][[= value ]]";
  Chart.defaults.global.multiTooltipTemplate = "[[= value ]]";
  
  
  var data = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [{
          label: "My First dataset",
          color:"#F7464A",
          //new option, barline will default to bar as that what is used to create the scale
          type: "line",
          fillColor: "rgba(220,220,220,0.2)",  //White
          strokeColor: "rgba(220,220,220,1)", //gray
          pointColor: "rgba(220,220,220,1)",  //gray
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: [65, 20, 43, 81, 56, 55, 40]
      }, {
          label: "My First dataset",
          color:"#F7464A",
          //new option, barline will default to bar as that what is used to create the scale
          type: "bar",
          fillColor: "rgba(255, 187, 0, 1)",
          strokeColor: "rgba(255, 187, 0, 1)",
          pointColor: "rgba(255, 187, 0, 1)",
          pointStrokeColor: "#fff",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: [32, 25, 43, 22, 12, 92, 33]
      }]
  };
  
  //canvases
  var lineBar = document.getElementById("line-bar").getContext("2d");
  
  //charts
  var myLineBarChart = new Chart(lineBar).Overlay(data);
  </code></pre>
  
  <p>In this HTML</p>
  
  <pre><code>&lt;ul class="tabs"&gt;&lt;li&gt;&lt;input type="radio" name="tabs" id="tab1"checked /&gt;
  &lt;label for="tab1" onclick="rePlot(1,3)"&gt;2015&lt;/label&gt;
  &lt;div id="tab-content1" class="tab-content" onclick="rePlot(1,3)"&gt;
  &lt;canvas group="canvas" id="line-bar" height="450" width="600" style="background-color:#8CDFD3;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  
  &lt;li&gt;&lt;input type="radio" name="tabs" id="tab2" /&gt;&lt;label for="tab2" onclick="rePlot(2,3)"&gt;2014&lt;/label&gt;
  &lt;div id="tab-content2" class="tab-content" onclick="rePlot(2,3)"&gt;
  
  &lt;canvas group="canvas" id="line-bar" height="450" width="600" style="background-color:#8CDFD3;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  
  &lt;li&gt;&lt;input type="radio" name="tabs" id="tab3" /&gt;&lt;label for="tab3" onclick="rePlot(3,3)"&gt;2013&lt;/label&gt;
  &lt;div id="tab-content3" class="tab-content" onclick="rePlot(3,3)"&gt;
  
  &lt;canvas group="canvas" id="line-bar" height="450" width="600" style="background-color:#8CDFD3;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>