overlay dual axis chart

by catiecook

HTML

<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script>
<canvas id="chart">
</canvas>

JavaScript

var overlayData = {
          labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec"],
          title: {
						display: true,
						text: 'Chart Title'
					},
          datasets: [{
            label: "Revenue Potential Per Available Rental",
            type: "bar",
            scaleLabel: {
              display: true,
              labelString: "Revenue Potential Per Available Rental"
            },
            yAxesGroup: "1",
            fillColor: "rgba(56, 132, 199,0.5)",
            strokeColor: "rgba(56, 132, 199,0.8)",
            highlightFill: "rgba(56, 132, 199,0.75)",
            highlightStroke: "rgba(56, 132, 199,1)",
            data: [28, 48, 40, 19, 86, 27, 90, 36, 55, 44, 77, 66]
          }, {
            label: "Average Monthly Listings",
            type: "line",
            scaleLabel: {
              display: true,
              labelString: "Average Monthly Listings"
            },
            yAxesGroup: "2",
            fillColor: "rgba(89, 89, 89,0.5)",
            strokeColor: "rgba(89, 89, 89,0.8)",
            highlightFill: "rgba(89, 89, 89,0.75)",
            highlightStroke: "rgba(89, 89, 89,1)",
            data: [8, 38, 30, 29, 46, 67, 80, 34, 65, 43 ,65 ,67]
          }],
          yAxes: [{
            name: "1",
            scalePositionLeft: false,
            scaleFontColor: "rgba(56, 132, 199,0.5,0.8)"
          }, {
              name: "2",
              scalePositionLeft: true,
              scaleFontColor: "rgba(89, 89, 89,0.8)"
          }]
  		  };

        var myOverlayChart = new Chart(document.getElementById("chart").getContext("2d")).Overlay(overlayData,
        {
            populateSparseData: true,
            overlayBars: false,
            datasetFill: true,
            responsive: true
        });