Line chart with combination of fill and line - chart.js

Question

I want Group1 and Group2 to be filled. However, I want Group3 to be a line only (without fill). But since the data of Group3 is between that of Group1 and Group2, it is overlapped by their fillings; thus I cannot even see Group3. How can I display Group3 as just a line without fill?
config = {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [
{
label: 'Tier A',
data: [-800, -1100, -1150, -1250, -1560, -1460, -1890],
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255,99,132)',
borderWidth: 1
},
{
label: 'Tier B',
data: [-1300, -1560, -1380, -2450, -2560, -1860, -3890],
backgroundColor: 'rgb(54, 162, 235)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1
},
{
type: 'line',
label: 'Tier B',
data: [-1100, -1460, -1280, -1650, -2060, -1560, -2890],
backgroundColor: 'rgb(255, 206, 86)',
borderColor: 'rgb(255, 206, 86)',
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
};

Answer 1

I guess, lightening the fill does the trick. I don't want to lighten the fill, but it's the only way I can think of
config = {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [
{
label: 'Group1',
data: [-800, -1100, -1150, -1250, -1560, -1460, -1890],
backgroundColor: 'rgba(255, 99, 132, 0.3)',
borderColor: 'rgba(255,99,132, 0.3)',
borderWidth: 1
},
{
label: 'Group2',
data: [-1300, -1560, -1380, -2450, -2560, -1860, -3890],
backgroundColor: 'rgba(54, 162, 235, 0.3)',
borderColor: 'rgba(54, 162, 235, 0.3)',
borderWidth: 1
},
{
label: 'Group3',
fill: false,
data: [-1100, -1460, -1280, -1650, -2060, -1560, -2890],
backgroundColor: 'rgb(255, 206, 86)',
borderColor: 'rgb(255, 206, 86)',
borderWidth: 4
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
};