How can we have 2 different stacked values in Line chart?

1

I am having Dataset 1 ,Dataset 2,Dataset 3,Dataset 4 in as my datasets in that Dataset 1 and Dataset 2 should be in one stack and Dataset 3 and Dataset 4 should be another stack. I tried by using stacked attribute in different ways along with stack but nothing works.

Here is the sample example:

{
    "backgroundColor": "transparent",
    "width": "300",
    "format": "svg",
    "version": "2",
    "chart": "{type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{   type: 'line',   label: 'Dataset 1',   fill: false,   data: [5, 3, 4, 10, 8, 9, 2] }, {   type: 'line',   label: 'Dataset 2',   fill: false,   data: [8, 5, 2, 8, 7, 2, 6] }, {   type: 'line',   label: 'Dataset 3',  stack: 'Stack 0', borderWidth: 0,  data: [2, 4, 1, 3, 7, 3, 6] }, {   type: 'line',   label: 'Dataset 4',  stack: 'Stack 0', borderWidth: 0,  data: [7, 2, 4, 5, 6, 4, 2] }]    },    options: { elements: {point:{radius: 0}},responsive: true, title: {   display: true,   text: 'Chart.js Stacked Bar and Unstacked Line Combo Chart' }, scales: {   xAxes: [{     stacked: true,   }],yAxes: [{     stacked: true,   }]  }    }  }",
    "devicePixelRatio": "1.0",
    "height": "380"
}

Thanks in advance for your reply

2

Hi @bramesh8, this works well on Chart.js v4 using named stacks:

{
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        type: 'line',
        label: 'Dataset 1',
        stack: 'Stack 1',
        borderWidth: 0,
        fill: true,
        data: [2,2,2,2,2,2,2],
        backgroundColor: 'blue',
      },
      {
        type: 'line',
        label: 'Dataset 2',
        stack: 'Stack 1',
        borderWidth: 0,
        fill: true,
        data: [2,2,2,2,2,2,2],
        backgroundColor: 'blue',
      },
      {
        type: 'line',
        label: 'Dataset 3',
        stack: 'Stack 2',
        borderWidth: 0,
        fill: true,
        data: [5,5,5,5,5,5,5],
        backgroundColor: 'pink',
      },
      {
        type: 'line',
        label: 'Dataset 4',
        stack: 'Stack 2',
        borderWidth: 0,
        fill: true,
        data: [5,5,5,5,5,5,5],
        backgroundColor: 'pink',
      }
    ]
  },
  options: {
    elements: {
      point: {
        radius: 0
      }
    },
    plugins: {
      title: {
        display: true,
        text: 'Chart.js Stacked Line Chart with Multiple Stacks'
      }
    },
    scales: {
      x: {
        stacked: true
      },
      y: {
        stacked: true
      }
    }
  }
}

Link to Chart Editor

In this example, datasets 1 and 2 stack up to y=4 and datasets 3 and 4 stack up to y=10.

Hope this helps,

Ian