I am trying to add confidence intervals to a timeseries plot in chart.js. At the moment I plotting three datasets and using the fill option. This means I end up with 3 elements in the legend all of which can be toggled independently (figure 1).

What I want to do is bine the three legend elements into a single object that will toggle all three data sets at once e.g. like the mock up in figure 2. [Or alternative structure my data in such a way that a single dataset plots all three lines].

EDIT: This is a minimal working of example of how I am currently implementing the plot - /

In this example I would like a single legend element that toggles all three datasets.

var chartData = {
labels: [1, 2, 3, 4, 5],
datasets: [
        {
      label: "Set 1",
      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",
      backgroundColor: 'rgba(55, 173, 221,  0.6)',
      data: [12, 22, 52, 42, 32],
      borderWidth: 0.1,
      fill: '-2',
      pointRadius: 0.0,
  },

]
};

var chartOptions = {
responsive: true,
title: {
    display: true,
    text: 'Bad Confidence Intervals'
},
};

var chartDemo = new Chart($('#demo').get(0), {
type: 'line',
data: chartData,
options: chartOptions
});

I am trying to add confidence intervals to a timeseries plot in chart.js. At the moment I plotting three datasets and using the fill option. This means I end up with 3 elements in the legend all of which can be toggled independently (figure 1).

What I want to do is bine the three legend elements into a single object that will toggle all three data sets at once e.g. like the mock up in figure 2. [Or alternative structure my data in such a way that a single dataset plots all three lines].

EDIT: This is a minimal working of example of how I am currently implementing the plot - https://jsfiddle/r491ge8z/7/

In this example I would like a single legend element that toggles all three datasets.

var chartData = {
labels: [1, 2, 3, 4, 5],
datasets: [
        {
      label: "Set 1",
      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",
      backgroundColor: 'rgba(55, 173, 221,  0.6)',
      data: [12, 22, 52, 42, 32],
      borderWidth: 0.1,
      fill: '-2',
      pointRadius: 0.0,
  },

]
};

var chartOptions = {
responsive: true,
title: {
    display: true,
    text: 'Bad Confidence Intervals'
},
};

var chartDemo = new Chart($('#demo').get(0), {
type: 'line',
data: chartData,
options: chartOptions
});

• javascript
• chart.js
• legend

• what stops you from making two dataset from the dataset you have. – Seabizkit Commented Dec 13, 2019 at 12:23
• I'm not sure what you mean - I've added code to show how I'm currently implementing the plot. – mawir Commented Dec 13, 2019 at 13:01
• instead of thinking about it like they separate... merge them... aka sum them together and treat them like a new set of data which is the data bined. – Seabizkit Commented Dec 14, 2019 at 8:15
• ok i see what you trying to achieve...googling – Seabizkit Commented Dec 14, 2019 at 8:27

1 Answer 1

I worked out how to do this by adding the following to chart options - [Assuming your confidence interval are named xxx_lo, xxx, xxx_hi and appear in chartData in that order]

jsfiddle example - https://jsfiddle/5fktnv6a/

labels: {
  filter: function(item, chart) {
    return !item.text.includes('_');
  }
},
onClick: function(e, legendItem) { // need to hide index -1 and index +1
  let index = legendItem.datasetIndex;
  let ci = this.chart;
  let alreadyHidden = (ci.getDatasetMeta(index).hidden === null) ? false : ci.getDatasetMeta(index).hidden;
  let meta_lo = ci.getDatasetMeta(index - 1);
  let meta = ci.getDatasetMeta(index);
  let meta_hi = ci.getDatasetMeta(index + 1);
  if (!alreadyHidden) {
    meta_lo.hidden = true;
    meta.hidden = true;
    meta_hi.hidden = true;
  } else {
    meta_lo.hidden = null;
    meta.hidden = null;
    meta_hi.hidden = null;            
  }

  ci.update();
},