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/