ChartJS stacked line with colorschemes
Shows that fill has transparency even though instructions followed from GitHub issue https://github.com/chartjs/Chart.js/issues/2380
by EverHopeful
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-colorschemes"></script>
CSS
canvas { background-color : #eee;
}
JavaScript
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
fill: 'origin',
borderWidth: 1,
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
}
]
},
options: {
plugins: {
colorschemes: {
scheme: 'brewer.DarkTwo3',
},
},
elements: {
line: {
fill: '-1'
}
},
scales: {
yAxes: [{
stacked: true
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);