JavaScript
var chartData = {
labels: [1, 2, 3, 4, 5],
datasets: [
{
label: "Set 1_lo",
backgroundColor: 'rgba(55, 173, 221, 0.6)',
data: [8, 18, 48, 38, 28],
borderWidth: 0.1,
fill: false,
pointRadius: 0.0,
},
{
label: "Set 1",
backgroundColor: 'rgba(55, 173, 221, 1)',
data: [10, 20, 50, 40, 30],
borderColor: "#00F",
fill: false,
pointRadius: 0.0,
},
{
label: "Set 1_hi",
backgroundColor: 'rgba(55, 173, 221, 0.6)',
data: [12, 22, 52, 42, 32],
borderWidth: 0.1,
fill: '-2',
pointRadius: 0.0,
},
{
label: "Set 2_lo",
backgroundColor: 'rgba(221, 55, 173, 0.6)',
data: [46, 37, 28, 9, 20],
borderWidth: 0.1,
fill: false,
pointRadius: 0.0,
},
{
label: "Set 2",
backgroundColor: 'rgba(221, 55, 173, 1)',
data: [50, 40, 30, 10, 20],
borderColor: "#F00",
fill: false,
pointRadius: 0.0,
},
{
label: "Set 2_hi",
backgroundColor: 'rgba(221, 55, 173, 0.6)',
data: [50, 41, 32, 13, 24],
borderWidth: 0.1,
fill: '-2',
pointRadius: 0.0,
},
]
};
var chartOptions = {
responsive: true,
title: {
display: true,
text: 'Bad Confidence Intervals'
},
legend: {
display: true,
// this toggles on / off the confidence intervals
labels: {
filter: function(item, chart) {
return !item.text.includes('_');
}
},
onClick: function(e, legendItem) { // need to hide index -1 and index +1
var index = legendItem.datasetIndex;
var ci = this.chart;
var alreadyHidden = (ci.getDatasetMeta(index).hidden === null) ? false :...