I can't seem to get this mixed chart to display correctly? I have three datasets for a stacked line graph, and another line graph that is not stacked. Here is my dataset code (the data is filled in with code).
var barChartData = {
labels:[],
datasets: [
{
label: 'A',
backgroundColor: '#6F7EB3',
fill: true,
data: [],
yAxisID: 'count-y-axis',
xAxisID: 'count-x-axis'
},
{
label: 'B',
backgroundColor: '#D05B5B',
fill: true,
data: [],
yAxisID: 'count-y-axis',
xAxisID: 'count-x-axis'
},
{
label: 'C',
backgroundColor: '#66A5A0',
fill: true,
data: [],
yAxisID: 'count-y-axis',
xAxisID: 'count-x-axis'
},
{
label: 'Percent',
borderColor: '#EFE4B0',
fill: false,
data: [],
yAxisID: 'efficiency-y-axis',
xAxisID: 'efficiency-x-axis'
}
]};
And the chart options are:
window.myBar = new Chart(ctx, {
type: 'line',
data: barChartData,
options: {
title: {
display: true,
text: "Mixed Lines"
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
display: true,
id: "count-x-axis"
}, {
stacked: false,
display: false,
id: "efficiency-x-axis"
}],
yAxes: [{
type: "linear",
display: true,
stacked: true,
position: "left",
id: "count-y-axis"
}, {
type: "linear",
display: true,
stacked: false,
ticks: {
min: 0,
max: 100
},
position: "right",
id: "efficiency-y-axis"
}]
}
}
});
When the 'Percent' data set is last in the array of datasets it looks like it is rendered 'behind' the other three datasets. When the 'Percent' dataset is first the other datasets stack (although the 'Percent' dataset is drawn correctly.