2

I'm working with a dual Axis chart from Chart.js using a line chart overlaid on a bar chart, I found the working code from this question and the chart works great, however I can't get the y-axis labels or the title of the chart to show up.

Before I started using an overlay chart, I was using a normal dual axis chart, and the way I was adding in the titles and labels worked great, so I'm just a little confused about how to get the titles and labels to show up on my current chart.

Here is my current code:

$scope.drawChart = function(data_1, data_2, labels) {
    var overlayData = {
      labels: labels,
      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: data_1
      }, {
        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: data_2
      }],
      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
    });
  }

The code snippet that I previously used to add in the labels is: datasets: [{ scaleLabel: { display: true, labelString: "Average Monthly Listings" }, .... }]

And the way I was getting the title to show up was with this:

title: {
    display: true,
    text: 'Chart Title'
}

Here is a fiddle I made for it: https://jsfiddle.net/catiecook/6vgtakz2/

Community
  • 1
  • 1
quaitie
  • 21
  • 1
  • How about this: https://jsfiddle.net/6vgtakz2/1/ – Hackerman Feb 23 '17 at 19:56
  • @Hackerman - That does seem to add a label that I also needed to show up, so thank you! However, I'm trying to get it to show the top title, and the left and right y-axes as well. – quaitie Feb 23 '17 at 20:14

0 Answers0